🔍 Advanced HTML

SEO with HTML

⏱ 1 hr2 topicsLive playground
🎯 By the end: You can write a strong title tag and meta description, structure headings for search, and avoid the spammy habits that get pages penalised.

SEO — Search Engine Optimisation — is how you help Google understand your page so the right people find it. Whole careers are built on it, but a big chunk comes down to HTML you already know, used thoughtfully. No tricks, no stuffing — just clear, honest structure.

1The title tag and meta description

Two elements in the <head> do the heavy lifting in search results:

  • The title tag<title>Best Dosa in Chennai — Anna's Kitchen</title> — becomes the blue clickable headline on Google and the browser-tab text. Keep it around 50–60 characters, put the most important words first, and make every page's title unique.
  • The meta description<meta name="description" content="…"> — is the grey summary line under the title. Around 120–155 characters. It doesn't directly change ranking, but a compelling one earns more clicks.
Write the title for a human scanning ten search results, not for a robot. "Free HTML & CSS Tutorial for Beginners — Vidaara" beats a comma-soup of keywords every time.
Key points
  • The <title> is the headline in search results and the tab text — unique per page, ~50–60 chars, key words first.
  • The <meta name="description"> is the summary snippet — ~120–155 chars; it drives clicks more than ranking.
  • Write both for humans scanning results, not for robots.

2Structure, links and honest content

Search engines read your page's structure to understand it — which is exactly why the HTML habits from earlier lessons are also SEO habits:

  • One <h1> that states the page's topic, with a sensible <h2>/<h3> outline beneath it.
  • Descriptive link text — "our refund policy", not "click here" — tells engines what the linked page is about.
  • Meaningful alt text — images get indexed too, and alt text is how.
  • Semantic landmarks (<main>, <article>) help engines find the real content.
Don't try to trick Google. Keyword stuffing, hidden text, and repeating your keyword 50 times all get pages penalised, not promoted. Modern search rewards genuinely useful, well-structured content. The honest path is also the winning one.
There's more to technical SEO — sitemaps, structured data (JSON-LD), Open Graph — and the next lesson covers meta and social tags. But clean HTML is the foundation everything else sits on.
Key points
  • A single clear <h1> plus a logical heading outline tells engines what the page is about.
  • Descriptive link text and meaningful alt text both feed SEO.
  • Never keyword-stuff or hide text — it gets pages penalised; useful, structured content wins.

★ Practical: optimise a page's head and headings

For an imaginary page about a tea shop, write:

  1. A unique <title> of about 50–60 characters with the key words first.
  2. A <meta name="description"> of about 120–155 characters that would tempt a click.
  3. A single <h1> and two <h2> sections beneath it.
  4. One link with descriptive text (not 'click here').

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.