The core idea
Semantic HTML uses elements that describe the purpose of their content. Elements such as header, nav, main, article, section, and footer communicate structure more clearly than generic containers alone.
How it works
A semantic page should have one main landmark for its primary content, navigation landmarks for important menus, and headings that describe the hierarchy of each section.
Practical considerations
Use article for content that can stand on its own, such as a news story or tutorial. Use section for a thematic grouping, usually with a heading. A div remains useful when no more specific element fits.
A useful way to apply it
Semantic elements do not automatically make a page accessible. Add meaningful link text, labels for form controls, keyboard-friendly interactions, and alternative text for informative images.
Keep learning
A clear document structure benefits people using assistive technology and developers maintaining the page. It also gives search engines more understandable context, although semantic markup alone does not guarantee rankings.
Frequently asked questions
What is semantic HTML?
Semantic HTML uses elements whose names communicate the meaning or role of the content they contain.
Is div a semantic element?
No. Div is a generic container and should be used when a more meaningful element is not appropriate.
Does semantic HTML improve SEO?
It can make page structure clearer, but it is not a standalone ranking guarantee.
Continue learning
Explore more topics in the MicroProgrammer library, or browse the Web Development collection for related guides.