Google doesn't hate your HTML - but search engines, browsers, and users can struggle when your markup hides the meaning of your page.

Your page can look completely fine in the browser and still contain HTML that is difficult to understand, navigate, or maintain. Here are three common markup mistakes you can spot immediately in DevTools — and the simple fixes.

1. Putting a <div> Inside a <button>

A button is already a meaningful interactive element. You don't need to wrap its text in a generic <div>.

❌ Don't do this

<button>
  <div>Click</div>
</button>

The problem is not that a browser necessarily refuses to render it. The bigger issue is that unnecessary structural elements can make your markup harder to reason about and can complicate styling and accessibility.

✅ Keep it simple

<button type="button">
  Click
</button>

If you need an icon or additional content inside the button, use appropriate inline elements instead of adding unnecessary block structure.

<button type="button">
  <span class="icon" aria-hidden="true">✓</span>
  <span>Continue</span>
</button>

The rule is simple: use the button for the button and keep its contents as simple as the interface requires.

2. Jumping From <h1> to <h3>

Headings are not just different font sizes. They describe the hierarchy of your content.

❌ Poor structure

<h1>Online Store</h1>
<h3>Featured Products</h3>
<h2>New Arrivals</h2>

This makes the document hierarchy harder to understand. A reader navigating through headings with a screen reader may encounter a structure that does not match the way the content is organized.

✅ Build a logical hierarchy

<h1>Online Store</h1>
<h2>Featured Products</h2>
<h2>New Arrivals</h2>
<h3>Men's Collection</h3>
<h3>Women's Collection</h3>

Think of headings like the table of contents of your page:

• <h1> — the main topic of the page
• <h2> — major sections
• <h3> — subsections within an <h2>
• <h4> — subsections within an <h3>

Don't choose a heading because it looks the right size. Use the appropriate heading level for the structure, then use CSS to control its appearance.

3. Empty alt on a Meaningful Image

This is one of the easiest accessibility mistakes to miss.

❌ Don't do this for a product image

<img src="product.jpg" alt="">

An empty alt attribute tells assistive technologies that the image is decorative and can be ignored.

That's appropriate when the image genuinely adds no information. It is not appropriate when the image represents the product being discussed or purchased.

✅ Describe the meaningful image

<img
 src="product.jpg"
 alt="Black leather laptop backpack"
>

The alternative text should communicate the useful information the image provides. It does not need to start with "Image of" or "Picture of".

When is alt="" correct?

Empty alternative text is correct for genuinely decorative images. For example:

<img
 src="decorative-line.svg"
 alt=""
>

The important distinction is:

• Meaningful image: describe its relevant content.
• Decorative image: use alt="".

4. Hiding Important Content Behind JavaScript

Here is a problem that can have a much more direct SEO impact than imperfect heading order: putting important page content behind JavaScript when the content is not reliably available in the rendered page.

For example, imagine a product page where the main description exists only after JavaScript fetches and inserts it:

❌ Risky pattern

main>
 <h1>Wireless Headphones</h1>
 <div id="product-description"></div>
</main>

<script>
 fetch('/api/product/123')
  .then(response => response.json())
  .then(product => {
   document.querySelector('#product-description')
    .textContent = product.description;
  });
</script>

Modern search engines can render JavaScript, so JavaScript itself is not automatically an SEO problem. The problem is making important content dependent on a rendering process that can fail, be delayed, or produce different content from the initial HTML.

✅ Put important content in the page markup

<main>
  <article>
    <h1>Wireless Headphones</h1>
    <p>
        Noise-cancelling wireless headphones with up to 30 hours
        of battery life.
    </p>
  </article>
</main>

JavaScript can still enhance the page. For example, it can load reviews, update a cart, or provide interactive filtering. But the core content users need — and want search engines to understand — should not unnecessarily depend on JavaScript.

A better rule

Don't make search-critical content exist only because JavaScript eventually puts it into the DOM.

If you use a JavaScript framework, check the final rendered page rather than assuming that the source code tells the whole story.

Check These Problems in DevTools

You don't need an expensive SEO tool to catch these mistakes. Start by inspecting the rendered HTML in your browser's DevTools.

Check the element itself

Right-click an element and choose Inspect. Look for:

• Unnecessary nested elements
• Incorrect heading levels
• Images with missing or inappropriate alternative text
• Interactive elements that are not using native HTML controls

Check the accessibility tree

Modern browser DevTools can also expose the accessibility information generated from your HTML. This can reveal problems that are not obvious from the visual page.

If an image has important information but its accessible name is empty, that's a useful warning sign. Likewise, a control should expose an understandable role and accessible name.

What About the Lighthouse Score?

Lighthouse can help identify accessibility and SEO issues, but don't treat its score as a direct measurement of your Google ranking.

For example, an inaccessible image may trigger an accessibility audit, while other markup or page-quality problems may affect separate Lighthouse audits.

The useful workflow is:

1. Inspect the HTML in DevTools.
2. Run a Lighthouse audit.
3. Identify the actual issue reported.
4. Fix the underlying HTML rather than chasing the score.
5. Run the audit again and verify the improvement.

A higher Lighthouse score is useful, but the goal is not to make the number turn green. The goal is to build a page that is technically sound, accessible, and understandable.

The Bigger Lesson

None of these mistakes necessarily makes a page disappear from Google. The real problem is relying on HTML that communicates less meaning than it should.

Search engines and assistive technologies work with the structure and semantics exposed by your page. Clean, meaningful HTML gives them a better foundation to understand your content.

That's why semantic HTML is not just about passing an SEO audit. It's about writing markup that accurately describes what your page actually contains.

Quick HTML Audit Checklist

• Buttons: use <button> for actions and avoid unnecessary wrappers.
• Headings: make the heading hierarchy match the structure of the content.
• Images: provide useful alt text for meaningful images and use alt="" for decorative images.
• Accessibility: test keyboard navigation and inspect the accessibility tree, not just the visual appearance.
• Lighthouse: use its reports to find problems, not as a substitute for understanding your HTML.

Final Takeaway

Your browser may happily render bad HTML. That doesn't mean the markup is good.

Before adding another JavaScript library or SEO plugin, open DevTools and inspect the HTML you're actually shipping.

Write HTML for meaning, not just for appearance. Clean semantics help users, assistive technologies, developers, and search engines understand your page.