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.