Ten HTML Tags for More Modern Pages

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.


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.


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:


My Page Heading



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


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

June 2022