HTML Essentials
Semantic HTML
Describe page regions with meaningful elements.
Semantic elements such as header, nav, main, article, and footer describe the role of content instead of only its appearance.
Important definitions
- Semantic element
- An element whose name communicates its purpose.
Syntax
Use this general pattern as a reference:
HTML
<main><article>...</article></main>Examples
Page regions
EXAMPLE 1
<header>Brand</header><main>Article</main><footer>Copyright</footer>ResultThree meaningful page regions
COMPLETE EXAMPLE
<main>
<article><h1>Guide</h1><p>Useful content.</p></article>
</main>Expected output
A main region containing a guide article.
Note
Semantics support navigation for assistive technology.
Tip
Choose an element for meaning, then style it with CSS.
Common mistakes
- Replacing every div without understanding the new element.
- Using multiple main regions.