Common HTML tag mistakes include invalid nesting, unclear page landmarks, headings chosen only for their size and missing required end tags. Browsers often repair malformed HTML, but the resulting DOM may not match what you intended. Inspect the rendered structure as well as the source.
This guide separates real HTML errors from semantic improvements. A valid page is not guaranteed to rank, and a validation warning is not automatically an SEO penalty. Prioritize defects that affect content, links, accessibility or usability.
Mistake #1: Using 'Div' tags for everything
A <div> is a valid generic container. Using one is not automatically an HTML error or an SEO problem. Prefer <nav> for major navigation, <article> for self-contained content and a headed <section> for a thematic grouping when those meanings fit.
Do not replace every div with a section. Use semantics intentionally; keep a div when you only need a styling wrapper.
Valid but generic structure:
<div>
<div>
<h1>Article Title</h1>
<p>Article content goes here.</p>
</div>
<div>
<h2>Related Articles</h2>
<ul>
<li><a href="#">Related Article 1</a></li>
<li><a href="#">Related Article 2</a></li>
<li><a href="#">Related Article 3</a></li>
</ul>
</div>
</div>
A more descriptive structure for a self-contained article and related links:
<article>
<h1>Article title</h1>
<p>Article content goes here.</p>
</article>
<nav aria-label="Related articles">
<ul>
<li><a href="/guide/">Related guide</a></li>
</ul>
</nav>
The benefit is clearer meaning for readers and assistive technology, not a guaranteed ranking boost from changing a tag name.
Mistake #2: Using 'Main' tags incorrectly
Use <main> for the page’s dominant content. A document must not have more than one main element without the hidden attribute. Site-wide navigation and footer material normally belong outside it. Sections and articles can both be valid children of main; neither is automatically the correct choice.
Incorrect: two simultaneously visible main landmarks.
<main>
<h1>Page title</h1>
<p>Primary content.</p>
</main>
<main>
<p>More visible primary content.</p>
</main>
Correct use of <main> tag
<main>
<h1>Page title</h1>
<section>
<h2>Topic one</h2>
<p>Primary content.</p>
</section>
<section>
<h2>Topic two</h2>
<p>Related primary content.</p>
</section>
</main>
The correction is one visible main landmark—not a rule that article elements must replace section elements. MDN explains the main element and its accessibility role.
Mistake #3: Using 'H1' tags for design purposes
Another common mistake that developers make is to use <h1> tags for design purposes, rather than for their intended purpose of defining the main heading of a page. While it may be tempting to use larger headings for design purposes, doing so can cause confusion and make it difficult for users to understand the hierarchy of the content on a page.
For example, instead of using larger headings for design purposes, developers should use CSS to style the headings appropriately. Here’s an example of how using <h1> tags for design purposes can make the structure of a page unclear.
Mistaken use of <h1> tag
<h1>Guide to semantic HTML</h1>
<h1>Subscribe to the newsletter</h1>
<p>The second heading was chosen only for its large size.</p>
For this guide, use one clear page-level H1, then H2 headings for major sections. A newsletter label should not become another main heading just to inherit its font size. Style it with a CSS class instead. Styling a genuine H1 is fine: CSS itself is not the mistake.
Mistake #4: Using br tags for spacing
In some cases developers make is to use <br> tags for spacing between elements on a page, rather than using CSS to control the spacing. While <br> tags can provide some spacing between elements, they don’t provide semantic meaning to the information being presented and can make it difficult for users who rely on screen readers to understand the structure of the page.
For example, instead of using <br> tags for spacing, developers should use CSS to control the spacing between elements. Here’s an example of how using <br> tags for spacing can make the structure of a page unclear:
Mistaken use of <br> tag
<h1>Page Title</h1>
<p>Paragraph 1 content goes here.</p>
<br>
<p>Paragraph 2 content goes here.</p>
In this example, the use of <br> tags for spacing doesn’t provide any semantic meaning to the information being presented, and it can make it difficult for users who rely on screen readers to understand the structure of the page.
Instead of using <br> tags for spacing, developers should use CSS to control the spacing between elements. There are several CSS properties that can be used to control spacing, including margin, padding, and line-height.
For example, to add spacing between paragraphs, developers can use the margin-bottom property on the paragraph elements:
<style>
p {
margin-bottom: 1em; /* Add 1em of spacing after each paragraph */
}
</style>
<h1>Page Title</h1>
<p>Paragraph 1 content goes here.</p>
<p>Paragraph 2 content goes here.</p>
In this case, the margin-bottom property adds 1em of spacing after each paragraph, providing visual separation between the paragraphs without the need for <br> tags.
By using CSS to control spacing between elements, we can create well-structured and easy-to-navigate websites that provide a good user experience.
Read the article about: How HTML tag ordering creates a structured webite?
Mistake #5: Not properly closing tags
Not every HTML element needs an end tag. Void elements such as <img>, <input> and <br> must not have one. Some other end tags can be omitted under specific HTML rules. For example, a missing paragraph end tag is not always invalid.
For elements that require closing tags, close them in the correct order. Explicit closing tags are also a useful beginner-friendly convention where allowed. See MDN’s explanation of void elements.
Incorrect nesting:
<strong><em>Important text</strong></em>
Correct nesting: <strong><em>Important text</em></strong>. The last element opened is the first one closed. Browser error recovery may hide mistakes visually, so validate the source and inspect the DOM.
How to find and fix HTML tag errors
- Run the page through the Nu HTML Checker. Start with the first structural error; later messages may be consequences.
- Inspect the Elements panel in your browser. Compare nesting, links and landmarks with the source HTML.
- Check keyboard navigation and the accessibility tree. Confirm meaningful headings and one visible main landmark.
- Fix one template-level issue at a time, retest on mobile and verify that content and links remain visible.
Do HTML errors affect SEO?
They can when they change what a search engine or user can access—for example, broken links or content placed in an unintended part of the document. Not every validator message affects rankings. Fix the actual rendering or accessibility defect rather than chasing a perfect score as a ranking promise.
Continue with HTML tag ordering and document structure.