Mastering HTML Semantic Structure For Improved User Experience

HTML is not about using div in every tag. Get used to using HTML semantic structure from the beginning. Using HTML5 semantic elements can improve the organization and readability of the code we write, making it simpler to maintain and understand. By labeling different sections of the webpage with specific semantic tags, it becomes easier for both humans and machines to understand the content and purpose of each section. They help us think about the structure of our dynamic data, and to choose titles’ hierarchy properly.

Semantic structure is a crucial element of HTML because it utilizes specific tags to give context and meaning to the content on a website. Adhering to semantic structure can make the HTML code more organized and easier to comprehend. This means using tags like <header>, <footer>, <article>, and <section> to organize your content and make it more easily understood by both humans and machines.

Table of Contents

What is HTML5 Semantic Structure?

Semantic elements in HTML provide clear and explicit meaning to both the browser and the developer. These elements are used to label specific sections of a webpage, such as the navigation menu, header, and footer. Utilizing semantic tags helps to identify and understand the purpose of each section of the page. The elements clearly describe its meaning & help increase accessibility.

<div class=”footer”></div> ❌

<footer></footer>✅

Elements such as <header>, <footer> and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

Avoid using generic tags like <div> and <span>. These tags don’t provide any meaning to your content, which can make it harder for both users and search engines to understand. Instead, use semantic tags that accurately describe the content you’re trying to display. Keep your structure simple and consistent. Your website’s structure should be easy to follow and understand. To create a well-organized and easily navigable website, it’s important to use a limited number of nested tags and to be consistent in the use of tags throughout the site. This helps both users and search engines to easily understand and navigate the content on the website.

Why Semantic Tags?

They are machine and human-readable.
Increase SEO score, as Search crawler knows part of the page they are crawling
Good for accessibility.

Let’s look at some Semantic HTML structure elements 👇

<header>

The <header> element represents a container for introductory content or a set of navigational links.

<header>
  <h2> Title </h2>
  <p> Tagline </p>
</header>

<footer>

The <footer> element defines a footer for a document or section.

<footer>
  <p>Thank you for visiting our website</p>
  <a href="mailto: [email protected]">Mail us</a>
</footer>

<aside>

The <aside> element defines some content aside from the content it is placed in (like a sidebar). The <aside> content should be indirectly related to the surrounding content.

<aside>
  <ul>
    <li> Home </li>
    <li> Contact Us </li>
  </ul>
</aside>

<main>

The <main> tag specifies main content of the HTML document. The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

<main>
  <article>
    <h2> Title </h2>
    <p> Lorem Ipsum dolor sit amet </p>
  </article>
  <article>
    <h2> Title </h2>
    <p> Lorem Ipsum dolor sit amet </p>
  </article>
</main>

<nav>

The <nav> element defines a set of navigation links.

<nav>
  <a href="home.html">Home </a>
  <a href="services.html">Services</a>
  <a href="contact.html">Contact</a>
</nav>

<section>

The <section> element defines a section in a document. A section is a thematic grouping of content, typically with a heading. A web page could normally be split into sections for introduction, content, and contact information.

<section>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Bibendum neque egestas
    congue quisque egestas diam. Nibh cras pulvinar mattis nunc sed blandit.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Bibendum neque egestas
    congue quisque egestas diam. Nibh cras pulvinar mattis nunc sed blandit.
  </p>
</section>

Overall, incorporating semantic structure into your HTML is a smart move that can improve the user experience on your website and boost your SEO. By using semantic tags to give meaning to your content, you can make your website more accessible and easier to understand for both humans and machines.

Thank you for scrolling. 💝

Share this blog, if you liked 😊. You can read our other blogs 👇

Mastering HTML Semantic Structure for Improved User Experience