0
0
HTMLmarkup~20 mins

HTML validation tools - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
HTML Validation Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
1:30remaining
What is the main purpose of HTML validation tools?

HTML validation tools help web developers by:

AAdding interactive animations to HTML elements
BAutomatically fixing all design issues on a webpage
CImproving the speed of a website by compressing images
DChecking if the HTML code follows web standards and is free of syntax errors
Attempts:
2 left
💡 Hint

Think about what 'validation' means in the context of code.

📝 Syntax
intermediate
2:00remaining
What error will the W3C validator report for this HTML snippet?
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
</head>
<body>
  <h1>Welcome</h1>
</body>
</html>
AMismatched tag: &lt;h1&gt; opened but &lt;/h2&gt; closed
BMissing &lt;html&gt; tag
CNo errors found
DMissing &lt;head&gt; tag
Attempts:
2 left
💡 Hint

Check if all opening tags have matching closing tags.

❓ rendering
advanced
2:00remaining
What will the browser display for this invalid HTML code?
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Page</title>
</head>
<body>
  <p>Hello<p>World</p>
</body>
</html>
AHello in one paragraph and World in a separate paragraph
BHelloWorld on one line as a single paragraph
COnly Hello displayed, World ignored
DSyntax error message shown in browser
Attempts:
2 left
💡 Hint

Browsers try to fix invalid HTML by closing tags automatically.

❓ selector
advanced
2:00remaining
Which CSS selector is invalid and will cause a validation error?

Consider these CSS selectors:

.container > .item:first-child, #main::before, div > > p, a[href^="https"]
A.container &gt; .item:first-child
B#main::before
Cdiv &gt; &gt; p
Da[href^="https"]
Attempts:
2 left
💡 Hint

Look for invalid combinators or syntax in selectors.

❓ accessibility
expert
2:30remaining
Which HTML snippet will fail accessibility validation due to missing ARIA roles or labels?

Choose the snippet that is missing important accessibility attributes:

1. <nav aria-label="Main navigation"></nav>
2. <button>Submit</button>
3. <div role="button" tabindex="0">Click me</div>
4. <img src="logo.png" alt="">
A2
B4
C3
D1
Attempts:
2 left
💡 Hint

Think about what is required for images to be accessible.