• Search Engine Land
  • Sections
    • SEO
    • SEM
    • Local
    • Retail
    • Google
    • Bing
    • Social
    • Resources
    • More
    • Home
  • Follow Us
    • Follow
  • Search Engine Land
  • SEO
  • SEM
  • Local
  • Retail
  • Google
  • Bing
  • Social
  • Resources
  • Live
  • More
  • Events
    • Follow
  • SUBSCRIBE

Search Engine Land

Search Engine Land
  • SEO
  • SEM
  • Local
  • Retail
  • Google
  • Bing
  • Social
  • Resources
  • More
  • Newsletters
  • Home
SEO

The SEO Advantages of Machine-Readable HTML5 Semantic Markup

Semantic HTML5 provides us with an opportunity to improve our websites and optimize for search engines. We can take full advantage of these opportunities by using machine-readable semantic HTML5 elements to describe page outlines. Specially-named containers can help search engines and browsers more easily identify how our pages are arranged. For example, <header> is its […]

Detlef Johnson on April 26, 2019 at 4:13 pm
  • More

Semantic HTML5 provides us with an opportunity to improve our websites and optimize for search engines. We can take full advantage of these opportunities by using machine-readable semantic HTML5 elements to describe page outlines. Specially-named containers can help search engines and browsers more easily identify how our pages are arranged.

For example, <header> is its own element now, as is <nav>, and so on. You have the ability to describe your page outline using these terms. By the way, it’s important not confuse <header> with heading containers (<h1>). These also have semantic rules we should follow; specifically about their relative level, as you’ll see below.

Here’s a look at the SEO opportunities with HTML5 elements and how and why to use them.

Genuine Articles

Perhaps the most important semantic HTML5 element is <article>. This can be used in such a way that your ideal content gets parsed into screen readers and reader views, and search engines will find a hard-coded signal for unique content on the page. You can test to see how this works with a page loaded in your browser by toggling the reader view.

If you don’t see your toggle switch or there is no <article> container in page code, you don’t get the option at all or it won’t load anything separately. If you get content in the reader view, it will be that content which the webmaster wrapped in a single <article> container. As developers we get to style these containers with direct specificity.

Multiple Articles

Although it’s not syntactically incorrect to have more than one <article> element per page, it’s still not a good idea. You don’t get reader view options this way, and there are no search engine benefits either. For blog homepages that list posts, you may think of each blog post as an “article,” except that an excerpt of an article is not the real thing.

Instead, try using the semantically correct <section> element for each post summary where related details are gathered. <section> can correctly nest as a child of <article> in this case. The parent-child relationship between <article> and <section> can be reversed, but we wouldn’t recommend it unless circumstances make that logical.

Let a single <article> wrap a page’s unique content:

<body itemscope itemtype="https://schema.org/WebSite">
  <a class="visually-hidden focusable" href="#main">Skip Navigation</a>
  <header id="top" class="margin-bottom-small">
    <nav class="container container-small">
      <div class="row">
        <div class="grid-full">
            ...
        </div>
      </div>
    </nav>
  </header>

  <main id="main" tabindex="-1" class="content">
    <article class="container container-small">
      <header>
        <h1>SEO for Developers by Detlef Johnson</h1>
      </header>
      <section class="row">
        <div class="grid-half">
          <h2>Semantic HTML5</h2>
          <p>We're doing HTML5 semantic elements ...

Technical Debt

Technical debt is aging code in the codebase that looks to be no fun to replace or refactor away. The most common technical debt takes the form of un-insightful variable names and database column names.

SEO practitioners often dispense advice reactive to their own painful embedded technical debt. Implementing semantic HTML5 may be a bit like that.

If you’re using a modern framework with a templating language like JSX, and everything is a <div> or a <span>, renaming for successfully implementing <main>, <article>, <header>, <nav>, <footer>, <aside>, <section>, can seem daunting, depending how early in the process you are. The longer you wait the more that technical debt compounds.

Semantic Details

Many of us prefer skipping what we initially think are smaller details for a process of writing code that is going to work, especially when under deadlines. We use what operations we have in place to publish websites and apps with minimal effort in order to be productive. We use frameworks, task runners, and tooling to great effectiveness. We’re constantly eyeing shiny new things to learn.

We also know that unaddressed details can immensely compound technical debt down the road. In the long run, you don’t want all your elements named after the same <div> and <span> elements. Your code will become less and less recognizable over time. Organize your code into logical elements. Use the elements HTML5 provides out of the box.

Semantic SEO Outline

In SEO we’ve long known about headings, particularly the top-level <h1> heading. What makes them special is the meaning they convey about document and section outlines. Start your document outline with elements <main>, <header>, and perhaps one or two <nav> containers (one per link grouping). Then you’ll likely want to use <article> to wrap unique content with <header>, headings, and perhaps its own <footer>.

  <article class="container container-small">
    <header>
      <h1>SEO for Developers by Detlef Johnson</h1>
    </header>
    <section class="row">
      <div class="grid-half">
        <h2>Semantic HTML5</h2>
        <p>We're doing HTML5 semantic elements ...
        <h3>Articles and Sections</h3>
        <p>Article and Section elements should have at least one heading ...
        <h3>Headings</h3>
        <p>Headings provide 6 levels for organizing content ...

Each <section> ought to have at least one heading; probably more. Your headings will outline what makes the best sense in descending order of levels from <h1> through to content with heading <h6>. Think of them as you would bullets and outline levels. It’s rare that you’ll actually use all 6 levels, but they’ll be at your disposal when you want them.

