In this article, we will be discussing how to use semantic HTML elements, which are elements that clearly describe their meaning. These can be very useful is writing better HTML code that is more readable for both the developer and browser.

What Are Semantic HTML Elements?

Semantic HTMl elements are elements that clearly describe their meaning to both the browser and the developer. Some examples include: <form>, <table> and <nav>.

Replacing Divs

When building front end websites with HTMl, you will often find yourself using divs with classes like nav, header and footer to indiciate navigations, headers and footers. However in HTML5, you can use semantic elements that define different parts of the web page. The following is a list of the most commonly used semantic elements in HTML that you can start using:

• <article>
• <section>
• <nav>
• <footer>
• <aside>
• <header>

The <article> Element

The <article> element specifies independent, self-contained content. An article should be completely understandable on its own even if the rest of the content present on the website was not there. An <article> element could be used for a variety of content including blog posts, newspaper articles and forum posts. For example, the following code could be used to display an article.

<article>Independent content that should be readable on its own</article>

The <section> Element

As the name suggests, the <section> element defines a section in a document. There are many possible sections on web pages. For instance, contact information could be put into its own section. As an example, the following code could be used to display a section of a document.

<section>
   <h1>Contact Us</h1>
   <p>Phone: 0000-000-000</p>
   <p>Email: hello@ourcompany.com</p>
</section>

Note: Sections and articles are very similar and you can nest articles in sections and vice-versa.

The <nav> Element

The navigation element (<nav>) specifies a set of navigation links. For example, the following code displays a very simply navigation bar.

  <nav>
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
   <ul>
  </nav>

Note: The <nav> element should only be used for major block of navigation links and not all links within a document.

The <footer> Element

The <footer> element defines a footer section in a document. Footers are usually placed at the bottom of websites and typically contain information like copyright information and back to top links. The following code is a very simple footer to demonstrate its use.

<footer>
   <p>Copyright 2021. Blake Y</p>
   <p><a href="mailto:contact@blakeyeboah.com">contact@blakeyeboah.com</a></p>
</footer>

The <aside> Element

The <aside> element defines content aside from the content it is placed in. For example, the <aside> could be used for a sidebar since it doesn't directly relate to its surrounding content. The following code would be used to display a simple sidebar.

<aside>
   <h3>Sidebar</h3>
   <p>This is my sidebar</p>
</aside>

The <header> Element

The <header> element signifies a container for introductory content. For example, you could place a navigation bar within a header. Interestingly, you can have multiple headers within a document however, <header> can't be places within a <footer>, a <address> or another <header>. As an example, the following code displays a simple navigation bar within a header.

 <header>
  <nav>
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
   <ul>
  </nav>
 </header>

There are more semantic elements out there that you can look into after reading this article. I hope you apply the knowledge you've learnt to your current and future projects.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake-K-Yeboah

You can also show your support by buying me a coffee 😃