Empty HTML tags are tags that do not have any content. But there are two kinds of empty tags: (1) tags that cannot have content and (2) tags that could have content but don’t for some reason. Below are examples of both kinds. (For right now, don’t worry about understanding what the tags do).
|Examples of Both Kinds of Empty Tags|
|never has content||<hr/>|
|usually has content||<div></div>|
Alright, now we’ll go into a bit more detail about each kind.
Empty HTML Tags that Cannot Have Content
When people say “empty HTML tags,” they are usually referring to these type of tags: tags that can’t have content. See, sometimes it doesn’t make sense for an HTML tag to contain anything. Instead, the tag simply tells the browser to do something. Such tags are not used in pairs, but they are still called empty tags. Below are three very common empty HTML tags that cannot have content:
- the break tag (
- the horizontal rule tag (
- the image tag (
The break tag inserts a break into the text. The horizontal rule tag inserts a horizontal line into the text. The image tag inserts an image, but did you notice that each of these tags ends with a slash followed by a right angle bracket (
/>)? That is how these types of empty HTML tags end.
Empty HTML Tags that CAN have Content (But Don’t)
These are regular HTML tags that just don’t have any content for some reason. In some cases, they are empty because you just haven’t added the content yet. In other cases, you might intend to never add content.
A very common example is an empty div element. These can be used for certain formatting reasons. Below I show something called a “clearing div.” Don’t worry about understanding what a clearing div does. Just understand that it is an example of empty HTML tags because it doesn’t have any content.
|Example of an Empty Tag that CAN Have Content|
As you can see, even though it doesn’t have content, it does have an attribute (the
style attribute). So, just like in empty tags that cannot have content, it’s possible to use attributes in these empty tags, too. That’s because HTML attributes are not content.
Also, it has both a start tag (
<div style="clear:both">) and an end tag (
</div>). HTML tags that usually do have content always need their start tag and their end tag, even if you never content in them.
Again, when people say “empty HTML tags,” just remember that usually they are referring to the kind that cannot have content, OK?
Alright, well, that’s enough about empty HTML tags. Next we’re going to look at what may the most important HTML tag of them all: the anchor tag.