Understanding some basics of HTML for SEO

Minimal SEO-Friendly HTML

<!doctype html>


<!-- Canonical (one per page) -->
<link rel="canonical" href="https://www.example.com/digital-marketing-course" />


<!-- Robots: only when needed; default is index,follow -->
<!-- <meta name="robots" content="noindex, nofollow" /> -->


<!-- Hreflang (overview example) -->
<!-- <link rel="alternate" href="https://www.example.com/in/" hreflang="en-IN" /> -->


<!-- Favicons / icons -->
<link rel="icon" href="/favicon.ico" />


<!-- Structured Data (example: Course) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Course",
"name": "Digital Marketing Course",
"description": "Live 90‑day program covering Google Ads, SEO, AI updates.",
"provider": {
"@type": "Organization",
"name": "Ingenious Academy",
"sameAs": "https://www.example.com"
}
}
</script>
</head>
<body>
<header>
<nav aria-label="Primary">
<a href="/">Home</a>
<a href="/courses/">Courses</a>
<a href="/contact/">Contact</a>
</nav>
<h1>Digital Marketing Course (Live + Recorded)</h1>
</header>


<main>
<article>
<h2>What you’ll learn</h2>
<p>Google Ads, SEO fundamentals, systems thinking, and client acquisition.</p>


<h2>Who is this for?</h2>
<p>Agency owners, freelancers, and business owners in India.</p>


<figure>
<img src="/images/classroom.jpg" alt="Instructor teaching a live digital marketing class" width="1200" height="675" />
<figcaption>Live cohort sessions run Mon–Fri, 90 minutes.</figcaption>
</figure>


<h2>Enroll</h2>
<p><a href="https://www.example.com/registration">Book a free demo</a></p>
</article>
</main>


<footer>
<p>&copy; 2025 Ingenious Academy</p>
</footer>
</body>
</html>

HTML Fundamentals (for SEO)

Core tags: <!doctype>, <html lang>, <head>, <body>, <title>, meta tags, <link> (canonical, icons), <script>, <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, headings <h1>–<h6>, <p>, <a>, <img>, <ul>/<ol>/<li>, <figure>/<figcaption>.

One clear H1 that describes the page topic (multiple H1s won’t break Google, but keep hierarchy clean: H1 → H2 → H3…).
Title is not the same as H1. Title is for tabs/SERP; H1 is on‑page main heading.
Meta description helps searchers choose; write unique, page‑specific summaries (Google may rewrite).
Links: use crawlable <a href="…"> with meaningful anchor text.
Images: always add contextual alt; avoid keyword stuffing. Prefer descriptive file names.
Language: set lang on <html>. For multilingual strategy, use dedicated URLs + hreflang (advanced).
Indexing controls: use robots meta only when you need to restrict. Default is indexable.

Semantic Structure & Heading Hierarchy

<header> → branding + <nav>
<main>
<article> (self‑contained content unit)
<h1>Page Topic</h1>
<section>
<h2>Subtopic</h2>
<p>…</p>
<h3>Detail</h3>
</section>
</article>
</main>
<aside>related links/widgets</aside>
<footer>copyright, secondary nav</footer>

Do: keep sections logical, one main H1, descending headings, avoid skipping levels when possible.
Don’t: style headings with <div>s instead of semantic headings; don’t use headings to style text only.

<title> (50–60 chars aim, unique, descriptive, brand last): Reflect real page topic. Avoid stuffing/boilerplate.
<meta name="description"> (up to ~155–160 chars): Persuasive summary; can include price/date/author for relevance.
Canonical (<link rel="canonical">): One per page pointing to the preferred URL. Avoid chains & self‑conflicts.
Robots meta: Page‑specific controls (noindex, nofollow, noarchive, nosnippet, etc.). Use sparingly.
Open Graph/Twitter Cards: Not a Google ranking factor, but improves social sharing previews.
Favicons & app icons: Good UX; ensure valid paths.
Preload/preconnect (advanced performance): Only for critical assets.

