HTML5 will enable you to convey the structure of your web pages in a clear manner

Mwiza Kumwenda

Feb 18, 2020·3 min read

HTML5 Allows you to deliver highly fluid and interactive web content in an organized structure. HTML5 elements are used by web browsers in order to render web pages and for search engine optimization (SEO).

Although HTML5 has been around for a while, it is unfortunate that not all its semantics elements are utilized to the fullest.

Instead of using the <div> element for each and every part of a web page, you could utilize HTML5 semantic elements for better structured web pages and to clearly define different parts of a web page.

The Advantages of using HTML5 semantics elements include

• Better structured web pages,
• Clean, readable and maintainable code,
• Allows for better user experience,
• Better ranking of web pages on search engines and
• Better parsing of web pages by browsers

Here is a selection of 7 HTML5 semantic elements that you can use in your web pages.

<article>

The <article> element is used in defining a self-contained area on a page. In other words, the entry within an <article> element is a complete composition. Ideal candidates to be placed within the <article> elements include an entire blog post which is independents of other elements. Each article is wholly self-contained and can therefore contain sub elements directly under it.

<section>

One of the elements that can be used to group content thematically is the <section> element. The <section> element define distinct content of a web document.

<article>
  <p>Main headlines</p>
  <section>
    <p>News</p>
    <h4> Headline one </h4>
  </section>
</article>

The <article> and <section> elements are similar and can be interchangeably in most cases.

<nav>

Navigation to other parts of a website is key. The <nav> element helps define main navigation areas for a website. Often, the <nav> contains a group of links. Common forms of <nav> are top navigation bar or side navigation.

<nav>
  <ul>
    <li><a href="/home"> Home </a></li>
    <li><a href="/about"> About </a></li>
  </ul>
</nav>

<aside>

An <aside> element defines smaller content areas outside of the normal flow of a web page. The content within a <aside> element is somehow related to the main content but may be placed in a sidebar, for example. When you think <aside>, think of side chick.

<aside>
  <p>This is a sidebar; content may complement main section.</p>
</aside>

<header>

The <header> element defines the top most part of a web page, article, or section. Typically, a <header> will contain navigation tools or a search bar that appears the very top of a web page.

<header>
    <h1> Page heading </h1>
    <p> Paragraph With supplementary info</p>
</header>

<footer>

What goes up must come down! If there is a <header>, surely there must be a <footer>. The <footer> element is used to define the bottom part of a web page, article or section. Typically, it contains metadata, for example, author details or a website owner.

<footer> &copy; Mkulu inc. All rights reserved </footer>

<figure> and <figcaption>

Last but not least, the <figure> element helps define content that contains a figure, for example, images charts etc. And the <figcaption> is simply just that. A caption to your figure.

<figure>
  <img src="./assets/img/lake_malawi.jpg" alt="beautiful lake" />
  <figcaption> Image of lake Malawi at dawn </figcaption>
</figure>

Here is a diagram depicting how a typical web page may be structured with HTML5 semantic elements.

Conclusion

HTML5 semantic elements help you to deliver quality web content in a highly organized and standardized manner. Make use of them 😊.