Semantic HTML.

Semantic HTML and SEO

Semantic HTML means using HTML elements meaningfully, so that the structure and hierarchy of a web page are communicated as clearly as possible to search engine crawlers.

This improves accessibility and, as a result, indexing by search engines: the code is structured, ready for organic ranking, and uses markers that define the purpose of each element on the page without ambiguity.

Semantic HTML elements

Let’s look at the key elements that set semantic HTML apart from traditional HTML, and the best practices to improve your structure for SEO:

• Use semantic tags: use tags such as <header>, <footer>, <nav>, <article>, <section>, <aside>, <main> and so on to clearly mark out the sections of the page and their purpose.
• Logical structure: organise content logically and hierarchically. For example, use <h1> for main headings, <h2> for subheadings and so on, to reflect the structure of the content.
• Describe the content: use the right tags for each type of content. For example, <p> for paragraphs, <ul> and <ol> for unordered and ordered lists, <figure> and <figcaption> for images with captions, and so on.
• Semantic attributes: use attributes such as alt on images to provide alternative text and title to give extra information on links, to improve accessibility and user experience.
• Avoid overusing generic tags: don’t overuse generic tags like <div> and <span> when more specific semantic tags are appropriate and available.

Semantic HTML example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <header>
        <h1>Main Heading</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h2>Home</h2>
            <p>Home section content...</p>
        </section>

        <section id="about">
            <h2>About</h2>
            <p>About section content...</p>
        </section>

        <section id="contact">
            <h2>Contact</h2>
            <p>Contact section content...</p>
        </section>
    </main>

    <footer>
        <p>Page footer</p>
    </footer>
</body>
</html>

In this example:

• We used semantic tags such as <header>, <nav>, <main>, <section> and <footer> to give the page a more meaningful structure.
  • The <main> tag explicitly defines the main content
• The <h1> and <h2> tags are used for the main heading and the subheadings respectively.
• The <nav> tag contains a list of navigation links.
• Each section (Home, About, Contact) is wrapped in a <section> tag and has a suitable heading.
• The body content of the page is inside the <main> tag.
• id attributes were added for in-page navigation.
• The <footer> tag contains the footer content.

As we said, semantic HTML brings real SEO advantages, but its benefits don’t stop there: it is a powerful lever for accessibility, greatly improving the experience for people with disabilities too, because screen readers can interpret the sections of the page much more easily.

By combining semantic HTML, alt text on images, ARIA (Accessible Rich Internet Applications) roles and better keyboard accessibility, we can build a simpler and, above all, more inclusive web.

To complete the optimisation of your code, alongside semantic HTML elements and the better crawlability they bring, it’s essential to add structured data. Structured data gives search engines detailed information so they can classify your online project more accurately.