SHARE

Ten HTML Tags for More Modern Pages

Written By

Nov 1, 2021

5 minute read

HTML Tutorial

Most modern web developers dig into HTML tags as they create web pages. If you have been writing HTML for a while, then you are used to using a variety of standard tags ranging from and to

. Over time, however, the best tags used to obtain the most value from your HTML have changed. Indeed, HTML has evolved from being just simple markup to something that is more semantic in nature.

By evolving to a more semantic paradigm, HTML markup not only indicates to a browser how to display the content of your web page, but it can also present the context of your markup. This context can be used to get more value from the content, whether in your own programs or by third parties, including the search engines.

How to Modernize HTML

So, what are a few of the key things in HTML that you should be using today to get the most semantic value? In the following web development tutorial, I will present 10 HTML tags that can help give your pages much more meaning.

Expanding to Include Header, Footer, and Main Sections

While you have a body in your HTML document identified with a tag, web developers should (or could) also have header, footer, and main sections. Each of these help to organize the overall content within your HTML document.

The

tag is not the same thing as the tag. The tag comes before the tag and generally includes metadata that is not displayed. While it can contain other tags (including scripting), it is outside of the main HTML document’s tag.

The

tag is placed within the tag. It should be used instead of a

or other tag to contain the introductory content and navigational links presented in the current HTML document. This can include headings, a logo or icon for the page, and other information. Here is an example use of a header tag:

<header>

  <h1>My Page Heading</h1>

  <!-- My page Navigation --> 

</header>

The

tag is also placed within the tag and is generally used to contain information that would go at the foot of a page; items such as sitemap, contact information, navigational links, authorship information, copyright information, and a link to terms of use.

Finally, the

tag is used to contain the unique content on the given page. Structures on your page that carry over to other pages such as the header, footer, and side elements should not be contained in the

tag.

Read: SEO HEADERS BEST PRACTICES AND TIPS.

Navigation on a Page with

As mentioned, the navigation on a page often happens in the header. To help better present your HTML content, you can identify and contain your primary navigation with a

tag. The

tag is generally used to identify a list of navigation links. Here is an example of how to use the

tag in HTML:

<nav>

  <a href="/java/">Java</a> |

  <a href="/ms/">Microsoft and .NET</a> |

  <a href="/lang/">Languages</a> |

  <a href="/mobile/">Mobile</a>

  <a href="/guides/">Guides</a>

  <a href="/arch/">Architecture and Design</a>

  <a href="/more/">More</a>

</nav>

Articles and Asides in HTML

While the

,

, and

tags help align the main areas of your page, you should also identify the content – or articles – within your page. While this has often been done with

tags, it is better to be more explicit and use the

tag. You can use the

tags around the specific article content. If you have more than one article on a page, then each can be wrapped in its own tags.

Sometimes within page content or an article, additional information is included. This is often indirectly related to what is being stated. For example, an article might include a comment about a related topic or provide information on where the reader can go for additional information. This added information can be wrapped in an

tag to help better identify it. The

tag is generally used within the content of

tags or within the sidebar content on a document.

Dump Embed for

If you have been using the tag, then you should stop. You should switch to a more specific tag such as , , or . In many cases, if you are still using the tag, you might find that there are browsers that do not display your content properly.

The tag can be used to embed a video into your web document, such as a movie clip or video stream. It is generally used with one or more tags that identify the content to be displayed. If more than one tag is included, then the browser will look for the first one with a video type supported by the browser. Most browsers support MP4, WebM, and Ogg formats (Safari might not support Ogg). The overall format of embedding a video is:

<video width="640" height="480" controls>

  <source src="movie.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>

The text included within the tag will only be displayed if the source video format is not supported.

The tag works in the same way but plays an audio file. Like with the tag, you can include a “controls” attribute that will display audio controls as well. The following would play the sound.mp3 audio file:

<audio width="640" height="480" controls>

  <source src="sound.mp3" type="audio/mp3">

  Your browser does not support the audio tag.

</audio>

Grouping Images with a Caption in HTML

The tag should be familiar to anyone that has done HTML. In the past, if you included a caption with an image, you might have helped organize your HTML by enclosing the image and caption in a

tag:

<div>

  <img src=”” alt=”my image”>

  <br>My image caption

</div

While this works, it is not the best way to create the most meaningful HTML. Rather, the first thing you should change is to use a

tag to enclose the image and caption instead of the

tag. The

tag helps to clarify and identify that an image or photograph is being included. Additionally, the figure caption can be identified with a

HTML tag. The following presents more meaningful HTML for displaying the same image. Here is how you use the

and

tags in HTML:

<figure>

  <img src=”” alt=”my image”>

  <figcaption>My image caption</figcaption>

</figure>

To
or not to

Most of the tags presented in this article replace what is commonly done with

tags and tags. While these tags can continue to be used, any time you can be more specific with what is within your document, you increase the semantic and overall value of your page. As such, if you find you are using a

, you should stop and consider whether there is another, more appropriate, tag. Of course, using

tags is better than not using any tagging to structure your content.

Modernizing HTML Tutorial

All the tags presented in this article are basic HTML, with many having been introduced with HTML5. While ten tags are presented to help make your code easier to read and more meaningful semantically, there are other tags that have been added as well. The main takeaway is that as HTML evolves, tags are being added to help make your markup not only easier to read, but also more meaningful to others that need to take a closer look as well, including search engines. If search engines understand your markup better, then they are more likely to present your page higher in the search engine page results or SERPs, leading to more traffic to your website.