Bird
Raised Fist0
HTMLmarkup~5 mins

Block-level elements in HTML - Cheat Sheet & Quick Revision

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Recall & Review
beginner
What is a block-level element in HTML?
A block-level element is an HTML element that starts on a new line and takes up the full width available. It creates a 'block' of content that stacks vertically.
Click to reveal answer
beginner
Name three common block-level elements.
Common block-level elements include <div>, <p> (paragraph), and <h1> to <h6> (headings).
Click to reveal answer
beginner
How do block-level elements differ from inline elements?
Block-level elements start on a new line and take full width. Inline elements stay within the line and only take as much width as needed.
Click to reveal answer
intermediate
Can block-level elements contain inline elements?
Yes, block-level elements can contain inline elements like <span>, <a>, or <strong>. This helps structure content inside blocks.
Click to reveal answer
intermediate
Why are block-level elements important for page layout?
Block-level elements help organize content vertically and create sections. They make it easier to control spacing, alignment, and structure on a webpage.
Click to reveal answer
Which of the following is a block-level element?
A<div>
B<span>
C<a>
D<img>
What happens when you use a block-level element in HTML?
AIt stays inline with other elements
BIt changes the font color automatically
CIt disappears from the page
DIt starts on a new line and takes full width
Which element is NOT block-level?
A<em>
B<h2>
C<ul>
D<p>
Can block-level elements contain other block-level elements?
AOnly inline elements can be inside block-level elements
BNo, block-level elements cannot contain any elements
CYes, they can contain other block-level elements
DBlock-level elements must be empty
Which of these is a correct use of block-level elements?
A<img><p>Image</p>
B<p><span>Text</span></p>
C<a><div>Link</div></a>
D<span><p>Text</p></span>
Explain what a block-level element is and how it affects the layout of a webpage.
Think about how paragraphs or sections appear on a page.
You got /4 concepts.
    List some common block-level elements and describe a situation where you would use each.
    Consider how you organize text and sections on a webpage.
    You got /4 concepts.

      Practice

      (1/5)
      2. Which HTML tag correctly represents a block-level element?
      easy

      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

      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

      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

      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