Block-level elements in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a block-level heading.

HTML

<[1]>Welcome to my website</[1]>

Drag options to blanks, or click blank then click option'

Ah1

Bimg

Ca

Dspan

Attempts:

3 left

💡 Hint

Common Mistakes

Using inline elements like span or a for headings.

The h1 tag is a block-level element used for main headings.

2fill in blank

medium

Complete the code to create a paragraph block.

HTML

<[1]>This is a paragraph of text.</[1]>

Drag options to blanks, or click blank then click option'

Adiv

Bimg

Cstrong

Dp

Attempts:

3 left

💡 Hint

Common Mistakes

Using inline tags like strong or img for paragraphs.

The p tag defines a paragraph and is block-level.

3fill in blank

hard

Fix the error in the code to properly create a block-level section.

HTML

<[1]> <h2>About Us</h2> <p>We build websites.</p> </[1]>

Drag options to blanks, or click blank then click option'

Aa

Bsection

Cspan

Dimg

Attempts:

3 left

💡 Hint

Common Mistakes

Using inline elements like span which do not group blocks.

The section tag is a block-level element used to group related content.

4fill in blank

hard

Fill both blanks to create a block-level container with a heading.

HTML

<[1]> <[2]>Contact Us</[2]> </[1]>

Drag options to blanks, or click blank then click option'

Adiv

Bspan

Ch3

Da

Attempts:

3 left

💡 Hint

Common Mistakes

Using inline tags like span or a for block containers or headings.

The div tag is a block-level container, and h3 is a block-level heading.

5fill in blank

hard

Fill all three blanks to create a block-level article with a heading and paragraph.

HTML

<[1]> <[2]>Our Story</[2]> <[3]>We started in 2020.</[3]> </[1]>

Drag options to blanks, or click blank then click option'

Aarticle

Bh2

Cp

Dspan

Attempts:

3 left

💡 Hint

Common Mistakes

Using inline tags like span instead of block-level tags.

The article tag is a block-level container for independent content, h2 is a heading, and p is a paragraph.

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