CodeGym /Java Course /Frontend SELF EN /Getting to Know HTML Tags

Getting to Know HTML Tags

Frontend SELF EN
Level 1 , Lesson 2
Available

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:

HTML
      
<h1>
      
    

Closing tag looks like the opening one, but it has a slash before the keyword.


</tag>

Example:

HTML
      
</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
      
<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.

Comments
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION