HTML5 Semantic Tags

Semantic tags are ways to give more meaning to different tags in a html page or document. Semantic tags work similar to other block level tags in html, such as the div tag. However, semantic tags can make a html page more organised and can be better for SEO, as search engines can easily understand the architecture of the webpage or website.

Below is a simple example or normal html tags. Tags can be used to contain other tags or just plain text that is displayed onto the webpage. The below example shows using a div tag to contain a paragraph tag that contains display text. The text ‘Some Text’ is the only thing the user will see when visiting the webpage, the tags are not rendered onto the webpage.

    <p>Some Text</p>

Semantic tags can be used the same way normal html tags are used, they can contain other tags or just display text. The example shown below shows a semantic header tag that contains a semantic nav tag which then contains display text. The page renders the same way as the above example, as tags are not rendered only the display text is rendered onto the page for the user.

    <nav>Some Text</nav>

Certain semantic tags can be used for certain things within a webpage. The ‘figure’ tag can be used to contain images, and the ‘figcaption’ tag can be used to contain captions for the image. Again, these work the same to normal html tags where only the text is displayed.

  <img src="flower.jpg">
  <figcaption>Fig1. - Flower.</figcaption>

There are many different semantic tags available in html such as: article, aside, details, footer, main, mark, section, summary, time, etc. These tags are optional, you do not need to use them but you can use them to make a more organised html document or webpage.

Leave a Reply