Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Best Practices for Semantic HTML | Enhancing Accessibility and SEO
Build Meaningful and Accessible Web Pages

bookBest Practices for Semantic HTML

When building web pages, it is important to use HTML elements that accurately represent the content and structure of your site. Overusing generic elements like div and spanβ€”a practice known as div soupβ€”makes your markup harder to read, maintain, and understand. To avoid this, always choose the most appropriate semantic element for each part of your content. For example, use header for the top section, nav for navigation links, main for the primary content, article and section for distinct blocks, and footer for the bottom of the page. This approach not only improves accessibility but also helps search engines better interpret the meaning of your content.

Follow these tips for writing clear and maintainable HTML:

  • Use semantic elements instead of generic containers whenever possible;
  • Avoid unnecessary nesting and excessive use of div or span elements;
  • Name classes and IDs clearly to describe their purpose, not their appearance;
  • Keep your markup consistent and well-indented for readability;
  • Regularly review your HTML to remove redundant or empty elements.
index.html

index.html

index-semantic.html

index-semantic.html

copy
question mark

Which of the following is the best reason to avoid "div soup" when writing HTML?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 3. ChapterΒ 4

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

What are some examples of semantic HTML elements I should use?

How does using semantic elements improve accessibility?

Can you explain the difference between `section` and `article`?

Awesome!

Completion rate improved to 8.33

bookBest Practices for Semantic HTML

Swipe to show menu

When building web pages, it is important to use HTML elements that accurately represent the content and structure of your site. Overusing generic elements like div and spanβ€”a practice known as div soupβ€”makes your markup harder to read, maintain, and understand. To avoid this, always choose the most appropriate semantic element for each part of your content. For example, use header for the top section, nav for navigation links, main for the primary content, article and section for distinct blocks, and footer for the bottom of the page. This approach not only improves accessibility but also helps search engines better interpret the meaning of your content.

Follow these tips for writing clear and maintainable HTML:

  • Use semantic elements instead of generic containers whenever possible;
  • Avoid unnecessary nesting and excessive use of div or span elements;
  • Name classes and IDs clearly to describe their purpose, not their appearance;
  • Keep your markup consistent and well-indented for readability;
  • Regularly review your HTML to remove redundant or empty elements.
index.html

index.html

index-semantic.html

index-semantic.html

copy
question mark

Which of the following is the best reason to avoid "div soup" when writing HTML?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 3. ChapterΒ 4
some-alt