Semantic HTML
Proper use of HTML elements provides meaningful structure, improves screen reader navigation, and boosts SEO.
Semantic markup is the foundation of accessible web content.
Core Guidelines
1. Heading Hierarchy
Use <h1> through <h6> in logical orderānever skip levels. One <h1> per page, then descend sequentially.
2. Landmark Elements
Wrap major page regions in <header>, <nav>, <main>, <aside>, and <footer> so assistive tech can jump directly to key areas.
3. Sectioning Tags
Group related content with <section>, <article>, <figure> + <figcaption>, and <blockquote> to convey meaning.
4. Lists & Tables
Use <ul>, <ol>, <li> for lists and <table>, <thead>, <tbody>, <th>, <td> for tabular dataānever simulate lists or tables with <div>.
5. Controls & Labels
Use <button> for actions, <a> for navigation, and associate <label> with form controls. Avoid using <span> or <div> as interactive elements.
Screen readers announce semantic elements and allow users to navigate by landmarks, headings, and lists.
Quick Checklist
- š Headings: Are levels sequential and descriptive?
- š© Landmarks: Does each region use proper tags (
<main>,<nav>, etc.)? - š¦ Sections: Are related blocks wrapped in
<section>or<article>? - š Lists: Are lists marked up with
<ul>/<ol>and<li>? - š¢ Tables: Is tabular data in a real
<table>with headers? - š Buttons & Links: Are interactive elements real HTML controls with labels?
Avoid using generic containers (<div>, <span>) for structureāuse them only when no semantic element applies.