Feb 24, 2023

How to Write Semantic HTML and Why You Should Do It

When it comes to web development, writing clean and semantic HTML is crucial for creating an accessible and optimized website. Semantic HTML is a way of writing HTML that describes the content on the page rather than just how it looks. In this blog post, we will cover the benefits of writing semantic HTML, including its impact on SEO, and best practices for implementing it. We will also explore how to use react-structured-data, a useful tool for adding structured data to your website.

Benefits of Writing Semantic HTML

Improved Accessibility

Writing semantic HTML can greatly improve the accessibility of your website. By using semantic tags such as <header>, <nav>, <main>, and <footer>, you can help screen readers and other assistive technologies to better understand the structure of your page. This can make your website more accessible to people with disabilities, such as those who are blind or visually impaired.

Using semantic tags can also help with keyboard navigation. When a user navigates through the page using the tab key, semantic HTML tags make it easier for them to understand the organization of the content on the page.

Better SEO

In addition to accessibility benefits, writing semantic HTML can also improve your website’s search engine optimization (SEO). Search engines like Google and Bing use semantic HTML to understand the content and structure of your web pages. By using semantic tags to describe the content on your page, you can help search engines to better understand what your website is about and improve its ranking in search results.

For example, if you have a blog post about “How to Write Semantic HTML”, using an <article> tag to wrap your article content will help search engines to understand that this is a blog post, and not just a regular webpage.

Easier Maintenance and Updating

Semantic HTML can also make it easier to maintain and update your website. By using descriptive tags, you can make it easier for yourself and others to understand the structure and purpose of your page. This can make it easier to make updates and changes to your website in the future.

Additionally, using semantic HTML can help you avoid using divs with classes for styling purposes. This can help you to write more maintainable CSS code and avoid specificity issues.

Best Practices for Writing Semantic HTML

When writing semantic HTML, there are a few best practices to keep in mind:

Use semantic tags such as <header>, <nav>, <main>, and <footer> to describe the content and structure of your page.
Use headings (<h1>, <h2>, etc.) to indicate the hierarchy of your content.
Use lists (<ul>, <ol>, and <dl>) to represent collections of related items.
Use descriptive class and ID names to make it easier to understand the purpose of your elements.

For example, if you have a navigation menu, you can use the <nav> tag to wrap your menu items, and use descriptive class names like “main-nav” to describe the purpose of the element.

Here is an example of how to use semantic HTML tags to describe the structure of a page:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <header>
      <h1>My Page</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>My Blog Post</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
      </article>
      <section>
        <h2>My Section</h2>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </section>
    </main>
    <footer>
      <p>&copy; 2021 My Company</p>
    </footer>
  </body>
</html>

This example demonstrates the use of semantic HTML tags to describe a page’s structure, which makes it more accessible and search engine-friendly. The <header> tag contains the main heading and navigation menu, while the <main> tag contains the main content of the page. The <footer> tag contains the copyright information.

The navigation menu is contained within the <header> tag using the <nav> tag. An unordered list (<ul>) with list items (<li>) is used to create the menu.

The <main> tag contains an <article> tag that houses a blog post, and a <section> tag that contains a list of related items.

Using `react-structured-data`

react-structured-data is a useful tool for adding structured data to your website. Structured data is a way of providing additional information to search engines about the content on your page. This can help to improve your website’s SEO and make it more visible in search results.

Here’s an example of how to use react-structured-data in a React component with an example of JSONLD:

<JSONLD>
  <Product name="Product Name">
    <AggregateRating ratingValue={4.3} reviewCount={197}/>
    <GenericCollection type="review">
      <Review name="It's awesome" reviewBody="This is Great! My family loves it" datePublished="11/22/1963">
        <Author name="Jerry"/>
        <Location name="Chicago, IL"/>
        <Rating ratingValue={5} />
      </Review>
      <Review name="Very cool" reviewBody="I like this a lot. Very cool product" datePublished="11/22/1963">
        <Author name="Cool Carl"/>
        <Location name="Chicago, IL"/>
        <Rating ratingValue={4} />
      </Review>
    </GenericCollection>
  </Product>
</JSONLD>

In this example, we’re using react-structured-data to add structured data to a product page. We’re providing additional information about the product, such as its name, aggregate rating, and customer reviews.

Conclusion

Writing semantic HTML is an important part of creating an accessible and optimized website. By using descriptive tags and following best practices, you can improve the accessibility and SEO of your website, as well as make it easier to maintain and update. Using react-structured-data can further improve your website’s visibility in search results. With the use of semantic HTML and structured data, you can create a website that is not only visually appealing but also accessible and optimized for search engines.