š Scenario: You are creating a simple webpage for a local bakery. The bakery wants the page to be easy to find on search engines like Google. To do this, you will write SEO-friendly HTML that helps search engines understand the page content.
šÆ Goal: Build a basic HTML page with proper SEO tags including title, meta description, headings, and semantic structure.
š What You'll Learn
Use semantic HTML5 elements like , , and
Add a meaningful tag inside the
Include a description tag with a short summary
Use heading tags
and
properly to organize content
Add alt text to images for accessibility and SEO
š” Why This Matters
š Real World
Creating SEO-friendly webpages helps local businesses like bakeries attract more visitors through search engines.
š¼ Career
Web developers often need to write semantic, accessible, and SEO-optimized HTML to improve website visibility and user experience.
Progress0 / 4 steps
1
Create the basic HTML structure
Write the basic HTML5 skeleton with lang="en" in the <html> tag, and include <head> and <body> sections. Inside the <body>, add a <header>, <main>, and <footer> element.
HTML
Hint
Start with the standard HTML5 document structure. Remember to add lang="en" to the <html> tag for language identification.
2
Add SEO meta tags in the head
Inside the <head> section, add a <title> tag with the text "Sweet Treats Bakery". Then add a <meta> tag with name="description" and content="Delicious homemade cakes and pastries in your neighborhood.".
HTML
Hint
The <title> tag shows the page title in browser tabs and search results. The <meta name="description"> helps search engines understand the page content.
3
Add headings and content inside main
Inside the <main> element, add an <h1> heading with the text "Welcome to Sweet Treats Bakery". Below it, add an <h2> heading with "Our Specialties". Then add a paragraph <p> describing the bakery: "We bake fresh cakes, cookies, and pastries daily."
HTML
Hint
Use heading tags to organize your content. The <h1> is the main title, and <h2> is a subheading. Paragraphs hold text content.
Images need descriptive alt text for accessibility and SEO. The footer usually contains copyright or contact info.
Practice
(1/5)
1. Which HTML element is best for defining the main title of a webpage for SEO purposes?
easy
A. <div>
B. <title>
C. <header>
D. <h1>
Solution
Step 1: Understand the role of <h1> in SEO
The <h1> tag defines the main heading of the page content, which search engines use to understand the page topic.
Step 2: Differentiate from other tags
The <title> tag sets the browser tab title but is not visible in the page body. <header> is a semantic container, and <div> is generic with no SEO meaning.
Final Answer:
<h1> -> Option D
Quick Check:
Main page title = <h1> [OK]
Hint: Main page title should be inside <h1> tag [OK]
Common Mistakes:
Using <title> as visible page heading
Using <div> instead of semantic heading
Confusing <header> with heading tags
2. Which of the following is the correct way to add a meta description for SEO in HTML?
easy
A. <meta content="This is my page" name="desc">
B. <meta description="This is my page">
C. <meta name="description" content="This is my page">
D. <meta name="desc" content="This is my page">
Solution
Step 1: Recall correct meta tag syntax for description
The meta description tag uses name="description" and a content attribute with the description text.
Step 2: Check each option's correctness
<meta name="description" content="This is my page"> matches the correct syntax. Options A, B, and D use incorrect attribute names or order.
Final Answer:
<meta name="description" content="This is my page"> -> Option C
Quick Check:
Meta description = name="description" [OK]
Hint: Meta description uses name="description" and content="..." [OK]
Common Mistakes:
Using wrong attribute names like 'desc'
Omitting the content attribute
Swapping attribute order incorrectly
3. What will be the visible heading structure in the browser from this HTML snippet?
A. A main heading 'About Us' and a subheading 'Our Mission' below it
B. Only one heading 'Our Mission' is visible
C. No headings are visible because they are inside section and article
D. Both headings appear but 'Our Mission' is above 'About Us'
Solution
Step 1: Understand semantic tags and heading display
The <h2> and <h3> tags create visible headings with different sizes and importance.
Step 2: Analyze the snippet structure
The <h2>About Us</h2> is the main heading in the section, and <h3>Our Mission</h3> is a subheading inside the article, so both show in order.
Final Answer:
A main heading 'About Us' and a subheading 'Our Mission' below it -> Option A
Quick Check:
Headings show in order and size [OK]
Hint: Headings inside semantic tags still display visibly [OK]
Common Mistakes:
Thinking section/article hide headings
Assuming only one heading shows
Confusing heading order visually
4. Identify the error in this HTML snippet for SEO:
<head>
<title>My Site</title>
<meta name="description" content="Welcome to my site">
<h1>Home Page</h1>
</head>
medium
A. Missing <meta charset> tag
B. <h1> should not be inside <head>
C. <title> tag is empty
D. <meta name="description"> is missing content
Solution
Step 1: Review correct placement of <h1>
The <h1> tag is for visible page content and must be inside the <body>, not <head>.
Step 2: Check other tags
The <title> is correctly filled, and the meta description has content. Missing charset is not an error for SEO but recommended.
Final Answer:
<h1> should not be inside <head> -> Option B
Quick Check:
Visible content tags go in body, not head [OK]
Hint: Keep <h1> inside <body>, not <head> [OK]
Common Mistakes:
Placing visible tags inside <head>
Ignoring charset meta tag importance
Leaving meta description empty
5. You want to improve SEO by organizing content semantically. Which combination of tags best structures a blog post with a title, author info, main content, and footer notes?
hard
A. <article><header><h1>Title</h1></header><section>Content</section><footer>Author and notes</footer></article>
B. <div><h1>Title</h1><div>Content</div><div>Author</div></div>
C. <section><h1>Title</h1><footer>Author</footer></section><article>Content</article>
D. <header><h1>Title</h1></header><article>Content</article><footer>Author</footer>
Solution
Step 1: Identify semantic tags for blog structure
The <article> tag wraps the whole blog post. Inside it, <header> holds the title, <section> contains main content, and <footer> includes author and notes.
Step 2: Compare options for semantic correctness
<article><header><h1>Title</h1></header><section>Content</section><footer>Author and notes</footer></article> uses all correct semantic tags in proper order. <div><h1>Title</h1><div>Content</div><div>Author</div></div> uses generic <div> tags, which are less SEO-friendly. <section><h1>Title</h1><footer>Author</footer></section><article>Content</article> misplaces <article> outside main content. <header><h1>Title</h1></header><article>Content</article><footer>Author</footer> separates header and footer outside article, which is less clear.
Final Answer:
<article><header><h1>Title</h1></header><section>Content</section><footer>Author and notes</footer></article> -> Option A
Quick Check:
Use semantic tags to organize content clearly [OK]
Hint: Wrap blog post in <article> with header, section, footer [OK]
Common Mistakes:
Using only <div> without semantic tags
Separating header/footer outside article
Misusing section and article tags
Recommended
Ready to prove it?
Pass the test and this pattern moves unknownstrongwhile earning +1 Grip toward your certificate.