Ten HTML tags for more modern pages


Most modern web developers dig into HTML tags when creating web pages. If you’ve been writing HTML for a while, you’re used to using a variety of standard tags ranging from and To . Over time, however, the best tags used to get the most out of your HTML code have changed. Indeed, HTML has gone from simple markup to something more semantic in nature.

Moving towards a more semantic paradigm, HTML markup not only tells a browser how to display content on your web page, but it can also present the the context of your markup. This context can be used to further enhance content, whether in your own programs or by third parties, including search engines.

How to modernize HTML

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

Extension of to include header, footer and main sections

Although you have a body in your HTML document identified by a tag, web developers should (or could) also have header, footer, and main sections. Each of these elements helps organize the overall content of your HTML document.

The tag is not the same as the label. The the label comes before tag and usually includes metadata that is not displayed. While it may contain other tags (including scripts), it is outside of the main HTML document. label.

The The tag is placed in the tag . It should be used in place of a

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

My Page Heading


The the label is also placed in the tag and is generally used to contain information that would go to the foot of a page; things like sitemap, contact information, navigation links, authorship information, copyright information and a link to the terms of use.

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


Navigating a page with

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

label. The

The tag is typically used to identify a list of navigation links. Here is an example of using the

HTML tag:

Articles and Asides in HTML

While the , , and Tags help align the main areas of your page, you also need to identify the content – or articles – on your page. Although this has often been done with

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

label. You can use the

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

Sometimes in the content of a page or article, additional information is included. This is often indirectly related to what is said. For example, an article might include a commentary on a related topic or provide information on where the reader can go for additional information. This additional information may be packaged in a tag to better identify it. The tag is generally used in the content of

tags or in the sidebar content of a document.

Dump Integrate for

If you used the tag, then you should stop. You should switch to a more specific tag such as , , Where . In many cases, if you are still using the tag, you may find that some browsers do not display your content correctly.

The The tag can be used to embed a video in your web document, such as a video clip or a video stream. It is typically used with one or more tags that identify the content to display. If more than one tag is included, the browser will search for the first one with a video type supported by the browser. Most browsers support MP4, WebM, and Ogg formats (Safari may not support Ogg). The overall format for integrating a video is:


  Your browser does not support the video tag.

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

The tag works the same but plays an audio file. As with the tag, you can include a “controls” attribute which will also display audio controls. The following would play the sound.mp3 audio file:


  Your browser does not support the audio tag.

Grouping images with a caption in HTML

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

My image caption

While it works, it’s not the best way to create the most meaningful HTML code. Rather, the first thing you should change is to use a tag to include the image and caption instead of the

label. The The tag helps clarify and identify that an image or photograph is included. In addition, the legend of the figure can be identified by a
HTML tag. The following shows more meaningful HTML code to display the same image. This is how you use the and
HTML tags:
My image caption

or not towards

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

beacons and Key words. While these tags can continue to be used, any time you can be more specific with what is in your document, you increase the semantic and overall value of your page. So if you find that you are using a
, you should stop and ask yourself if there is another more suitable tag. Of course, using
better not to use tags to structure your content.

HTML Modernization Tutorial

All of the tags presented in this article are basic HTML, many of which were introduced with HTML5. While ten tags are featured to make your code easier to read and more semantically meaningful, other tags have been added as well. The main point to remember is that as HTML evolves, tags are added to help make your markup not only easier to read, but also more meaningful to others who also need to take a closer look, including search engines. If search engines understand your markup better, they are more likely to show your page higher in search engine page results or SERPs, which will lead to more traffic to your website.

Read more HTML5 web development and programming tutorials.


Previous How EVE Online Players Are Helping Scientists Research COVID-19
Next How to delete yourself from the Internet