0
0
HTMLmarkup~20 mins

HTML document structure - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
HTML Structure Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
2:00remaining
Identify the correct root element of an HTML5 document
Which tag is the correct root element that must wrap all other elements in a valid HTML5 document?
A<head>
B<body>
C<html>
D<document>
Attempts:
2 left
💡 Hint
Think about the tag that contains both the <head> and <body> sections.
📝 Syntax
intermediate
2:00remaining
What error occurs if the <head> tag is missing in an HTML document?
Consider this HTML snippet missing the <head> tag. What is the most likely outcome when rendered in a modern browser?
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Hello</h1>
</body>
</html>
AThe browser displays the raw HTML code as text.
BThe page renders normally with the heading visible.
CThe page shows a blank screen with no content.
DThe browser throws a syntax error and stops rendering.
Attempts:
2 left
💡 Hint
Browsers are forgiving and try to display content even if some tags are missing.
❓ rendering
advanced
2:00remaining
What is the visual output of this HTML document?
Given the following HTML code, what will the user see in the browser?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body>
<header>
<h1>Welcome</h1>
</header>
<main>
<p>This is a test.</p>
</main>
<footer>
<p>Footer text</p>
</footer>
</body>
</html>
AA page with a large heading 'Welcome', a paragraph 'This is a test.', and a footer with 'Footer text'.
BOnly the heading 'Welcome' is visible; paragraphs are hidden by default.
CThe page shows the title 'Test Page' but no visible content.
DThe page is blank because the &lt;main&gt; tag is not supported.
Attempts:
2 left
💡 Hint
All semantic tags like <header>, <main>, and <footer> display their content by default.
❓ selector
advanced
2:00remaining
Which CSS selector targets the <main> element inside the <body>?
Given this HTML structure, which CSS selector correctly selects the <main> element? <body> <header></header> <main></main> <footer></footer> </body>
Abody > main
Bmain > body
Cbody main header
Dmain + footer
Attempts:
2 left
💡 Hint
The > symbol means direct child in CSS selectors.
❓ accessibility
expert
2:00remaining
Which attribute improves accessibility by specifying the language of the document?
In an HTML document, which attribute should be added to the root <html> tag to help screen readers and browsers understand the language?
Arole="document"
Bcharset="UTF-8"
Caria-label="English"
Dlang="en"
Attempts:
2 left
💡 Hint
This attribute uses a short code like 'en' for English.