HTML Block and Inline Elements

Every HTML element has a default way of behaving on the page. Some elements take up the whole row. Others only take up as much space as they need. Understanding this is key to building layouts.

Two Types of Elements: Block and Inline

Every HTML element is either a block element or an inline element. There are no other types. Once you understand this, everything about HTML layout starts to make sense.

Block Level Elements

Block level elements have three main behaviors:

• They always start on a new line.
• They take up the full width available (stretch from left to right).
• Browsers add some space (margin) above and below them automatically.

Examples of block elements: <p>, <h1> to <h6>, <div>, <ul>, <ol>, <li>, and <table>.

See how each element sits on its own line? That is the block behavior. They do not sit next to each other horizontally.

Inline Elements

Inline elements behave differently:

• They do NOT start on a new line.
• They only take up as much width as they need (just their content).
• They can sit next to each other on the same line.

Examples of inline elements: <a>, <span>, <img>, <strong>, <em>, <b>, and <i>.

See how the link, strong text, and span all sit next to each other inside the same line? They do not force new lines. That is inline behavior.

Visual Comparison: Block vs Inline

Here is a clear side by side comparison so you can see the difference:

This is one of the most important concepts in HTML. Block elements stack vertically. Inline elements sit horizontally.

The div Element (Block Level Container)

The <div> tag is a block level element. It is used as a container for other HTML elements. By itself, a div does nothing visible. But when you add CSS, it becomes a powerful tool for grouping and styling content.

Think of a div like a box. You can put other boxes inside it. You can style the whole box at once.

The div has no required attributes, but style, class, and id are very common. You will use divs constantly when building real websites.

The span Element (Inline Container)

The <span> tag is an inline element. It is used to style small parts of text inside a paragraph or heading. Like div, a span does nothing by itself. But with CSS, it is perfect for targeting specific words or phrases.

See how only certain words are styled? That is the power of span. It does not break the line. It just wraps around the text you want to target.

Important Rule: Inline Elements Cannot Contain Block Elements

This is a hard rule in HTML. You cannot put a block element inside an inline element. It will break your layout and cause unexpected behavior.

Wrong (do not do this):

<span>
  <p>This is wrong. A paragraph inside a span is not allowed.</p>
</span>

Correct (do this instead):

<div>
  <p>This is fine. A div can contain a paragraph because both are block elements.</p>
</div>

Think of it like this: inline elements are for small pieces of content inside a line. Block elements are for larger sections. You can put inline inside block. You cannot put block inside inline.

Common Block Elements Reference

Here are many of the block level elements you will use regularly:

Common Inline Elements Reference

Quick Summary

• Block elements start on a new line and take full width.
• Inline elements do not start new lines and only take as much width as needed.
• <div> is a block container. Use it to group large chunks of content.
• <span> is an inline container. Use it to style small pieces of text.
• You can put inline elements inside block elements.
• You CANNOT put block elements inside inline elements.

What Just Happened? Let Me Explain

• Understanding block vs inline is like learning the rules of the road. Once you know it, building layouts becomes much easier.
• Most elements are either block or inline. There are exceptions like flex and grid, but you will learn those later with CSS.
• You can change an element’s display type with CSS. For example, you can make a block element act like an inline element using display: inline;. But start by learning the defaults.
• Divs and spans are the most common containers. You will use them on almost every page you build.

HTML Block and Inline Reference

Here are the main container tags we covered in this chapter: