Role of HTML in web development - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the primary role of HTML in web development?

Choose the option that best describes what HTML does in building a website.

A It styles the colors and fonts of the webpage.

B It adds interactive behavior like clicks and animations.

C It structures the content and elements on a webpage.

D It stores data on the server for the website.

💡 Hint

Think about what you see on a webpage before any colors or actions happen.

HTML is the backbone of a webpage. It organizes text, images, links, and other elements so browsers know what to show and where.

CSS handles styling, JavaScript handles behavior, and servers handle data storage.

📝 Syntax

intermediate

Identify the correct HTML element for a main heading

Which HTML tag is used to define the most important heading on a webpage?

A <header>

B <h1>

C <title>

D <head>

💡 Hint

This tag is used to show the biggest heading text on the page.

The <h1> tag defines the main heading. The <head> contains metadata, <header> is a section container, and <title> sets the page title in the browser tab.

❓ rendering

advanced

What will this HTML snippet display in the browser?

Look at the code and choose what the user will see when this runs in a browser.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test Page</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is a <strong>simple</strong> page.</p>
</body>
</html>

A A page showing the HTML code as text instead of rendering it.

B A blank page with only the title 'Test Page' shown in the browser tab.

C An error message because the <strong> tag is not closed.

D A page with a big heading 'Welcome' and a paragraph saying 'This is a simple page.' with 'simple' in bold.

💡 Hint

Think about how browsers show headings, paragraphs, and bold text.

The <h1> tag creates a large heading. The <p> tag creates a paragraph. The <strong> tag makes text bold. The code is valid and will render as described.

❓ selector

advanced

Which HTML element is best for grouping navigation links?

Choose the semantic HTML element that is most appropriate to wrap a website's navigation links.

A <nav>

B <section>

C <article>

D <div>

💡 Hint

This element is specifically designed for navigation areas.

The <nav> element is used to group navigation links. <section> is for thematic grouping, <div> is a generic container, and <article> is for self-contained content.

❓ accessibility

expert

Which attribute improves accessibility by describing the purpose of an image?

Select the HTML attribute that helps screen readers understand what an image shows.

A alt

B title

C src

D href

💡 Hint

This attribute provides alternative text for images.

The alt attribute gives a text description of an image for screen readers and when images fail to load. title shows a tooltip, src is the image source URL, and href is for links.

Practice

1. What is the main role of HTML in web development?

easy

A. To create the structure and content of web pages

B. To style the appearance of web pages

C. To add interactivity to web pages

D. To store data in databases

Solution

1. Step 1: Understand HTML's purpose

   HTML is used to build the basic structure and content of a webpage, like headings, paragraphs, and images.

2. Step 2: Differentiate from other technologies

   Styling is done by CSS, interactivity by JavaScript, and data storage by databases, not HTML.

3. Final Answer:

   To create the structure and content of web pages -> Option A

4. Quick Check:

   HTML = structure and content [OK]

Hint: HTML builds page structure, not style or behavior [OK]

Common Mistakes:

• Confusing HTML with CSS or JavaScript
• Thinking HTML stores data
• Believing HTML adds interactivity

2. Which of the following is the correct way to start an HTML document?

easy

A. Page

B. Page

C. Page

D. Page

Solution

1. Step 1: Identify standard HTML tags

   The root tag for an HTML document is <html>, with <head> and <body> inside it.

2. 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>.

3. Final Answer:

   <html><head><title>Page</title></head><body></body></html> -> Option D

4. Quick Check:

   HTML document starts with <html> and <head> [OK]

Hint: HTML documents start with <html>, not <document> or <page> [OK]

Common Mistakes:

• Using non-standard root tags like <document>
• Confusing <head> with <header>
• Missing <body> tag

3. What will the browser display when rendering this HTML snippet?

<h1>Welcome</h1>
<p>This is a paragraph.</p>
<img src='image.jpg' alt='Sample Image'>

medium

A. A heading 'Welcome', a paragraph 'This is a paragraph.', and an image with alt text 'Sample Image'

B. Only the text 'Welcome' and 'This is a paragraph.' without any image

C. An error message because <img> tag is not closed

D. A heading and paragraph but the image will show broken link icon

Solution

1. 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.

2. 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.

3. Final Answer:

   A heading 'Welcome', a paragraph 'This is a paragraph.', and an image with alt text 'Sample Image' -> Option A

4. Quick Check:

   HTML renders headings, paragraphs, and images correctly [OK]

Hint: Remember <img> is self-closing and shows alt text if image missing [OK]

Common Mistakes:

• Thinking <img> needs a closing tag
• Assuming image won't show without closing tag
• Ignoring alt attribute purpose

4. Identify the error in this HTML snippet:

<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h2>
</body>
</html>

medium

A. The <body> tag is not closed

B. The closing tag for the heading is incorrect

C. The <title> tag is missing

D. The <html> tag is misspelled

Solution

1. Step 1: Check heading tags

   The opening tag is <h1> but the closing tag is </h2>, which is mismatched and invalid.

2. Step 2: Verify other tags

   The <title>, <body>, and <html> tags are correctly opened and closed.

3. Final Answer:

   The closing tag for the heading is incorrect -> Option B

4. Quick Check:

   Matching tags must have same number (h1 with /h1) [OK]

Hint: Opening and closing tags must match exactly [OK]

Common Mistakes:

• Mismatching heading tags like <h1> with
• Forgetting to close <body> or <html>
• Misspelling tag names

5. You want to create a simple webpage with a header, a paragraph, and a link to another page. Which HTML structure correctly achieves this while ensuring accessibility?

hard

A. WelcomeClick here to go to page 2.

B. WelcomeClick here to go to page 2.

C. WelcomeClick here to go to page 2.

D. WelcomeClick here to go to page 2.

Solution

1. 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.

2. 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.

3. 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 C

4. Quick Check:

   Use semantic tags and aria-label for accessibility [OK]

Hint: Use semantic tags and aria-label for accessible links [OK]

Common Mistakes:

• Missing href in <a> tag
• Using alt attribute on <a> instead of aria-label
• Not using semantic <header> tag