Clean HTML structure - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Identify the semantic element for main content

Which HTML5 semantic element is best used to wrap the main content of a webpage for better structure and accessibility?

A <section>

B <main>

C <div>

D <article>

💡 Hint

Think about the element that clearly defines the primary content of the page.

is the semantic element specifically designed to wrap the main content of a webpage. It helps screen readers and search engines understand the primary content area.

📝 Syntax

intermediate

Find the error in this HTML snippet

What is wrong with this HTML snippet?

<header>
  <h1>Welcome</h1>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
    </ul>
  </nav>
</header>

A The first &lt;li&gt; tag is not closed properly.

B The &lt;ul&gt; tag is missing a closing tag.

C The &lt;nav&gt; element cannot be inside &lt;header&gt;.

D The &lt;h1&gt; tag should be inside &lt;nav&gt;.

💡 Hint

Check if all tags have matching closing tags.

The first <li> tag is missing its closing tag </li>, which breaks the list structure.

❓ rendering

advanced

What will the browser display?

Given this HTML code:

<section>
  <h2>Title</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</section>

What will the browser show visually?

A Paragraphs will appear before the heading.

B Two headings 'Title' and 'Paragraph 1' with one paragraph 'Paragraph 2'.

C Only the heading 'Title' will display; paragraphs are hidden by default.

D A heading 'Title' followed by two separate paragraphs stacked vertically.

💡 Hint

Think about default block-level elements and their order.

The <h2> and <p> tags are block elements and display in order, so the heading appears first, then the two paragraphs stacked below.

❓ selector

advanced

CSS selector for all direct children

Which CSS selector targets only the direct child <article> elements inside a <main> element?

A main > article

B main article

C main + article

D main ~ article

💡 Hint

The '>' symbol means direct child in CSS selectors.

'main > article' selects only <article> elements that are immediate children of <main>, not deeper descendants.

❓ accessibility

expert

Best practice for accessible navigation landmarks

Which is the best way to make a navigation menu accessible and clearly identified by screen readers?

A Use a &lt;section&gt; element with a heading but no ARIA labels.

B Use a &lt;div&gt; with a class 'nav' and no ARIA attributes.

C Use a &lt;nav&gt; element with an aria-label describing the menu purpose.

D Use a &lt;nav&gt; element but hide it visually with CSS.

💡 Hint

Screen readers rely on landmarks and labels to identify page regions.

Using the semantic <nav> element combined with an aria-label helps screen readers understand the navigation's purpose clearly.