HTML Block and Inline Elements

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

The two most common display values are block and inline.

Block-level Elements

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

The <p> element is a block-level element.

The <div> element is a block-level element.
 <p>Hello World</p>
<div>Hello World</div>

Here are the block-level elements in HTML :

  1. <address>
  2. <article>
  3. <aside>
  4. <blockquote>
  5. <canvas>
  6. <dd>
  7. <div>
  8. <dl>
  9. <dt>
  10. <fieldset>
  11. <figcaption>
  12. <figure>
  13. <footer>
  14. <form>
  15. <h1>
  16. -<h6>
  17. <header>
  18. <hr>
  19. <li>
  20. <main>
  21. <nav>
  22. <noscript>
  23. <ol>
  24. <p>
  25. <pre>
  26. <section>
  27. <table>
  28. <tfoot>
  29. <ul>
  30. <video>

Inline Elements

An inline element does not start on a new line.

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

This is a <span> element inside a paragraph.

<span>Hello World</span>

Here are the inline elements in HTML :

  1. <ol>
  2. <a>
  3. <abbr>
  4. <acronym>
  5. <b>
  6. <bdo>
  7. <big>
  8. <br>
  9. <button>
  10. <cite>
  11. <code>
  12. <dfn>
  13. <em>
  14. <i>
  15. <img>
  16. <input>
  17. <kbd>
  18. <label>
  19. <map>
  20. <object>
  21. <output>
  22. <q>
  23. <samp>
  24. <script>
  25. <select>
  26. <small>
  27. <span>
  28. <strong>
  29. <sub>
  30. <sup>
  31. <textarea>
  32. <time>
  33. <tt>
  34. <var>
  35. </ol>

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

The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content :

 <div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

The <span> Element

The <span> element is an inline container used to mark up a part of a text, or a part of a document.

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text:

<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>