SEO the Semantics

You’ll hear advice from the SEO community that there should always only be one <h1> element per page, all on its own. That’s solid advice. Think of it as the whole page heading. However, it’s definitely not wrong to have more than one — it depends on your document outline. You may elect to bump up the top heading in a <section> or <aside>, or you may show different <h1> content between desktop and mobile.

Use Headings

Each <section> should definitely have a heading, perhaps beginning with level two (<h2>), and descending from there, depending on the content for that section. Use your best judgement and get hints from the W3C validation service. This can warn you when you’re missing <section> headings. Each section can have its own <header> and <footer>, which makes sense when you think about it.

Webmaster Tip: Encode an admin-only set of quick links in a site-wide header or footer, and insert the canonical page spelling for the name value pair so you can click and check page validation more quickly than with other tools like bookmarks.

Taking Aside

As for <aside>, it’s been suggested that these containers are suitable for related content that is not part of the unique content identified by <article>, like an advertising block. These can still be unique to the page, of course. The <aside> will nest nicely in <article> or <section> and can stand on its own, as well. The <aside> container can also have headings <header>, and <footer> — it’s totally up to you.

Footer Wrapper

That should be enough information to get you started. When you’re ready to wrap up your HTML5 semantic markup, you can use the <footer> element for the page footer with its site-wide links in one or more <nav> elements. Most of these Semantic HTML5 elements are treated as block elements by default unless otherwise noted.

Support even the oldest browsers with the following sample polyfill:

<!--[if lt IE 9]>
  <script>
    document.createElement("article");
    document.createElement("aside");
    document.createElement("footer");
    document.createElement("header");
    document.createElement("nav");
    document.createElement("section");
  </script>
<![endif]-->

Takeaway: Be Descriptive

The most important thing to look for when you’re otherwise using a semantically sensible <div> to wrap a chunk of content as a grouping for one of the above, is to ask yourself the question: Can I use a more descriptive element? Will it work with my application code? Can I, for example, style it using row class names or other grid logic? Your answer should be yes until you’ve taken full advantage of HTML5 semantic markup.



About The Author

Detlef Johnson
Detlef Johnson is the SEO for Developers Expert for Search Engine Land and SMX. He is also a member of the programming team for SMX events and writes the SEO for Developers series on Search Engine Land. Detlef is one of the original group of pioneering webmasters who established the professional SEO field more than 20 years ago. Since then he has worked for major search engine technology providers, managed programming and marketing teams for Chicago Tribune, and consulted for numerous entities including Fortune 500 companies. Detlef now works as a ninja for Internet Marketing Ninjas lending a strong understanding of Technical SEO and a passion for Web programming to company reports and special services.

Related Topics

Channel: SEOSEO for Developers

We're listening.

Have something to say about this article? Share it with us on Facebook, Twitter or our LinkedIn Group.

Get the daily newsletter search marketers rely on.
See terms.

ATTEND OUR EVENTS

Lorem ipsum doler this is promo text about SMX events.

February 23, 2021: SMX Report

April 13, 2021: SMX Create

May 18-19, 2021: SMX London

June 8-9, 2021: SMX Paris

June 15-16, 2021: SMX Advanced

August 17, 2021: SMX Convert

November 9-10, 2021: SMX Next

October 2021: SMX Advanced Europe

December 17, 2021: SMX Code

Available On-Demand: SMX

×


Learn More About Our SMX Events

Discover actionable tactics that can help you overcome crucial marketing challenges. Our next conference will be held:

MarTech 2021: March 16-17

MarTech 2021: Sept. 14-15

MarTech 2020: Watch On-Demand

×

Attend MarTech - Click Here


Learn More About Our MarTech Events

White Papers

  • 6 Powerful Ways Experience Analytics Can Help Your Business Now
  • Email Tune-Up: A 5-Point Inspection to Get Your Program in Gear
  • Digital Marketing Report Q4 2020: Benchmarks and Insights for 2021
  • Data SEO – The Next Big Adventure
  • Getting Started with Email Marketing Automation
See More Whitepapers

Webinars

  • How to Avoid the Digital Transformation Trap
  • How to Build a Marketing System of Record
  • Meet BIMI: The brand-boosting email security marketers must have for 2021
See More Webinars

Research Reports

  • Local Marketing Solutions for Multi-Location Businesses
  • Enterprise Digital Asset Management Platforms
  • Identity Resolution Platforms
  • Customer Data Platforms
  • B2B Marketing Automation Platforms
  • Call Analytics Platforms
See More Research

h
Receive daily search news and analysis.
Search Engine Land
Download the Search Engine Land App on iTunes Download the Search Engine Land App on Google Play

Channels

  • SEO
  • SEM
  • Local
  • Retail
  • Google
  • Bing
  • Social

Our Events

  • SMX
  • MarTech

Resources

  • White Papers
  • Research
  • Webinars
  • Search Marketing Expo
  • MarTech Conference

About

  • About Us
  • Contact
  • Privacy
  • Marketing Opportunities
  • Staff
  • Connect With Us

Follow Us

  • Facebook
  • Twitter
  • LinkedIn
  • Newsletters
  • Instagram
  • RSS
  • Youtube
  • iOS App
  • Google Play

© 2021 Third Door Media, Inc. All rights reserved.

Your privacy means the world to us. We share your personal information only when you give us explicit permission to do so, and confirm we have your permission each time. Learn more by viewing our privacy policy.Ok