HTML Block & Inline Elements

Every HTML element is shown either as a block or inline, and this decides how it sits on the page.

Block Elements

A block element:

• always starts on a new line
• takes the full width available, from left to right
• has some space above and below (for many blocks)

Common block elements: <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <footer>, <section>.

<!DOCTYPE html>
<html>
<body>

<p style="border:1px solid red;">I am a paragraph, a block element.</p>
<div style="border:1px solid blue;">I am a div. I also take the full width.</div>

</body>
</html>

The borders show that each block stretches across the whole page, even though the text is short.

Inline Elements

An inline element:

• does not start on a new line
• takes only as much width as its content

Common inline elements: <span>, <a>, <strong>, <em>, <img>, <br>, <input>, <label>.

<!DOCTYPE html>
<html>
<body>

<p>Price: <span style="border:1px solid green;">Rs 250</span> only, <a href="#">order now</a>.</p>

</body>
</html>

The <span> and <a> stay inside the line of text.

The div Element

<div> is a general container with no special meaning. It is used to group other elements so you can style or position them together.

<!DOCTYPE html>
<html>
<body>

<div style="background-color:#fff3e0; padding:16px; border-radius:8px;">
  <h2>Summer Batch</h2>
  <p>Starts on 1 June. Morning and evening timings.</p>
  <a href="#">Register</a>
</div>

</body>
</html>

Most page layouts are built from <div> boxes, or from semantic tags like <header> and <section>.

The span Element

<span> is the inline version of <div>: an empty container used to style a small part of text.

<!DOCTYPE html>
<html>
<body>

<p>Today's offer: <span style="color:white; background-color:crimson; padding:2px 6px;">50% OFF</span> on all notebooks.</p>

</body>
</html>

Block vs Inline at a Glance

With CSS you can change this behaviour, for example display:inline or display:block. You will learn this in CSS.

Exercise