Two ways to build the same page — one using meaningful tags, one using only <div>. Below that, the HTML tags that matter most for search engines, with examples.
Both versions render identically in a browser. The difference is invisible to the eye and obvious to a search engine, a screen reader, or another developer reading the code.
1<div class="top">2 <div class="logo">My Site</div>3 <div class="links">4 <div>Home</div>5 <div>About</div>6 </div>7</div>89<div class="post">10 <div class="title">Trail notes</div>11 <div>Posted on the trail</div>12 <div>It rained the whole way.</div>13</div>1415<div class="bottom">© 2026</div>
div.1<header>2 <h1>My Site</h1>3 <nav>4 <a href="/">Home</a>5 <a href="/about">About</a>6 </nav>7</header>89<main>10 <article>11 <h2>Trail notes</h2>12 <time datetime="2026-06-30">Posted on the trail</time>13 <p>It rained the whole way.</p>14 </article>15</main>1617<footer>© 2026</footer>
<nav>, <main>, and <footer> tell every tool — browser, search engine, screen reader — exactly what each region is for.<article> and <h2> mark the post as a standalone, headed piece of content search engines can index on its own.<time datetime="..."> gives machines an unambiguous date, separate from the human-readable text.Search engine optimisation is the practice of structuring a page so that search engines can understand what it's about, and rank it for the right queries. Most of it comes down to two things: writing clear, well-organised HTML, and giving the page accurate metadata. No amount of styling fixes a page a search engine can't parse.
A search engine crawling the non-semantic example above sees a flat pile of text. It has no signal for what's the headline, what's the navigation, or what's the actual article — so it can't confidently rank the page for anything specific.
With <h1>, <article>, and <nav> in place, the crawler can identify the page title, the primary content, and the site structure — the same signals it uses to decide what the page is about and how trustworthy it is.
These live in <head> and at the top of <body>. Each one answers a different question a search engine or social platform asks about the page.
The single biggest on-page ranking factor. It's also what shows as the clickable blue link in search results — keep it under about 60 characters.
1<title>Trail Notes — Backcountry Hiking Blog</title>
The grey summary text under the title in search results. Doesn't directly affect ranking, but a good one improves click-through rate.
1<meta name="description"2 content="Field notes from rainy trails.">
Tells both readers and crawlers the single main topic. Use exactly one per page, then step down through <h2> and <h3> for subsections — never skip levels.
1<h1>Backcountry Hiking Blog</h1>
Describes an image for crawlers and for anyone using a screen reader. Images without it are essentially invisible to both.
1<img src="trail.jpg"2 alt="Muddy trail through a pine forest">
Tells search engines which version of a page is the "real" one when the same content is reachable at more than one URL, preventing duplicate-content penalties.
1<link rel="canonical"2 href="https://example.com/trail-notes">
Control how a link looks when shared on social media — the preview title, description, and image. Not used for ranking, but essential for click-through off-platform.
1<meta property="og:title" content="Trail Notes">2<meta property="og:image" content="/trail.jpg">
A rough priority order for a student putting together their first page.