0
0
HTMLmarkup~10 mins

Clean HTML structure - Interactive Code Practice

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to add the language attribute to the HTML tag.

HTML
<!DOCTYPE html>
<html [1]>
  <head>
    <meta charset="UTF-8">
    <title>My Page</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>
Drag options to blanks, or click blank then click option'
Alanguage="en"
Blang="en"
Clang=en
Dlang='english'
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'language' instead of 'lang'.
Not using quotes around the language code.
2fill in blank
medium

Complete the code to add a viewport meta tag for responsive design.

HTML
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="[1]">
  <title>Responsive Page</title>
</head>
Drag options to blanks, or click blank then click option'
Awidth=device-width, initial-scale=1.0
Bwidth=screen, scale=1
Cdevice-width=width, scale=1.0
Dwidth=device-width, scale=2
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'width=screen' instead of 'width=device-width'.
Using 'scale' instead of 'initial-scale'.
3fill in blank
hard

Fix the error in the HTML structure by completing the missing closing tag.

HTML
<header>
  <h1>Welcome to my site</h1>
[1]
<main>
  <p>Content goes here.</p>
</main>
Drag options to blanks, or click blank then click option'
A</header>
B</head>
C</footer>
D</div>
Attempts:
3 left
💡 Hint
Common Mistakes
Closing with the wrong tag like or .
Forgetting to close the header tag.
4fill in blank
hard

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

HTML
<[1]>
  <[2]>About Us</[2]>
  <p>We build websites.</p>
</[1]>
Drag options to blanks, or click blank then click option'
Asection
Bdiv
Ch2
Dh1
Attempts:
3 left
💡 Hint
Common Mistakes
Using div instead of section.
Using h1 inside a section when a lower heading is better.
5fill in blank
hard

Fill all three blanks to create a footer with a paragraph and a link.

HTML
<footer>
  <p>[1]</p>
  <a href="[2]" aria-label="[3]">Contact us</a>
</footer>
Drag options to blanks, or click blank then click option'
A© 2024 My Website
Bmailto:contact@mywebsite.com
CEmail contact
D© 2023 My Website
Attempts:
3 left
💡 Hint
Common Mistakes
Using the wrong year in the copyright.
Missing the aria-label for the link.