Links & Navigation (Crawlability)

Use real <a href="/path">Descriptive text</a> (not JS click handlers alone).
Avoid blocking primary nav in robots.txt or via nofollow unless intentional.
Internal anchors: use topic‑rich, natural language; avoid “click here”.
Provide footer or secondary nav for discoverability.

Do / Don’t

Do: HTML sitemaps for large sites; breadcrumbs with proper markup.
Don’t: Excessive link stuffing; orphan pages; nav hidden behind required JS with no href fallback.

Images (Alt Text & Context)

Use alt to describe the image purpose in context (not just keywords).

Decorative images: alt="" (empty) to skip for screen readers.
Provide intrinsic dimensions (width/height) to reduce CLS (layout shift).
Use modern formats (AVIF/WebP) with fallbacks where needed.
Lazy‑load non‑critical images (loading="lazy").

<img src="/img/google-ads-dashboard.webp"
alt="Google Ads dashboard showing campaign performance chart"
width="1200" height="675" loading="lazy">

Accessibility Essentials (A11y)

Proper heading order aids screen reader navigation.
Every interactive element must be focusable and keyboard operable.
Provide text alternatives for images/icons.
Use landmark roles (<header>, <nav>, <main>, <footer>).
Color contrast & visible focus states (CSS).
Form labels linked to inputs (<label for> / id).

Structured Data (Intro)

Prefer JSON‑LD in <script type="application/ld+json"> within <head> or <body>.
Mark up content that actually exists on the page (match visible content).
Common types for SEO students: Article, BlogPosting, Course, Product, FAQPage, BreadcrumbList.

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Is this course beginner friendly?",
"acceptedAnswer": {"@type": "Answer","text": "Yes, it starts with fundamentals."}
}
]
}
</script>

Internationalization (Overview)

Prefer separate URLs for each language/region: /en/, /hi/, /en-in/…
Add reciprocal hreflang annotations on each variant.
Keep canonical self‑referential to each language page (usually).
Don’t rely on auto‑redirect solely by IP; allow users to switch.

Performance & UX Signals (HTML Side)

Include meta viewport for mobile.
Reserve space for images/video (width/height) to reduce CLS.
Load critical CSS early; defer non‑critical JS.
Use semantic HTML for better rendering & accessibility.

Common Pitfalls & How to Fix

Duplicate titles/meta: Template bugs—inject unique variables per page.
Accidental noindex: Remove from templates; verify with a crawler.
Canonical conflicts: Ensure only one canonical; avoid pointing to non‑equivalents; no chains.
Missing alt: Audit with a crawler; add contextual descriptions.
JS‑only links: Add real <a href> or server‑rendered anchors.

Hands‑On Labs

Lab A: Build the skeleton
Create a home page with header/nav/main/footer, one H1, two H2s, an image with alt, and a call‑to‑action link.

Lab B: Optimize <head>
Add a unique title, meta description, canonical, favicon, and an FAQ JSON‑LD.

Lab C: Image gallery
Add 6 images with descriptive filenames and contextual alt; make non‑critical images lazy‑load.

Lab D: Internal linking
Create a 3‑page mini‑site and connect pages with descriptive anchors; add breadcrumbs.

Lab E (advanced, optional): Multilingual mock with /en/ and /hi/ plus reciprocal hreflang links.

Checklist

The web platform & HTML basics
Semantic layout & headings; build your first page
<head> deep dive: title/description/robots/canonical
Links & images + accessibility
Components: lists, tables, forms (with labels)
Media: images/video <figure>; lazy‑loading; CLS
Internal linking strategies; breadcrumbs
Mini project #1 review
Structured data (JSON‑LD) overview + FAQ/Breadcrumb markup
Internationalization basics & hreflang overview
Performance primer from HTML perspective
Mini project #2 review
Auditing HTML with a crawler; fixing pitfalls
Writing great titles & descriptions workshop
Accessibility checks (keyboard nav, alt text)