HTML Blocks

A block-level element in HTML starts on a new line, and anything that follows also appears on a new line.  Think of a block as having an implicit <br /> (line break) before and after the element.

HTML Tutorial

Example

Three 'block-level' <div> elements.  Notice the following:

  1. They appear on separate lines without explicit line breaks (<br />).
  2. They fill the entire horizontal width.

This is a block level element.
This is another a block level element.
And this is yet another a block level element.
<style>
  .ghost { background: ghostwhite; margin: 10px; padding: 10px; }
</style>

<main>
  <div class="ghost">This is a block level element.</div>
  <div class="ghost">This is another a block level element.</div>
  <div class="ghost">And this is yet another a block level element.</div>
</main>

Using block-level elements

In HTML, the flow of page elements is determined by block and inline level elements.

This distinction is important for front-end developers to be able to compose the pages correctly.

<div> is an example block-level element.  <span> is an inline-level element


HTML block elements

#

<div> is just one example of a block element in HTML.
Many other elements display in-block by default. Here's the complete list:


Using inline elements

If an element is not in-block, then it must be inline.

Inline elements appear on the same line.

<span> is an inline element.

Three <span> elements that are inline.
Notice they appear on the same line -- until there is no room, then they wrap.

This is an inline element. This is another inline element. And this is yet another inline element.
<span>This is an inline element.</span>
<span>This is another inline element.</span>
<span>And this is yet another inline element.</span>


HTML Inline elements

#

<span> is just one example of an inline element in HTML.
Many other elements display inline by default. Here's the complete list:

The <div> tag

The <div> tag is often used to create layouts with different areas on a page.
This tag is also used to group HTML elements and apply CSS styles to the group.

A block-level <div> element.

Order Received

You will receive your tickets to the Louvre by email.

<div style="background-color:ghostwhite; padding: 20px;border:1px dotted steelblue;">  
  <h5>Order Received</h5>
  <p>You will receive your tickets to the Louvre by email.</p>
</div>

For more information about the <div> tag, see our HTML div Reference Guide.


The <span> tag

The <span> tag is used to group page content, often text, which can then be styled with CSS.

An inline <span> element with the word 'cancelled'.

Sorry, your order #42291 has been cancelled.

<p>
  Sorry, your order #42291 has been <span style="color:orangered;">cancelled</span>.
</p>

For more information about the <span> tag, see our HTML span Reference Guide.


Did you know?

Did you know?

Any element can be 'in-block' or 'inline'

With CSS any HTML element can be displayed 'in-block' or 'inline'.

Even block-level elements can be displayed as inline and vice versa.

The CSS display property let you select the display mode.

Here are 3 <span> elements that are displayed in-block using the CSS display:block setting. Effectively, they have turned into <div> elements.

This span is displayed as a block-level element. This span is displayed as a block-level element. This span is displayed as a block-level element.
<style>
  .block {display:block;background:ghostwhite;padding:10px;margin:10px;}
</style>

<span class="block">This span is displayed as a block-level element.</span>
<span class="block">This span is displayed as a block-level element.</span>
<span class="block">This span is displayed as a block-level element.</span>

You may also like

Guides