Look at this HTML code. What text will you see on the page when opened in a browser?
HTML
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>My Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is my first page.</p>
</body>
</html>
AA big heading saying 'Welcome to my website' and a paragraph saying 'This is my first page.'
BOnly the title 'My Page' shown on the page
CA blank page with no text
DAn error message because the HTML is missing the <header> tag
Attempts:
2 left
💡 Hint
Remember that text inside
and
tags inside the
shows on the page.
✗ Incorrect
The
and
tags inside the
contain the visible text. The shows in the browser tab, not on the page itself.
📝 Syntax
intermediate
2:00remaining
Which line fixes the missing closing tag error?
This HTML code is missing a closing tag. Which option correctly fixes it?
Roles describe the purpose of elements to assistive technologies.
✗ Incorrect
Adding role="navigation" explicitly tells screen readers this is a navigation section. aria-hidden hides content from screen readers, tabindex affects keyboard focus, and alt is for images.
Practice
(1/5)
1. What is the purpose of the <!DOCTYPE html> declaration at the start of an HTML page?
easy
A. It tells the browser to use the latest HTML standard.
B. It adds a visible title to the page.
C. It creates a link to an external CSS file.
D. It inserts an image into the page.
Solution
Step 1: Understand the role of <!DOCTYPE html>
This declaration tells the browser which version of HTML to use when rendering the page.
Step 2: Identify the correct purpose
The <!DOCTYPE html> specifically signals the browser to use the latest HTML standard (HTML5).
Final Answer:
It tells the browser to use the latest HTML standard. -> Option A
Quick Check:
DOCTYPE = browser standard [OK]
Hint: DOCTYPE always sets HTML version for the browser [OK]
Common Mistakes:
Thinking DOCTYPE adds visible content
Confusing DOCTYPE with CSS or images
Skipping DOCTYPE and causing rendering issues
2. Which of the following is the correct basic structure of an HTML page?
easy
A.
B.
C.
D. <html>
Solution
Step 1: Check the order of tags
The correct HTML page starts with <!DOCTYPE html>, then <html>, inside it <head> and <body>, and ends with </html>.
Step 2: Match the correct option
<!DOCTYPE html><html><head></head><body></body></html> follows this correct order and nesting of tags.
Final Answer:
<!DOCTYPE html><html><head></head><body></body></html> -> Option C
Quick Check:
DOCTYPE, html, head, body order [OK]
Hint: Remember: DOCTYPE, html, head, then body [OK]
Common Mistakes:
Placing <head> inside <body>
Missing DOCTYPE declaration
Incorrect tag nesting order
3. What will the browser display when rendering this HTML code?
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my first page.</p>
</body>
</html>
medium
A. A page with a big heading 'Welcome' and a paragraph 'This is my first page.'
B. Only the title 'My Page' is shown on the page body.
C. The page shows the code as text on the screen.
D. The page is blank with no visible content.
Solution
Step 1: Identify visible content tags
The <h1> and <p> tags inside <body> define visible content on the page.
Step 2: Understand title vs body content
The <title> sets the browser tab name, not page body content.
Final Answer:
A page with a big heading 'Welcome' and a paragraph 'This is my first page.' -> Option A
Quick Check:
Body tags show content, title shows tab name [OK]
Hint: Content inside <body> shows on page, title shows in tab [OK]
The heading starts with <h1> but closes with </h2>, which is a mismatch.
Step 2: Confirm other tags are correct
The <title>, <body>, and <p> tags are properly opened and closed.
Final Answer:
The closing tag for the heading is incorrect. -> Option D
Quick Check:
Matching tags must open and close the same [OK]
Hint: Opening and closing tags must match exactly [OK]
Common Mistakes:
Closing tags with wrong numbers (h1 vs h2)
Forgetting to close body or head tags
Misusing self-closing tags for paragraphs
5. You want to create a simple HTML page with a header, a navigation menu, main content, and a footer. Which semantic tags should you use to organize these parts correctly?
hard
A. <head>, <menu>, <section>, <bottom>
B. <header>, <nav>, <main>, <footer>
C. <header>, <sidebar>, <article>, <footer>
D. <top>, <nav>, <content>, <footer>
Solution
Step 1: Identify semantic tags for page sections
The standard semantic tags for page layout are <header> for the top section, <nav> for navigation menus, <main> for main content, and <footer> for the bottom section.
Step 2: Compare options to correct tags
<header>, <nav>, <main>, <footer> lists all correct semantic tags for these parts. Other options use incorrect or non-standard tags.
Final Answer:
<header>, <nav>, <main>, <footer> -> Option B
Quick Check:
Use semantic tags for clear page structure [OK]
Hint: Use header, nav, main, footer for page sections [OK]
Common Mistakes:
Using non-existent tags like <top> or <bottom>
Confusing <head> with visible header
Using <menu> instead of <nav>
Recommended
Ready to prove it?
Pass the test and this pattern moves unknownstrongwhile earning +1 Grip toward your certificate.