Writing Semantic & SEO-Friendly HTML

Writing Semantic & SEO-Friendly HTML

Semantic HTML means choosing elements based on what content actually means, not just how it looks. A search engine's crawler and a screen reader both rely heavily on this underlying structure to understand a page — so semantic markup improves accessibility and search rankings at the same time.

Semantic Layout Elements

HTML5 introduced landmark elements that describe the role of different sections of a page, instead of relying on generic, meaningless <div> wrappers:

• <header> — introductory content or navigation for a page or section.
• <nav> — a block of primary navigation links.
• <main> — the primary, unique content of the page (only one per page).
• <article> — a self-contained piece of content, like a blog post.
• <section> — a thematic grouping of related content.
• <aside> — content tangentially related to the main content, like a sidebar.
• <footer> — closing content for a page or section.

Proper Heading Structure

Use exactly one <h1> per page describing its main topic, then nest <h2>–<h6> in logical order without skipping levels. Search engines use this hierarchy to understand a page's outline, and screen reader users often navigate a page heading-by-heading.

Meta Tags That Matter for SEO

• <title> — the single most important on-page SEO element, shown as the clickable headline in search results.
• <meta name="description"> — the summary snippet shown under the title in search results.
• <link rel="canonical"> — tells search engines which URL is the "master" version when duplicate content exists.
• Open Graph tags (og:title, og:image, etc.) — control how a page looks when shared on social media.

Structured Data (Schema.org)

Adding JSON-LD structured data describes entities on the page (articles, products, recipes, FAQs) in a machine-readable format, which can unlock rich results in search engines like star ratings, prices, or FAQ dropdowns.

Descriptive, Crawlable Content

Use meaningful link text instead of "click here", give every image a descriptive alt attribute, and avoid burying important text inside images or JavaScript-only rendering that search engines and assistive tools may not process.