0
0
HTMLmarkup~10 mins

SEO-friendly HTML - Interactive Code Practice

Choose your learning style9 modes available
Practice - 5 Tasks
Answer the questions below
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.
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.
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.
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.
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.