HTML Block and Inline Elements

Every HTML element has a default display value, depending on what type of element it is.

All the HTML elements can be categorized into two categories:

• Block Level Elements.
• Inline Elements.

Block-level Elements

Block elements appear on the screen as if they have a line break before and after them.

Example

<div>Hello World!</div>

Try this code ❯

This are the block-level elements in HTML:

• <address>
• <article>
• <aside>
• <blockquote>
• <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>

Note: All start on their own new line, and anything that follows them appears on its own new line.

Inline Elements

Inline elements appear within sentences and do not have to appear on a new line of their own.

An inline element only takes up as much width as necessary.

Example

<span>Hello World!</span>

Try this code ❯

This are the inline elements in HTML:

• <a>
• <abbr>
• <acronym>
• <b>
• <bdo>
• <big>
• <br>
• <button>
• <cite>
• <code>
• <dfn>
• <em>
• <i>
• <img>
• <input>
• <kbd>
• <label>
• <map>
• <object>
• <output>
• <q>
• <samp>
• <script>
• <select>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <textarea>
• <time>
• <tt>
• <var>

Note: An inline element cannot contain a block-level element!

The <div> Element

The <div> element indicates a generic block of content that should be treated as a unit for scripting or styling purposes.

Example

<div>
  <h2>This is a heading</h2>
  <p>This is a paragraph.</p>
</div>

Try this code ❯

By default, browsers always place a line break before and after the

<p>This is <span style="color: red;">span</span> text</p>