0
0
HTMLmarkup~10 mins

Common HTML mistakes - 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 correct 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'
Alang='english'
Blanguage="en"
Clang=en
Dlang="en"
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'language' instead of 'lang' attribute.
Not using quotes around the attribute value.
Using full language name instead of code.
2fill in blank
medium

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

HTML
<head>
  <meta charset="UTF-8">
  <meta [1]>
  <title>Responsive Page</title>
</head>
Drag options to blanks, or click blank then click option'
Aname=viewport content=width=device-width, initial-scale=1.0
Bviewport="width=device-width, initial-scale=1.0"
Cname="viewport" content="width=device-width, initial-scale=1.0"
Dname="view-port" content="width=device-width, initial-scale=1.0"
Attempts:
3 left
💡 Hint
Common Mistakes
Misspelling 'viewport' as 'view-port'.
Omitting quotes around attribute values.
Using incorrect attribute names.
3fill in blank
hard

Fix the error in the image tag by completing the missing attribute.

HTML
<img src="photo.jpg" [1]>
Drag options to blanks, or click blank then click option'
Atitle="A beautiful scenery"
Balt="A beautiful scenery"
Ccaption="A beautiful scenery"
Ddescription="A beautiful scenery"
Attempts:
3 left
💡 Hint
Common Mistakes
Using title instead of alt for accessibility.
Omitting the alt attribute entirely.
Using non-standard attributes like 'caption' or 'description'.
4fill in blank
hard

Fill both blanks to create a correct link that opens in a new tab safely.

HTML
<a href=[1] target=[2]>Visit Site</a>
Drag options to blanks, or click blank then click option'
A"https://example.com"
B"_blank"
C"_self"
D"noopener noreferrer"
Attempts:
3 left
💡 Hint
Common Mistakes
Not quoting the URL in href.
Using _self instead of _blank for new tab.
Forgetting to add rel attributes for security (not asked here).
5fill in blank
hard

Fill all three blanks to create a correct unordered list with three items.

HTML
<ul>
  <li>[1]</li>
  <li>[2]</li>
  <li>[3]</li>
</ul>
Drag options to blanks, or click blank then click option'
AApple
BBanana
CCherry
DOrange
Attempts:
3 left
💡 Hint
Common Mistakes
Using <ol> instead of <ul> for unordered list.
Putting multiple items inside one <li> tag.
Forgetting to close <li> tags.