Semantic HTML

Introduction

Semantic HTML refers to using HTML elements to convey their intended meaning, making it easier for browsers, search engines, and assistive technologies to understand the structure and purpose of a webpage.

Key Concepts

• Meaningful elements: Use elements like <header>, <main>, and <footer> to semantically describe the page's structure.
• Consistent structure: Establish a logical hierarchy of elements to aid navigation and screen readers.
• Accessibility tools: Semantic HTML improves accessibility for users with disabilities, allowing assistive technologies to accurately interpret the page.

Practical Steps

• Use the correct element for its intended purpose:
  • <header> for a web page's header
  • <nav> for navigation menus
  • <main> for the main content
• Establish a clear hierarchy:
  • Use headings (<h1> to <h6>) to structure your content
  • Use paragraphs (<p>) and lists (<ul> and <ol>) to organize text
• Provide alternative text for images (<img>): Describe the image's contents using the alt attribute to aid screen reader users.
• Use semantic attributes: Use attributes like role and aria-label to provide additional context to assistive technologies.

CSS Example

By using HTML elements for their intended purpose, you can create more accessible and maintainable CSS code. For example:

header {
  background-color: #333;
  color: #fff;
}

main {
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
}

footer {
  background-color: #ccc;
  color: #666;
}

This CSS leverages the semantic structure of the HTML to style the header, main content, and footer appropriately.