1. Tags
Tags come in different types. First, they can be single or paired. Most commonly, you’ll see paired tags. And, as you can probably guess, they always come in pairs. They’re also called opening and closing tags.
Opening tag — it’s just a keyword inside triangular brackets.
<tag>
Example:
<h1>
Closing tag looks like the opening one, but it has a slash before the keyword.
</tag>
Example:
</h1>
The opening tag always comes first in a pair
.
It CANNOT be followed by the closing tag first and
then the opening one. Such an HTML document will be considered invalid.
2. Tag Tree
And here’s another important thing about paired tags. There can be many in a document, and they can be nested. This means any text in an HTML document can be wrapped (enclosed) in tags, even if it includes other tags. Example:
<html>
Regular text
<a href="http://codegym.cc/about">
Link to something interesting
</a>
some more text
</html>
Basically, an HTML text can have a tag sequence like this:
<h1> <h2> </h2> </h1>
But it cannot be like this:
<h1> <h2> </h1> </h2>
If the opening tag <h2>
is inside a pair of
<h1>
tags, then its paired closing tag
</h2>
must also be inside the same
<h1>
tags.
This way all the tags in the document form a kind of
tag tree
. It starts with a top-level tag that
wraps the entire document, usually called
<html>
, and it has children tags, which may have their
own children, and so on.
Essentially, a program that processes a document with tags sees it exactly like this — as a tag tree with nested text.
3. Single Tags
Empty tag
If a tag doesn’t have content, it usually looks like this:
<tag> </tag>
For these tags, there’s a special compact notation:
<tag/>
Notice that this tag
is different from a closing tag
— the slash
is at the end. This is just a short version of an empty pair of tags.
It’s simply called an empty tag.
Single tags
But in HTML there are also special single tags. They don’t have a closing tag. The list of such tags is defined by the HTML standard. Examples:
<br>
— line break;<hr>
— horizontal rule;<img>
— image.
There are 14 in total, half of them are service-related, and the other half originated in the first version of HTML. Nowadays these tags are avoided when possible.
GO TO FULL VERSION