HTML Blocks - Dofactory

HTML Blocks HTML Lists HTML Paragraphs

A block-level element 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.

Example

#

This example has 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> Try it live

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:

• address>
• <article>
• <aside>
• <blockqoute>
• <canvas>
• <dd>
• <div>
• <dl>

• <dt>
• <fieldset>
• <figcaption>
• <figure>
• <footer>
• <form>
• <h1>-<h6>
• <header>

• <hr>
• <li>
• <main>
• <nav>
• <noscript>
• <ol>
• <p>
• <pre>

• <section>
• <table>
• <tfoot>
• <ul>
• <video>

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> Try it live

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:

• <a>
• <abbr>
• <b>
• <br>
• <button>
• <cite>
• <code>

• <em>
• <i>
• <img>
• <input>
• <kbd>
• <label>
• <map>

• <object>
• <output>
• <q>
• <script>
• <select>
• <small>
• <span>

• <strong>
• <sub>
• <sup>
• <textarea>
• <time>

HTML Lists HTML Paragraphs

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> Try it live

For details on the <div> tag, see our HTML div tag reference.

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> Try it live

For details on the <span> tag, see our HTML span tag reference.

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> Try it live

You may also like

#

• Our HTML div Tag Reference
• Our HTML span Tag Reference
• Our CSS display Property Guide

HTML Lists HTML Paragraphs