Block-level elements in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Identify the block-level element

Which of the following HTML elements is block-level by default?

A <div>

B <span>

C <img>

D <a>

💡 Hint

Block-level elements usually start on a new line and take full width.

The <div> element is block-level, meaning it starts on a new line and stretches across the container. <span>, <img>, and <a> are inline elements by default.

📝 Syntax

intermediate

Which code produces a block-level layout?

Given this HTML snippet, which option will make the <section> behave as a block-level element?

HTML

<section style="display: ???">Content</section>

A block

B inline

C inline-block

D none

💡 Hint

Block-level elements take full width and start on a new line.

Setting display to 'block' makes the element block-level. 'inline' and 'inline-block' keep it inline, and 'none' hides it.

❓ rendering

advanced

Visual output of nested block-level elements

What will be the visual layout of this HTML in a browser?

HTML

<div style="background:#cce; padding:1rem;"><p style="background:#eef; margin:0.5rem;">Hello</p><p style="background:#eef; margin:0.5rem;">World</p></div>

A Paragraphs overlapping inside the blue box

B Two paragraphs stacked vertically inside a blue box with spacing around each paragraph

C Two paragraphs side by side inside a blue box with no spacing

D Only one paragraph visible inside the blue box

💡 Hint

Block-level elements stack vertically and respect margin and padding.

The <div> is a block container with padding and background color. The <p> elements are block-level and stack vertically with margin spacing.

❓ selector

advanced

CSS selector for block-level elements

Which CSS selector will select all block-level elements inside a container with id 'content'?

A #content > *:not(span):not(a):not(img)

B #content block

C #content *:block

D #content > div, #content > p, #content > section, #content > article

💡 Hint

There is no CSS pseudo-class for block-level elements; you must list them explicitly.

Option D lists common block-level elements explicitly. Option D excludes some inline elements but is incomplete. Options B and C are invalid selectors.

❓ accessibility

expert

Accessibility impact of block-level elements

Why is it important to use semantic block-level elements like <article> or <section> instead of generic <div> for page structure?

A It automatically changes the font size for better readability

B It improves the page loading speed significantly

C Screen readers can better understand and navigate the page structure

D It prevents users from copying the content

💡 Hint

Think about how assistive technologies interpret page content.

Semantic block-level elements provide meaning to the page structure, helping screen readers and other assistive tools navigate and understand content better. The other options are incorrect or unrelated.

Practice

1. Which of the following is a block-level element in HTML?

easy

A. <img>

B. <span>

C. <div>

D. <a>

Solution

1. Step 1: Understand block-level elements

   Block-level elements start on a new line and take full width.

2. Step 2: Identify the element type

   <div> is a block-level element, while <span>, <img>, and <a> are inline elements.

3. Final Answer:

   <div> -> Option C

4. Quick Check:

   Block-level element = <div> [OK]

Hint: Block elements start new lines and fill width [OK]

Common Mistakes:

• Confusing <span> as block-level
• Thinking <img> is block-level
• Assuming <a> creates a block

2. Which HTML tag correctly represents a block-level element?

easy

A. <header>

B. <img>

C. <button>

D. <label>

Solution

1. Step 1: Recall block-level tags

   Tags like <header> are block-level and create sections.

2. Step 2: Check other tags

   <img>, <button>, and <label> are inline or replaced elements, not block-level.

3. Final Answer:

   <header> -> Option A

4. Quick Check:

   Block-level tag = <header> [OK]

Hint: Headers and sections are block-level [OK]

Common Mistakes:

• Choosing <img> as block-level
• Confusing <button> with block
• Thinking <label> is block-level

3. What will be the visual layout of this HTML snippet?

<div>First</div>
<span>Second</span>
<div>Third</div>

medium

A. First, Second, and Third all on separate lines stacked vertically

B. First and Third on separate lines; Second inline between them

C. All three on the same line horizontally

D. Second on a new line; First and Third inline

Solution

1. Step 1: Identify block and inline elements

   <div> is block-level (new line), <span> is inline (same line).

2. Step 2: Visualize layout

   "First" appears on its own line, "Second" appears inline right after on the same line, then "Third" starts on a new line below.

3. Final Answer:

   First and Third on separate lines; Second inline between them -> Option B

4. Quick Check:

   Block-level breaks line; inline stays inline [OK]

Hint: Div breaks line; span stays inline [OK]

Common Mistakes:

• Thinking span shares line with previous div
• Thinking all elements on same line horizontally
• Thinking Second and Third share a line

4. Find the error in this HTML snippet if the goal is to have each text on its own line:

<span>Line 1</span>
<span>Line 2</span>
<span>Line 3</span>

medium

A. Change <span> to <img>

B. Add <br> after each <span>

C. Wrap all spans inside a <section>

D. Use <div> instead of <span> for block-level lines

Solution

1. Step 1: Understand element behavior

   <span> is inline, so all text appears on the same line.

2. Step 2: Fix for new lines

   Replacing <span> with <div> makes each text block-level, forcing new lines.

3. Final Answer:

   Use <div> instead of <span> for block-level lines -> Option D

4. Quick Check:

   Block-level tags create new lines [OK]

Hint: Span is inline; div is block-level [OK]

Common Mistakes:

• Adding
  unnecessarily
• Wrapping spans without changing tag
• Replacing span with img (wrong tag)

5. You want to create a webpage section with a header, two paragraphs, and a footer. Which HTML structure uses block-level elements correctly?

hard

A. <section><header>Title</header><p>Para 1</p><p>Para 2</p><footer>End</footer></section>

B. <div><span>Title</span><span>Para 1</span><span>Para 2</span><span>End</span></div>

C. <section><div>Title</div><div>Para 1</div><div>Para 2</div><div>End</div></section>

D. <article><header>Title</header><span>Para 1</span><span>Para 2</span><footer>End</footer></article>

Solution

1. Step 1: Check semantic and block-level tags

   <section>, <header>, <p>, and <footer> are all block-level and semantically correct for sections.

2. Step 2: Evaluate other options

   <div><span>Title</span><span>Para 1</span><span>Para 2</span><span>End</span></div> uses inline <span> incorrectly; <section><div>Title</div><div>Para 1</div><div>Para 2</div><div>End</div></section> uses <div> but misses semantic tags; <article><header>Title</header><span>Para 1</span><span>Para 2</span><footer>End</footer></article> mixes block and inline incorrectly.

3. Final Answer:

   <section><header>Title</header><p>Para 1</p><p>Para 2</p><footer>End</footer></section> -> Option A

4. Quick Check:

   Semantic block-level tags structure content [OK]

Hint: Use semantic block tags for sections [OK]

Common Mistakes:

• Using inline tags for paragraphs
• Ignoring semantic meaning
• Mixing inline and block incorrectly