Complete the code to create a basic HTML page structure.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>[1]</title> </head> <body> <h1>Welcome to my website</h1> </body> </html>
The <title> tag sets the page title shown in the browser tab. Here, "My Website" is the correct title text.
Complete the code to add a paragraph inside the body.
<body>
[1]
</body>for paragraphs.
The <p> tag is used to add paragraphs in HTML. It is the correct choice to add a paragraph inside the body.
Fix the error in the code by completing the missing tag.
<html lang="en"> <head> <meta charset="UTF-8"> <title>Page Title</title> </head> [1] <h1>Heading</h1> </body> </html>
The <body> tag is missing and is needed to wrap the visible content of the page.
Fill both blanks to create a link that opens in a new tab.
<a href="[1]" [2]>Visit OpenAI</a>
The href attribute sets the link URL. The target="_blank" attribute makes the link open in a new tab.
Fill all three blanks to create an accessible image with alternative text.
<img src="[1]" alt="[2]" width="[3]">
The src attribute points to the image file. The alt attribute provides descriptive text for screen readers. The width sets the image width in pixels.
Practice
Solution
Step 1: Understand HTML's purpose
HTML is used to build the basic structure and content of a webpage, like headings, paragraphs, and images.Step 2: Differentiate from other technologies
Styling is done by CSS, interactivity by JavaScript, and data storage by databases, not HTML.Final Answer:
To create the structure and content of web pages -> Option AQuick Check:
HTML = structure and content [OK]
- Confusing HTML with CSS or JavaScript
- Thinking HTML stores data
- Believing HTML adds interactivity
Solution
Step 1: Identify standard HTML tags
The root tag for an HTML document is <html>, with <head> and <body> inside it.Step 2: Check tag correctness
<html><head><title>Page</title></head><body></body></html> uses correct tags: <html>, <head>, <title>, and <body>. Others use invalid tags like <document>, <page>, or <header> instead of <head>.Final Answer:
<html><head><title>Page</title></head><body></body></html> -> Option DQuick Check:
HTML document starts with <html> and <head> [OK]
- Using non-standard root tags like <document>
- Confusing <head> with <header>
- Missing <body> tag
<h1>Welcome</h1> <p>This is a paragraph.</p> <img src='image.jpg' alt='Sample Image'>
Solution
Step 1: Understand HTML tags used
The <h1> tag creates a large heading, <p> creates a paragraph, and <img> inserts an image with alt text.Step 2: Check <img> tag syntax
The <img> tag is self-closing in HTML5 and does not require a closing tag. The alt attribute provides alternative text if image fails to load.Final Answer:
A heading 'Welcome', a paragraph 'This is a paragraph.', and an image with alt text 'Sample Image' -> Option AQuick Check:
HTML renders headings, paragraphs, and images correctly [OK]
- Thinking <img> needs a closing tag
- Assuming image won't show without closing tag
- Ignoring alt attribute purpose
<html> <head> <title>My Page</title> </head> <body> <h1>Hello World</h2> </body> </html>
Solution
Step 1: Check heading tags
The opening tag is <h1> but the closing tag is </h2>, which is mismatched and invalid.Step 2: Verify other tags
The <title>, <body>, and <html> tags are correctly opened and closed.Final Answer:
The closing tag for the heading is incorrect -> Option BQuick Check:
Matching tags must have same number (h1 with /h1) [OK]
- Mismatching heading tags like <h1> with
- Forgetting to close <body> or <html>
- Misspelling tag names
Solution
Step 1: Check semantic tags and link usage
Using <header> and <h1> is correct for the page header. The <a> tag must have an href attribute to link properly.Step 2: Verify accessibility features
<header><h1>Welcome</h1></header><p>Click <a href='page2.html' aria-label='Go to page 2'>here</a> to go to page 2.</p> adds an aria-label to the link, which helps screen readers describe the link purpose clearly, improving accessibility.Final Answer:
<header><h1>Welcome</h1></header><p>Click <a href='page2.html' aria-label='Go to page 2'>here</a> to go to page 2.</p> -> Option CQuick Check:
Use semantic tags and aria-label for accessibility [OK]
- Missing href in <a> tag
- Using alt attribute on <a> instead of aria-label
- Not using semantic <header> tag
Ready to prove it?
Pass the test and this pattern moves unknown
