Every HTML Tag

November 27, 2023

Have you ever wondered what the different HTML tags represent? With over 100 different tags, it could be confusing in determining what each one represents. In this post, we will be looking at what every element does and how they work. In addition, I will also be giving each tag a rating from S to F, depending on how useful and popular each tag is. This post will only cover tags supported in HTML5, so sorry to any fans of <tt>.

As a heads up, I most likely will not have all the elements done at once. I will be doing this over time or else I would go insane.

: The Comment Tag

This tag is used to insert comments into your HTML file. Just like in every programming language, the comment is used to document code and provide a way for developers to explain their work. Comments are essential in any project, be it small or large.
```
    
```
Rating: S
<!DOCTYPE>: The Document Type Tag

At the top of every HTML file lies this tag, which indicates which type of document the browser should expect. Calling this a tag is a bit of a stretch, since it is more of a declaration to the browser. Without it, the browser would open the file in Quirks mode, which could cause issues if newer web elements are used.
```
    <!DOCTYPE html>
```
Rating: A
<a>: The Link Tag

The classic <a> tag, used for creating hyperlinks. One of the most popular tags, this is essential in terms of not only navigating a website, but also navigating the entire internet. By using the href attribute, you can create a hyperlink to anything, be it a page on your site or a different website altogether.
```
    <a href="https://www.google.com">Link</a>
```
Rating: S
<abbr>: The Abbreviation Tag

Here we have an example of a tag that has a fairly niche use, used to define an abbreviation, like HTML. As you will see throughout this post, there are several tags that are supposed to be used for specific purposes, which I tend to not like as much. I will say, however, this tag is useful in the sense that you can add a title attribute which will cause the full name to appear when you hover over the element.
```
    <abbr title="HyperText Markup Language">HTML</abbr>
```
Rating: B
<address>: The Address Tag

This is another tag that is used for a niche use, but unlike the <abbr> tag, this one does not do anything to the text except for making it italic and adding a line break before and after the element. Here, we see my least favorite type of HTML elements, where they are used for a specific purpose, but it could easily be done with CSS instead.
```
    <address>
        1600 Pennsylvania Ave NW, <br>
        Washington, DC 20500
    </address>
```
Rating: F
<area> and <map>: Image Maps

I have never used an image map before, but I could see its usefulness. An image map is any image that has clickable areas. I suspect this was used in older sites, since there are more accessible ways of doing this in the modern web. You cannot use <area> unless it is nested under a <map>, and <map> is useless without having one or more nested <area>, so that is why I am rating them together. Although it is not likely to be used anymore, I appreciate it for what it is.

To use this, you essentially need an image with a usemap attribute, then a map with a name from the usemap. Then, unside the map, you would have different areas, where for each one you need a shape, coordinates, and an href.
```
    <img src="workplace.jpg" alt="Workplace" usemap="#workmap">
    <map name="workmap">
        <area shape="rect" coords="34,44,270,350" href="computer.htm">
        <area shape="rect" coords="290,172,333,250" href="phone.htm">
        <area shape="circle" coords="337,300,44" href="coffee.htm">
    </map> 
```
Rating: C
<article>: The Article Tag

Here is an element that is supposed to be used to define independent, self-contained content. Essentially, anything in the <article> tag should make sense by itself, as if it was an article in a blog or newspaper. I doubt anyone uses this tag now, and it provides no unique CSS styling. Perhaps it was used back in the day, but now I'm 99% sure a <div> element would rather be used.
```
    <article>
        <h2>Article title</h2>
        <p>Here would be the content of the article.</p>
    </article>
```
Rating: D
<aside>: The Aside Tag

This tag is used to define any content that is indirectly related to the surrounding content. An example would be if you write about a programming project you are working on, and you mention you used MySQL as a database, then you would use an aside to describe what MySQL is. Like article, it has no CSS styling properties, and is mostly useless unless you don't want to use a <div>.
```
    <aside>
        This is an aside
    </aside>
```
Rating: D
<audio> and <source>: Audio

As you can clearly see by the name, these elements are used for embedding any audio into a website. Audio is an important aspect for several websites, and I think these tags do a fine job at embedding audio. Essentially, you would have several <source> tags nested inside an <audio> element. Each source should represent a different file for the audio, each a different format. This allows the browser to embed the first working source, since audio file support is not consistent amongst browsers.
```
    <audio controls>
        <source src="file.mp3" type="audio/mpeg">
        <source src="another_file.ogg" type="audio/mpeg">
    </audio>
```
Rating: B
<b>: The Bold Tag

Makes the text bold. Just awful. Never use this. Use CSS instead.
```
    <b>This text is bold</b>
```
Rating; F

Back to Blog