- HTML looks like this.
In this case, P stands for paragraph.
We make this HTML by starting out with a less than symbol
followed by the correct letter or word or abbreviated word
and finishing with a greater than symbol.
That makes what's called a tag, an HTML tag.
Basically all HTML markup looks like this.
The syntax itself is fairly simple.
The trickier part is knowing which tags to use when.
There are actually two kinds of tags, two flavors,
opening tags and closing tags.
This P is an opening tag.
The closing tag is very similar,
but it has a slash in it.
Less than symbol, a forward slash,
the letter or word that matches the tag that we're closing
and a greater than symbol.
To mark up a paragraph properly, we use it opening tag
at the beginning of the paragraph, and then a closing tag
at the end like this.
The opening tag marks the beginning,
the content goes in the middle
and the closing tag marks the end.
These opening and closing tags
travel the world together in pairs.
The whole thing is called an element.
Now not every element has a closing tag
but a lot of the HTML elements do have
both an opening and closing tag.
Here are some other examples.
There's a paragraph wrapped in P tags.
We wrap a headline in h1 tags.
An article is wrapped in an article tag.
The markup conveys purpose and meaning,
it provides computers a way to understand more
about what the content or the interface means to humans.
Let's take a look at another example.
Here, we have a very short paragraph.
This paragraph has text that's emphasized for effect.
The whole paragraph is wrapped in opening
and closing P tags, and then inside the paragraph,
we have another phrase, text that's emphasized
and we made that into another element
by wrapping it in opening and closing em tags.
Just notice how one HTML element
can be nested inside of another.
In fact, an entire HTML document
is a whole bunch of HTML elements
all nested inside of each other.
If you've studied computer science,
you may recognize that nesting elements like this
will create a tree, a document tree,
or if you aren't a comp-sci geek,
then maybe imagine a family tree
with parents and children and siblings.
The browser pays attention to the structure
of how HTML elements are nested, and it creates
a big family tree out of who's related to who and how
or said in the correct technical terminology,
it builds a DOM tree from the data structure.
The Dom tree comes into play
if you write CSS or JavaScript
or when your developers do.
The browser then uses the DOM tree
to create an accessibility tree.
We'll talk about accessibility too.
Your choice of HTML elements affects the experience
of users on your website, including people
with a wide range of different disabilities.
It all starts with nesting HTML elements.
Here is a slightly more practical example
of how HTML is nested.
We've got an article, we can see the opening tag
for the article at the beginning.
Then inside is a headline followed by three paragraphs.
That last paragraph has a phrase of emphasized text inside.
And the whole thing is closed at the end
with a closing article tag
see how this structure tells the browser
that this article is made up of one headline
and three paragraphs?
Anything that comes after the closing article tag
will be displayed on the same HTML page,
but it will be understood by the browser
to be outside of this article.
It's after the article.
It matters where we open and close our HTML tags
and how we nest elements inside of each other.
We use this to convey meaning about content and interfaces.
Where does that paragraph start?
Where does it end?
One of the easiest mistakes to make in HTML
is to forget to put the closing tag
at the end of an element.
So don't forget, include the closing tag.
(upbeat music)