HTML for SEO: The Elements and Attributes That Matter (With Code)
By Christoph Olivier, Founder, CO Consulting.
Last reviewed: July 2026
This is a reference for the HTML that search engines and AI answer engines actually read, with the exact markup to copy. It is not a which-tag-matters-most strategy essay. For priority order and how to write the four highest-impact tags, see our guide to on-page tag optimization. For the developer-versus-marketer split, see coding for SEO. Here you get the elements, the attributes, and correct code examples for each, so you can look up the right tag and paste it in.
Which HTML elements matter for SEO?
The HTML elements that matter for SEO fall into four groups: semantic structure tags (<header>, <nav>, <main>, <article>, <section>, <footer>), heading tags (<h1> to <h6>), head metadata (<title>, meta description, canonical, robots, viewport), and structured data in JSON-LD. Attributes on links and images do most of the remaining work.
Everything else is either cosmetic or handled by CSS. The list below is deliberately short because the set of tags Google and AI engines act on is small. If a tag is not in this reference, it is unlikely to change how your page is understood or ranked.
The tables and code blocks that follow are grouped so you can jump to the element you need. Each example is minimal and valid HTML5 you can adapt.
Semantic HTML tags for SEO
Semantic tags label what a block of content is, not how it looks. <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> give crawlers and AI parsers a clear document outline, which helps them separate primary content from navigation and boilerplate. Use one <main> per page and wrap the core content in <article>.
A div-only page still renders fine, but it hands the parser no structure. Barry Adams and other technical SEOs have argued for years that a clean semantic outline makes content easier for both Googlebot and large language models to segment into passages, which is what AI answer engines quote. In my own audits, the pages that get pulled into AI Overviews almost always have a real content region wrapped in <article> or <main> rather than a wall of nested divs.
Here is the minimal skeleton I hand developers as a starting point:
<body>
<header>
<nav aria-label="Primary">...</nav>
</header>
<main>
<article>
<h1>Page topic</h1>
<section>
<h2>First subtopic</h2>
<p>...</p>
</section>
</article>
</main>
<footer>...</footer>
</body>| Tag | Role | Per-page count |
|---|---|---|
<header> | Top banner / intro block | One page-level, plus per-section allowed |
<nav> | Primary navigation links | One primary; label extras with aria-label |
<main> | The unique primary content | Exactly one |
<article> | Self-contained content unit | One or more |
<section> | Thematic grouping with a heading | Many |
<footer> | Closing / metadata block | One page-level |
Heading tags: H1 to H6
Heading tags build the content outline. Use exactly one <h1> that states the page topic, then <h2> for main sections and <h3> for sub-points, without skipping levels. Do not jump from <h2> to <h4>, and never use a heading tag purely to make text bigger. The hierarchy is what tells a parser which passage answers which question.
Google confirmed years ago that multiple H1s will not break a page, but a single clear H1 remains the cleaner signal and matches how AI engines pick the page’s main entity. Correct nesting:
<h1>HTML for SEO</h1>
<h2>Semantic tags</h2>
<h3>The <article> element</h3>
<h2>Heading tags</h2>A practical test: strip the CSS and read only the headings. If they read like a table of contents that a stranger could follow, the outline is right. If they read like random labels, so does your page to a crawler.
Head metadata: title, description, canonical, robots, viewport
The <head> holds the metadata that controls how a page appears in search and whether it gets indexed at all. The load-bearing tags are the title, meta description, canonical, robots, and viewport. The meta keywords tag is dead; Google dropped it as a ranking signal by 2009, so leave it out.
Copy-paste block:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML for SEO: Elements & Code That Matter</title>
<meta name="description" content="The HTML elements and attributes that matter for SEO, with correct code.">
<link rel="canonical" href="https://example.com/html-for-seo-elements/">
<meta name="robots" content="index, follow">
</head>| Element | Job | Length / value |
|---|---|---|
<title> | SERP headline + tab label; ranking signal | ~50-60 chars, keyword near front |
| meta description | SERP snippet; drives clicks, not rank | ~120-155 chars |
canonical <link> | Names the preferred URL for duplicates | Absolute URL, self-referencing by default |
| meta robots | Page-level index / follow control | index,follow or noindex,nofollow |
| viewport | Mobile rendering; mobile-first indexing | width=device-width, initial-scale=1 |
The title is not the same element as the H1. The title lives in the head and shows in the SERP and tab; the H1 is the visible on-page headline. They should reinforce each other but do not have to be identical. If you want the title written for both rankings and click-through, our title tag optimization guide covers that element alone.
Structured data: JSON-LD you can paste
Structured data is Schema.org vocabulary that tells engines what your content represents, which unlocks rich results and gives AI engines explicit facts to cite. Google recommends JSON-LD, placed in a <script type="application/ld+json"> block in the head or body. You write it once per page type; a generator or CMS plugin can produce it, so this is data entry, not programming.
A minimal Article block looks like this:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "HTML for SEO: The Elements That Matter",
"author": { "@type": "Person", "name": "Christoph Olivier" },
"datePublished": "2026-07-04",
"dateModified": "2026-07-04"
}
</script>Match the schema type to the page: FAQPage for question-and-answer blocks, BreadcrumbList for the navigation trail, Product for a store item, LocalBusiness for a location. Only mark up content that is actually visible on the page, or you risk a manual action. Schema is one of the strongest levers for AI citation, and we track the mechanics in schema markup for AI search citations.
The attributes that carry SEO weight
A handful of attributes do real SEO work: alt on images, href and rel on links, lang on the html tag, and hreflang for multi-language sites. Get these right and you cover image search, link equity control, and language targeting. Miss them and you leak accessibility and crawl signals.
Image alt text describes the image for screen readers and for Google Images. Write what you would say aloud to someone who cannot see it.
<img src="/audit.png" alt="On-page SEO score rising from 58 to 82 after tag fixes" width="800" height="450">Links pass context and equity. The visible anchor text is a ranking signal for the destination, so make it descriptive, not “click here.” Use rel to control how equity flows.
<a href="https://example.com/seo-guide/">on-page SEO checklist</a>
<a href="https://partner.com" rel="sponsored">sponsored link</a>
<a href="https://forum.com/thread" rel="ugc nofollow">user-generated link</a>| Attribute | Applies to | What it does for SEO |
|---|---|---|
alt | <img> | Image search relevance + accessibility |
width / height | <img> | Reserves space, prevents layout shift (CLS) |
href | <a>, <link> | Crawl path; canonical / hreflang targets |
rel | <a> | nofollow / sponsored / ugc equity control |
lang | <html> | Declares page language |
hreflang | <link> | Maps language / region variants |
loading="lazy" | <img>, <iframe> | Defers off-screen loads; helps speed |
Always set width and height on images. It reserves layout space and prevents the cumulative layout shift that hurts Core Web Vitals, which is a lightweight ranking factor.
A worked example: what a clean SEO-ready page looks like
Here is a trimmed but complete page that uses every element above correctly. I use this as the reference skeleton on client rebuilds, and it is the fastest way to see the pieces working together. Fill the content, keep the structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Roof Replacement Cost 2026 | Acme</title>
<meta name="description" content="What a roof replacement costs in 2026, by material and region.">
<link rel="canonical" href="https://acme.com/roof-cost/">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Article","headline":"Roof Replacement Cost 2026"}
</script>
</head>
<body>
<header><nav aria-label="Primary">...</nav></header>
<main>
<article>
<h1>Roof Replacement Cost in 2026</h1>
<section>
<h2>Cost by material</h2>
<img src="/asphalt.jpg" alt="Asphalt shingle roof" width="700" height="400" loading="lazy">
<p>...</p>
</section>
</article>
</main>
<footer>...</footer>
</body>
</html>Every SEO-relevant element is present: a language declaration, complete head metadata, one canonical, one H1, a semantic content region, structured data, and an image with alt plus dimensions. That is the whole reference in one file. If you want an audit of how your current markup stacks up against this, our team runs on-page teardowns as part of growth consulting, or you can book a consultation.
Frequently asked questions
What HTML tags are most important for SEO?
The most important HTML tags for SEO are the title tag and meta description in the head, one H1 plus a clean H2 to H6 heading outline, canonical and robots tags, semantic structure tags like main and article, and a JSON-LD structured data block. Image alt attributes and descriptive link anchor text round out the set.
Does semantic HTML help SEO?
Yes, semantic HTML helps SEO indirectly. Tags like main, article, and section give crawlers and AI answer engines a clear document outline, making it easier to separate primary content from navigation and to segment text into quotable passages. It also improves accessibility, which correlates with the quality signals search engines reward.
Where do I put structured data in HTML?
Put structured data in a script tag with type application/ld+json. Google accepts it in either the head or the body, so placement does not affect how it is read. Use JSON-LD rather than microdata or RDFa, match the schema type to the page, and only mark up content that is actually visible on the page.
Is the meta keywords tag still used for SEO?
No, the meta keywords tag is not used for SEO. Google stopped treating it as a ranking signal by 2009 and confirmed it ignores the tag. Leave it out. Focus your head metadata on the title, meta description, canonical, robots, and viewport tags, which do affect indexing and appearance.
How many H1 tags should a page have?
Use one H1 per page as the cleanest signal of the main topic. Google has said multiple H1s will not break a page, and HTML5 technically allows more than one, but a single H1 matches how AI engines identify the page’s primary entity. Follow it with a properly nested H2 to H6 outline without skipping levels.