Mistakes in structuring content with HTML tags

Last updated on 31.3.2024

Improperly nested HTML tags or tags that are opened and closed at the wrong places can lead to malformed HTML markup and incorrectly displayed web content. Tags that are in the wrong order can disrupt the semantic structure and styling of elements on a web page.

Care must be taken to ensure HTML tags are properly nested, closed, and arranged logically according to the intended content and layout. Errors in HTML tag structure will result in invalid and unusable code.

html tags mistake

Mistake #1: Using 'Div' tags for everything

One of the most common mistakes that developers make is to use <div> tags for everything, even when there are more appropriate HTML tags available. While <div> tags are useful for grouping related content together, they don’t provide any semantic meaning to the information being presented. This can make it difficult for users to understand the structure of a page and navigate it effectively.

For example, instead of using <div> tags to group related content together, developers should use more specific tags like <section>, <article>, or <nav>, depending on the type of content being presented. Here’s an example of how using <section> tags instead of <div> tags can make the structure of a page more clear

Mistaken use of <div> tags

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

Correct use of <section> and <article> tags

				
					<section>
  <article>
    <h1>Article Title</h1>
    <p>Article content goes here.</p>
  </article>
  <section>
    <h2>Related Articles</h2>
    <article><a href="#">Related Article 1</a></article>
    <article><a href="#">Related Article 2</a></article>
    <article><a href="#">Related Article 3</a></article>
  </section>
</section>
				
			

In this example, the use of <section> and <article> tags provides semantic meaning to the information being presented, making it easier for users to understand the structure of the page.

Mistake #2: Using 'Main' tags incorrectly

Common mistake that developers make is to use <main> tags incorrectly. According to the HTML specification, the <main> tag should only be used once per page, and it should contain the primary content of the page. However, some developers use <main> tags to group related content together or to wrap entire sections of a page, which can lead to confusion about the purpose of the tag.

Here is an example of how using <main> tags incorrectly can make the structure of a page unclear.

Mistaken use of <main> tag

				
					<main>
  <h1>Page Title</h1>
  <section>
    <h2>Section 1</h2>
    <p>Section 1 content goes here.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <p>Section 2 content goes here.</p>
  </section>
</main>
				
			

Correct use of <main> tag

				
					<main>
  <h1>Page Title</h1>
  <article>
    <h2>Section 1</h2>
    <p>Section 1 content goes here.</p>
  </article>
  <article>
    <h2>Section 2</h2>
    <p>Section 2 content goes here.</p>
  </article>
</main>
				
			

In this example, the use of <article> tags instead of <section> tags provides semantic meaning to the information being presented, and the <main> tag is used appropriately to contain the primary content of the page.

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 style="font-size: 36px;">Welcome to My Website</h1>
<section>
  <h2>About Me</h2>
  <p>About me content goes here.</p>
</section>
<section>
  <h2>My Services</h2>
  <p>My services content goes here.</p>
</section>
				
			

In this example, the use of <h1> tags for design purposes can make it difficult for users to understand the hierarchy of the content on the page. Instead, developers should use CSS to style the headings appropriately and use <h1> tags only for the main heading of the page.

Mistake #4: Using 'br' hags 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

Another using HTML tags incorrectly is not properly closing tags. Every HTML tag that is opened needs to be closed to avoid formatting errors and ensure that the page displays correctly.

For example, if you have a paragraph tag <p> in your HTML code, you need to close it with a closing tag </p> to indicate where the paragraph ends. If you forget to close the tag, or if you close it incorrectly, the browser may interpret the HTML code in unexpected ways and cause formatting issues on the page.

Here is an incorrect usage of a paragraph tag:

				
					<p>This is a paragraph with no closing tag.
				
			

In this case, the paragraph tag is not closed with </p>. This can cause problems with the formatting of the page, and may even cause other HTML elements to display incorrectly.

To avoid this mistake, always make sure that every HTML tag that is opened is properly closed, and that the closing tag is in the correct location within the HTML code.

Table of Contents