← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 5 of 26

HTML Block & Inline

Think of HTML elements as playing with building blocks vs strings. Some elements behave like heavy concrete blocks; they are wide, stack on top of each other, and always start on a brand-new row. Other elements behave like decorative strings. They do not need a new line, and they sit neatly side-by-side inside the same line of text. Understanding how these elements interact is the key to layout design. It prevents your text, buttons, and graphics from jumping around unexpectedly on the screen.

In this page:

  1. Understanding Block-Level Elements
  2. Understanding Inline Elements
  3. Valid Nesting Rules
  4. Generic Block Container (div)
  5. Generic Inline Container (span)

Understanding Block-Level Elements

Block-level elements always start on a new line, and the browser automatically adds some spacing before and after them. They take up the entire width of their parent container, stretching all the way from left to right.

Note: Common block elements include main tags like div, p, sections, and headings from h1 to h6.

Warning: Block elements will push any adjacent elements down onto a new line, which can break horizontal inline layouts.

Example: Understanding Block-Level Elements

markup 
<div>Block element one</div>
<div>Block element two, starts on a new line</div>

Understanding Inline Elements

Inline elements do not start on a new line. They only take up as much width as their content needs, allowing multiple inline elements to sit side-by-side within the same line of text.

Note: Common inline elements include span, anchor links (a), strong, em, and images (img).

Warning: You cannot apply vertical margins, padding, width, or height settings to inline elements; the browser will ignore them.

Example: Understanding Inline Elements

markup 
<p><span>Inline</span> <span>elements</span> sit side by side.</p>

Valid Nesting Rules

According to HTML standards, block-level elements can contain other block-level elements and inline elements. However, inline elements can only contain other inline elements; they can never contain block-level elements.

Note: Always wrap inline items inside block containers to keep your code valid and clean.

Warning: Placing a div or heading inside an anchor link or a span tag is invalid HTML and can cause layout bugs.

Example: Valid Nesting Rules

markup 
<div>
  <span>Inline inside block is valid</span>
</div>

Generic Block Container (div)

The div element is a generic, non-semantic block-level container. It does not carry any meaning, but it is highly useful for grouping elements together, applying custom styles, and building web layouts with CSS.

Note: Use div elements to group separate components into logical, styleable container cards.

Warning: Do not overuse div tags when semantic HTML elements like header, footer, or section would describe your layout better.

Example: Generic Block Container (div)

markup 
<div style="border: 1px solid black;">
  A generic container for grouping content
</div>

Generic Inline Container (span)

The span element is a generic, non-semantic inline container. It is used to target specific words or characters inside a sentence or heading to apply custom styles or script behavior without breaking the text flow.

Note: Use the span tag when you want to change the color or style of a single word inside a paragraph.

Warning: Do not use span elements to group block-level content, as it breaks HTML validation.

Example: Generic Inline Container (span)

markup 
<p>Change the color of <span style="color: red;">one word</span> in a sentence.</p>
Common Mistakes
  1. Nesting block-level elements like div or p inside inline elements like span or anchor tags.
  2. Attempting to apply layout width and height adjustments directly to inline elements without changing their CSS display behavior.
  3. Overusing generic div elements for everything instead of semantic tags like header, article, or section.
Chapter Summary
  • Block-level elements start on a new line and stretch to fill the entire width of their parent container.
  • Inline elements sit side-by-side on the same line and only take up as much width as their content needs.
  • Use generic div elements for block-level layout grouping, and generic span elements for inline text-level styling.
Browser Support

Standard HTML block and inline display rules are supported natively by all web browsers.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Other Lists / Description Lists Next Lesson → HTML Comments

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.