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>© 2025 Ingenious Academy</p>
</footer>
</body>
</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>© 2025 Ingenious Academy</p>
</footer>
</body>
</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>© 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>
<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>
<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">
<img src="/img/google-ads-dashboard.webp"
alt="Google Ads dashboard showing campaign performance chart"
width="1200" height="675" 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>
<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>
<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)
