HTML5 Tags & SEO Cheatsheet: Semantic Markup Guide

Document Skeleton

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title Under 60 Characters</title>
    <meta
      name="description"
      content="140–160 character summary that earns the click."
    />
    <link
      rel="canonical"
      href="https://ivyivy.com/cheatsheets/html5-tags-seo/"
    />
    <meta name="robots" content="index, follow, max-image-preview:large" />
  </head>
  <body>
    <header>…</header>
    <main id="main-content">…</main>
    <footer>…</footer>
  </body>
</html>

Semantic Tags

Tag	Use for	Avoid
<header> / <footer>	Page or section intro/outro	Wrapping all content
<nav>	Primary navigation blocks	Every link list
<main>	Page’s unique content (one per page)	Duplicating it
<article>	Self-contained post/guide	Search result snippets
<section>	Thematic grouping with heading	Styling wrapper (use <div>)
<aside>	Tangential content (TOC, ads)	Main content
<figure> + <figcaption>	Images/diagrams with captions	Decorative images

SEO Meta & Social Tags

<!-- Open Graph -->
<meta property="og:title" content="HTML5 Tags & SEO Cheatsheet" />
<meta property="og:description" content="Semantic markup guide…" />
<meta property="og:type" content="article" />
<meta
  property="og:url"
  content="https://ivyivy.com/cheatsheets/html5-tags-seo/"
/>
<meta property="og:image" content="https://ivyivy.com/og-ivyivy-default.png" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="HTML5 Tags & SEO Cheatsheet" />
<meta name="twitter:description" content="Semantic markup guide…" />

<!-- Structured data -->
<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "TechArticle",
    "headline": "HTML5 Tags & SEO Cheatsheet"
  }
</script>

Headings & Images

<h1>One H1 per page — matches the title intent</h1>
<h2>Major sections</h2>
<h3>Subsections — never skip levels for styling</h3>

<img
  src="/guide-hero.avif"
  alt="Semantic HTML5 layout diagram"
  width="1200"
  height="630"
  loading="lazy"
  decoding="async"
/>

Edge cases: empty alt="" for decorative images; meaningful alt for content images. Always set width/height to prevent layout shift (CLS).

Forms & Accessibility

<form action="/contact" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email" />
  <button type="submit">Send</button>
</form>

<a href="#main-content" class="skip-link">Skip to content</a>

Checklist: every input has a <label>, color contrast ≥ 4.5:1, focus states visible, touch targets ≥ 24px.

Validation Checklist

1. One <h1>, logical heading order, descriptive link text.
2. Canonical is absolute and self-referencing; OG/Twitter images ≥ 1200×630.
3. Run Lighthouse + Rich Results Test before publishing.