Using HTML elements for their intended purpose to improve accessibility and SEO.
Semantic HTML provides meaning to web content. It allows screen readers to navigate the page structure (headings, landmarks) and helps search engines understand the importance of content. It's the foundation of an accessible web.
Visualize the document structure and how semantic elements provide meaning to assistive technologies.
The dominant content of the body. There should be only one per page.
A section of navigation links. Helps users skip to main content.
Self-contained content that could be distributed independently (e.g., a blog post).
Content indirectly related to the main content (e.g., sidebars, callouts).
Introductory content, typically containing navigation or a logo.
Information about the section, such as copyright or contact links.
Use <button> for actions and <a> for navigation. Don't mix them up.
Ensure headings (h1-h6) follow a logical order without skipping levels.
Always use <label> elements associated with their respective form inputs.
Use <ul>, <ol>, or <dl> for grouping items to help screen readers announce the number of items.