Search Engine Land
  • SEO
    • > All SEO
    • > What Is SEO?
    • > SEO Periodic Table
    • > Google: SEO
    • > Bing SEO
    • > Google Algorithm Updates
  • PPC
    • > All PPC
    • > What is PPC?
    • > Google Ads
    • > Microsoft Ads
    • > The Periodic Tables of PPC
  • Focuses
    • > Local
    • > Commerce
    • > Shopify SEO Guide
    • > Content
    • > Email Marketing Periodic Table
    • > Social Media Marketing
    • > Analytics
    • > Search Engine Land Awards
    • > All Focuses
  • SMX
  • Webinars
  • Intelligence Reports
  • White Papers
  • About
    • > About Search Engine Land
    • > Newsletter
    • > Third Door Media
    • > Advertise

Processing...Please wait.

Search Engine Land » Channel » SEO » The SEO Advantages of Machine-Readable HTML5 Semantic Markup

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,
is its […]

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

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,

is its own element now, as is
, and so on. You have the ability to describe your page outline using these terms. By the way, it’s important not confuse
with heading containers (

). 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

. 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

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
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

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

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

Let a single

wrap a page’s unique content:


  Skip Navigation
  
...

SEO for Developers by Detlef Johnson

Semantic HTML5

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

or a , renaming for successfully implementing
,
,
,
,
,
,
, 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

and 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

heading. What makes them special is the meaning they convey about document and section outlines. Start your document outline with elements
,
, and perhaps one or two
containers (one per link grouping). Then you’ll likely want to use
to wrap unique content with
, headings, and perhaps its own
.

  

SEO for Developers by Detlef Johnson

Semantic HTML5

We're doing HTML5 semantic elements ...

Articles and Sections

Article and Section elements should have at least one heading ...

Headings

Headings provide 6 levels for organizing content ...

Each

ought to have at least one heading; probably more. Your headings will outline what makes the best sense in descending order of levels from

through to content with heading
. 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

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
or
, or you may show different

content between desktop and mobile.

Use Headings

Each

should definitely have a heading, perhaps beginning with level two (

), 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
headings. Each section can have its own
and
, 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

, it’s been suggested that these containers are suitable for related content that is not part of the unique content identified by
, like an advertising block. These can still be unique to the page, of course. The
will nest nicely in
or
and can stand on its own, as well. The
container can also have headings
, and
— 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

element for the page footer with its site-wide links in one or more
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:


Takeaway: Be Descriptive

The most important thing to look for when you’re otherwise using a semantically sensible

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.


New on Search Engine Land

    Google search results spam for ‘Bill Slawski obituary’ shows the dark side of SEO

    New mobile Google ad experiment puts favicon in-line with display URL

    Google launches video health tools to help publisher monetization

    SEO pioneer and expert Bill Slawski passes away

    New Yelp feature: Request a Call

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 25 years ago. Since then he has worked for major search engine technology providers such as PositionTech, managed programming and marketing teams for Chicago Tribune, and advised numerous entities including several Fortune companies. Detlef lends a strong understanding of Technical SEO and a passion for Web development to company reports and special freelance services.

Related Topics

SEO

Get the daily newsletter search marketers rely on.

Processing...Please wait.

See terms.

ATTEND OUR EVENTS

Learn actionable search marketing tactics that can help you drive more traffic, leads, and revenue.

March 8-9, 2022: Master Classes (virtual)

June 14-15, 2022: SMX Advanced (virtual)

November 15-16, 2022: SMX Next (virtual)

Learn More About Our SMX Events

Discover time-saving technologies and actionable tactics that can help you overcome crucial marketing challenges.

Start Discovering Now: Spring (virtual)

September 28-29, 2022: Fall (virtual)

Learn More About Our MarTech Events

Webinars

Take a Crawl, Walk, Run Approach to Multi-Channel ABM

Content Comes First: Transform Your Operations With DAM

Dominate Your Competition with Google Auction Insights and Search Intelligence

See More Webinars

Intelligence Reports

Enterprise SEO Platforms: A Marketer’s Guide

Enterprise Identity Resolution Platforms

Email Marketing Platforms: A Marketer’s Guide

Enterprise Sales Enablement Platforms: A Marketer’s Guide

Enterprise Digital Experience Platforms: A Marketer’s Guide

Enterprise Call Analytics Platforms: A Marketer’s Guide

See More Intelligence Reports

White Papers

Reputation Management For Healthcare Organizations

Unlock the App Marketing Potential of QR Codes

Realising the power of virtual events for demand generation

The Progressive Marketer’s Ultimate Events Strategy 2022 Worksheet

CMO Guide: How to Plan Smart and Pivot Fast

See More Whitepapers

Receive daily search news and analysis.

Processing...Please wait.

Topics

  • SEO
  • PPC

Our Events

  • Search Marketing Expo - SMX
  • MarTech

About

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

Follow Us

  • Facebook
  • Twitter
  • LinkedIn
  • Newsletters
  • RSS
  • Youtube

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