Understanding Block vs Inline Elements

<

>Block Elements>

Block elements are HTML elements that start on a new line and take up the full width available. They create a "block" of content and stack vertically on the page.

This is a block element (div). Notice how it takes up the full width and creates a new line.
This is another block element. See how it starts on a new line?

<

>Inline Elements>

Inline elements flow within the text content without breaking the line. They only take up as much width as necessary.

Here's an example with inline elements: This span and this span stay on the same line because they're inline elements.

<

>Comparison of Block and Inline Elements>

Here's how block and inline elements differ in behavior and usage:

Block Elements Examples:

1. <div> - Container division
2. <p> - Paragraph
3. <h1> to <h6> - Headings
4. <section> - Section container
5. <article> - Article container

Inline Elements Examples:

1. <span> - Generic inline container
2. <a> - Hyperlink
3. <strong> - Bold text
4. <em> - Emphasized text
5. <img> - Image

Live Block Elements:

Paragraph block

Heading block

  • List block
Blockquote block
Div block

Live Inline Elements:

This text has span and link and strong and emphasis and tiny placeholder (image) elements.