SEO-friendly HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a descriptive title for the webpage.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[1]</title>
</head>
<body>
  <h1>Welcome to my website</h1>
</body>
</html>

Drag options to blanks, or click blank then click option'

AMy Awesome Website

BPage

CUntitled

DDocument

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the title empty or using generic words.

Not including the title tag inside the head section.

The <title> tag should have a clear and descriptive title to help search engines understand the page content.

2fill in blank

medium

Complete the code to add a meta description for SEO.

HTML

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="[1]">
  <title>My Website</title>
</head>

Drag options to blanks, or click blank then click option'

AThis is a website

BWelcome

CA detailed description of the website content for search engines

DNo description

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the description empty or too short.

Using vague or generic descriptions.

The meta description should briefly summarize the page content to improve search engine results.

3fill in blank

hard

Fix the error in the heading tag to improve SEO and accessibility.

HTML

<body>
  <[1]>Welcome to my website</h1>
</body>

Drag options to blanks, or click blank then click option'

Ah2

Bh1

Cdiv

Dp

Attempts:

3 left

💡 Hint

Common Mistakes

Using mismatched tags like opening h2 and closing h1.

Using non-heading tags for main titles.

The main heading should use <h1> for SEO and accessibility. The opening and closing tags must match.

4fill in blank

hard

Fill both blanks to create a semantic article with a heading.

HTML

<[1]>
  <[2]>Article Title</[2]>
  <p>This is the article content.</p>
</[1]>

Drag options to blanks, or click blank then click option'

Aarticle

Bsection

Ch2

Dh1

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic div instead of semantic tags.

Using h1 inside articles when it should be reserved for main page title.

The article tag defines a self-contained piece of content. Inside it, use a heading tag like h2 for the article title.

5fill in blank

hard

Fill all three blanks to create a navigation menu with accessible links.

HTML

<nav aria-label="Main navigation">
  <ul>
    <li><a href="[1]">Home</a></li>
    <li><a href="[2]">About</a></li>
    <li><a href="[3]">Contact</a></li>
  </ul>
</nav>

Drag options to blanks, or click blank then click option'

A/index.html

B/about.html

C/contact.html

D/home.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect or broken URLs in links.

Not using semantic nav and aria-label for accessibility.

Use clear and correct URLs in navigation links to help users and search engines find pages easily.

Practice

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

1. 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.

2. 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.

3. Final Answer:

   <h1> -> Option D

4. 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

1. Step 1: Recall correct meta tag syntax for description

   The meta description tag uses name="description" and a content attribute with the description text.

2. 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.

3. Final Answer:

   <meta name="description" content="This is my page"> -> Option C

4. 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?

<section>
  <h2>About Us</h2>
  <article>
    <h3>Our Mission</h3>
  </article>
</section>

medium

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

1. Step 1: Understand semantic tags and heading display

   The <h2> and <h3> tags create visible headings with different sizes and importance.

2. 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.

3. Final Answer:

   A main heading 'About Us' and a subheading 'Our Mission' below it -> Option A

4. 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

1. Step 1: Review correct placement of <h1>

   The <h1> tag is for visible page content and must be inside the <body>, not <head>.

2. 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.

3. Final Answer:

   <h1> should not be inside <head> -> Option B

4. 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

1. 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.

2. 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.

3. Final Answer:

   <article><header><h1>Title</h1></header><section>Content</section><footer>Author and notes</footer></article> -> Option A

4. 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