All language subtitles for 03 - The syntax of HTML elements.en

- Let's jump right in.

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 markup a paragraph properly,

we use an 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.

We'll be looking at some of those later.

But a lot of the HTML elements do have

both an opening and a 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.

We'll be going through dozens of HTML elements

in this course, learning when to use each one,

so don't worry about that yet.

Just understand the basic mechanics for now.

The markup conveys purpose and meaning.

It provides computers a way to understand more

about what the content, or the interface,

means to humans.

HTML provides a connection of meaning

between the human world and the computer world.

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.

I'll explain the em element later,

just notice how one HTML element can be nested

inside of another.

In fact, and 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.