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

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.

beginner

Name three common block-level elements.

Common block-level elements include <div>, <p> (paragraph), and <h1> to <h6> (headings).

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.

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.

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.

Which of the following is a block-level element?

A <div>

B <span>

C <a>

D <img>

is a block-level element that creates a block on the page. , , and are inline elements.

What happens when you use a block-level element in HTML?

A It stays inline with other elements

B It changes the font color automatically

C It disappears from the page

D It starts on a new line and takes full width

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

Which element is NOT block-level?

A <em>

B <h2>

C <ul>

D <p>

is an inline element used for emphasis, not block-level.

Can block-level elements contain other block-level elements?

A Only inline elements can be inside block-level elements

B No, block-level elements cannot contain any elements

C Yes, they can contain other block-level elements

D Block-level elements must be empty

Block-level elements can contain both block-level and inline elements.

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>

A

(block-level) can contain inline elements like . The other options misuse nesting rules.

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.

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.