Is SEO Semantic Markup Dead? Why HTML Structure Still Matters

A few years back, I covered a tweet from John Mueller which categorically stated that adding multiple <h1> tags on a page will not affect SEO rankings. While the tweet didn’t explain why Google adopted such a stance, we now have more clarity on the reasons behind John’s statements.

In a recent Search Off the Record podcast hosted by Google’s Martin Splitt and Gary Illyes, the duo confirmed that while Google heavily relies on visual rendering cues to understand a page, it doesn’t mean SEO semantic markup is useless.

Why Google Uses Visual Rendering Alongside Semantic Markup

For years, SEOs have been asking writers and web developers to ensure their websites follow proper SEO semantic markups so that Google understands the content perfectly. While that is still the best practice, Google has adapted to the reality of the web: visual rendering algorithms allow them to understand and rank websites that fail to comply with standard SEO semantic markups.

According to Martin and Gary, a number of really good websites that produce useful content have invalid HTML tags and are riddled with heavy JavaScript and nested <div> tags. If Google decided to ignore these sites, their users would miss out on quality content.

What this means is that Google’s rendering engine can understand that text in a bold, oversized font acts as an H1, even if the developer failed to add an explicit <h1> tag. Similarly, it can distinguish between main content and supplementary content on pages without an <article> tag, as the visual cues of the rendered page give Google’s algorithm the necessary signals.

If Google Can Figure It Out, Should SEOs Ignore Semantic Markups?

Absolutely not. While perfect semantic markup might not artificially inflate a page’s ranking from position 3 to 1, it still provides vital, indirect ranking signals and operational benefits:

1. Featured Snippets and AI Overviews: When you use proper semantic lists (<ul>, <ol>, <li>) and tables (<table>), it makes it drastically easier for Google’s parsers to extract that data. This is how you win AI Overviews and Featured Snippets (Position Zero) at the top of search results. If your list is just a bunch of paragraphs with dash symbols, Google might struggle to extract it.
2. Accessibility and User Experience: Screen readers for visually impaired users rely entirely on semantic HTML to navigate a page. If your site is accessible, users stay longer, consume more content, and don’t bounce back to the search results. Google monitors user satisfaction signals (like high bounce rates or “pogo-sticking”).
3. Crawl Efficiency: Clean, semantic HTML is usually leaner than heavily nested <div> tags. A smaller DOM size means browsers can render the page faster, improving your Core Web Vitals (which is a direct ranking factor).

How This Applies to Your Code

Fixing the elements below won’t directly force Google to rank you higher, but they will drastically improve your site’s accessibility, user experience, and chances of winning rich snippets!

The “Fake Button” (<a> vs. <button>)

The Common Mistake: Using an anchor link with a hashtag to trigger an action, like opening a modal, expanding a dropdown, or submitting a form.
HTML
<a href=”#” onclick=”openModal()” class=”btn-orange”>Get Proposal</a>

• The Semantic Fix: Use a <button> element when an action happens on the same page, and an <a> element when navigating to a new URL.

HTML
<button onclick=”openModal()” class=”btn-orange”>Get Proposal</button>

• The UX/Accessibility Impact: Screen readers announce <a> as “Link” and <button> as “Button.” If a blind user hears “Link,” they expect to be taken to a new page. If nothing seemingly happens (because a modal just silently popped up visually), they will think the site is broken.

The “Div Soup” List

• The Common Mistake: Creating lists using standard <div> or <p> tags and manually typing out dashes or bullet characters because it’s easier to style with CSS grid/flexbox.
  HTML
  <div class=”list-item”>• 100% Manual Outreach</div>

<div class=”list-item”>• Real Websites Only</div>

• The Semantic Fix: Always use unordered <ul> or ordered <ol> lists.
  HTML
  <ul>

  <li>100% Manual Outreach</li>

  <li>Real Websites Only</li>

</ul>

• The UX/Accessibility Impact: A screen reader will announce <ul aria-label=”features”> as “List, 2 items,” allowing the user to understand the grouping and easily skip past it if they want. Furthermore, Google relies heavily on <ul> and <ol> tags to generate Featured Snippets.

Skipping Heading Levels for Design

• The Common Mistake: Jumping from an <h1> directly to an <h4> because the <h2> CSS styling is “too big” for that specific section of the page.
• The Semantic Fix: Always keep headings strictly sequential (H1 -> H2 -> H3). If an <h2> needs to look smaller, change its visual size with CSS classes, not by changing the HTML tag.
  HTML
  <h2 class=”text-sm font-bold”>Why Choose Us</h2>
• The UX/Accessibility Impact: Visually impaired users use keyboard shortcuts to jump from heading to heading to skim a document (just like sighted users scroll and look at big text). Skipped heading levels break the document outline and confuse screen readers.

Using <blockquote> Just to Indent Text

• The Common Mistake: Wrapping a standard paragraph in a <blockquote> tag simply because the website’s CSS theme adds a nice left margin, grey background, and italicized font to blockquotes.
• The Semantic Fix: Apply a CSS class to a <div> or <p> tag to achieve the indented visual style. Reserve <blockquote> exclusively for citing external sources or actual quotes.
• The UX/Accessibility Impact: Screen readers will explicitly announce: “Blockquote… [text]… End of Blockquote.” If the text isn’t actually a quote, it creates a very confusing auditory experience for the user.

Emphasis vs. Visual Bold (<strong> vs <b>)

• The Common Mistake: Using <strong> everywhere just to make text bold, or conversely, using <b> when something is actually a critical warning.
• The Semantic Fix: Use <b> (or CSS font-weight: bold;) to draw the eye to a word visually (like highlighting a product name). Use <strong> when the text actually has strong importance, seriousness, or urgency (like “Warning:” or “Do not click”).
• The UX/Accessibility Impact: Modern screen readers actually change the inflection and tone of their robotic voice when they encounter a <strong> tag, emphasizing the word audibly. If you use it on every other word just for styling, the screen reader sounds erratic.

The Layout Spacing Hack (Multiple <br> tags)

• The Common Mistake: Hitting the “Enter” key multiple times in an editor to create white space between a paragraph and an image, resulting in empty break tags in the code.
  HTML
  <p>End of paragraph.</p>

<br><br><br>

<img src=”chart.jpg” alt=”SEO Chart”>

• The Semantic Fix: Use CSS margins or padding (margin-bottom: 40px;) on the paragraph or the image.
• The UX/Accessibility Impact: Screen readers don’t ignore these. They will literally read “Blank… Blank… Blank…” aloud to the user before moving to the image. Using CSS keeps the code clean and the auditory experience smooth.

Dileep Thekkethil

Author

Dileep Thekkethil is the Director of Marketing at Stan Ventures and an SEMRush certified SEO expert. With over a decade of experience in digital marketing, Dileep has played a pivotal role in helping global brands and agencies enhance their online visibility. His work has been featured in leading industry platforms such as MarketingProfs, Search Engine Roundtable, and CMSWire, and his expert insights have been cited in Google Videos. Known for turning complex SEO strategies into actionable solutions, Dileep continues to be a trusted authority in the SEO community, sharing knowledge that drives meaningful results.