HTML5 semantic tags describe meaning, not just boxes. Screen readers and search engines use landmarks like main, nav, and article to outline the page. Prefer them over a stack of divs whenever the content has a real role.
This HTML cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.
Quick reference
- header: Introductory block for the page or a section: logo, title, optional nav.
- nav: Major navigation only — primary menu, breadcrumbs, pagination. Not every link list.
- main: One per page. The unique content. Skip links should target it.
- article: Self-contained piece: blog post, product card, comment that could syndicate.
- section: Thematic grouping with a heading. Not a generic wrapper for CSS.
- aside: Tangentially related: related posts, pull quote, complementary tools.
- footer: For the page or an article: copyright, author, related links.
- figure:
<figure>+<figcaption>for images, diagrams, or code that need a caption.
Copy-paste examples
Page landmarks
One h1 in main (or the article title). Do not nest main inside article.
<body>
<header>
<a href="/">Site</a>
<nav aria-label="Primary">
<a href="/blog">Blog</a>
</nav>
</header>
<main>
<article>
<h1>Semantic HTML</h1>
<p>Lead.</p>
</article>
<aside>
<h2>Related</h2>
</aside>
</main>
<footer><p>© 2026</p></footer>
</body>Common mistakes
- Wrapping the whole page in
<section>because “HTML5 said so.” Usemain+ headings. - Multiple
<main>elements or puttingmainin the header. - Using
<article>for every card when the item is not independently reusable. - Choosing tags for how they look in the browser — semantics are not a CSS reset.
FAQ
- Is BLOGPH0 banned in HTML5? No. Use
divfor styling hooks with no meaning. Use semantic tags when the outline or AT landmark would help.
- BLOGPH0 vs BLOGPH1 ?
articlestands alone (a post).sectionis a headed chunk inside a page or article. If you cannot name a heading, you probably want adiv.
- Do semantic tags improve SEO? They help crawlers and assistive tech understand structure. Unique titles, headings, and content still matter more than swapping divs for sections.
Related HTML cheat sheets
Build with this stack
When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.
Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.