What Is Semantic HTML and Why Should We Use It?

By Diogo Souza

WEBINAR:
On-Demand

Application Security Testing: An Integral Part of DevOps


Currently the role of HTML is not only to structure documents for the web, but also to describe the meaning of content present in these documents through semantic tags. The semantic HTML aims to describe the meaning of the content present in HTML documents, making it clearer for both programmers and browsers, and other engines that process this information.

In this article, we're going to present the main semantic tags embedded in the HTML language.

header

<header> is used to represent the header of a document or section declared in HTML. In it, we can insert elements from <h1> to <h6>, elements to represent images, paragraphs or even navigation lists.

Example of use:

<header>
 <h1>Page title</h1>
 <h2>Page subtitle</h2>
</header>


Figure 1. Example of <header> usage.

Note: Unlike the <head> tag, you can declare more than one <header> per page.

section

The <section> element represents a section within a document and generally contains a title, which is defined by one of the elements between <h1> and <h6>. We can use the <section>, for example, to describe the sections/topics of a document.

Example of use:

<section>
 <h3>Section 1</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>


Figure 2. Example of <section> usage.

article

We use the <article> element when we need to declare content that does not need another one to make sense in an HTML document, for example, an article in a blog. It is recommended to identify each <article> with a title.

Example of use:

<article>
 <h3>Article 1 title</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<article>
 <h3>Article 2 title</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>


Figure 3. Example of <article> usage.

nav

The <nav> element is used when we need to represent a grouping of navigation links, which in turn are created with the <ul>, <li> and <a> elements.

Example of use:

<nav>
 <ul>   
  <li><a href="#">page 1</a></li>
  <li><a href="#">page2</a></li>
  <li><a href="#">page 3</a></li>
  <li><a href="#">page 4</a></li>
 </ul>
</nav>


Figure 4. Example of <nav> usage.

Note: We can declare <nav> anywhere in the document that contains a list of links, including <header>.

aside

The <aside> element is used when we need to create supportive/additional content for the main content. For example, when speaking of semantic HTML, we can indicate to the reader other content about the HTML language as a suggestion of complementary reading.

Example of use:

<aside>
 <nav>
  <ul>
   <li>Link 1</li>
   <li>Link 2</li>
   <li>Link 3</li>
   <li>Link 4</li>
  </ul>
 </nav>
</aside>


Figure 5. Example of <aside> usage.

main

The <main> element specifies the main content and is therefore of greater relevance within the page. To be considered well-constructed, a page should contain only one main content.

Example of use:

<main>
 <h2>Title</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 <article>
  <h3>Subtitle</h3>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </article>
</main>


Figure 6. Example of <main> usage.

Note: Content declared inside the <main> tag must be unique in the document, including links and images.

figure

The <figure> element is a specific markup for inserting a shape, a figure. To include the description of this figure, we can use the <figcaption> element.

Example of use:

<figure>
 <img src="https://www.htmlgoodies.com/img/layout/logo.png" alt="HtmlGoodies">
</figure>


Figure 7. Example of <figure> usage.

Example of use with caption:

<figure>
 <img src="https://www.htmlgoodies.com/img/layout/logo.png" alt="HtmlGoodies">
 
 <figcaption>Figure 1. HtmlGoodies</figcaption>
</figure>


Figure 8. Example of use of <figure> with <figcaption>.

footer

The <footer> element represents a footer for a document, such as the area present at the end of a web page. It is usually used to describe author information, such as the author's name and contact, and the content date of creation.

Example of <footer> usage:

<footer>
 <p>Written by HtmlGoodies.com</p>
 <p>Published in March 2018</p>
</footer>


Figure 9. Example of <footer> usage.

Semantics at the text level

In addition to structural semantics, HTML allows us to describe the meaning of text-level content using a set of semantic elements. Thus, it is possible, for example, to highlight the pieces of text that should receive prominence.

a

The main goal of the <a> element is to describe a link, connecting the various documents of a site and allowing navigation through that content. Usually these documents are related by sharing a common subject.

Example of use:

<a href="http://htmlgoodies.com" alt="HtmlGoodies">HtmlGoodies</a>

em

The element is used when you want to emphasize a text or non-text word, making it more relevant to the meaning/understanding of the content.

Example of usage:

<p>Do you <em>really</em> want to go to that party?</p>

This way, we do emphasize the most relevant part of the question.


Figure 10. Example of <em> usage.

strong

The <strong> element is also used to highlight a portion of the text. Its main difference from the <em> element is that <em> can change the purpose of a sentence, as we saw earlier.

Example of use:

<p>The most important <strong>concepts</strong> and <strong>applications</strong> of HTML nowadays come from the <strong>community</strong> and its rules about technology itself.</p>


Figure 11. Example of <strong> usage.

cite and q

The <cite> element is used to declare that in that snippet there is a citation, that is, a piece of text that was not written by the author of the content. Usually <cite> is used in conjunction with the <q> element, which is responsible for displaying the content taken from another source.

Example of using <cite> and <q>:

<p><q>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</q> - <cite>http://br.lipsum.com/</cite>.</p>


Figure 12. Example of both <cite> and <q> usages.

team

The <time> element is used to represent dates. So, if you need to inform the date a content was written, you can declare the <time> tag and add the datetime attribute to it to write the date in a standardized way.

<time datetime="2018-03-30">3/30</time>

Conclusion

Remember that when we build a web page we are preparing content that will be consumed by different "clients", such as other developers, browsers, search engine indexing algorithms and even text mining tools. Therefore, when writing HTML code, we need to also worry about the semantics of the elements present in the page. The correct use of semantic elements is fundamental for building modern web pages that are easier to understand and maintain.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date