• Tutorial List

HTML Block and Inline Elements

Last updated Jul 08, 2020
HTML Block and Inline Elements

You have to know first

  1. By default, there are three display values in HTML – 1) Block, 2) Inline, 3) none.
  2. Each HTML element has a default display value (either block or inline or none).
  3. Each element displayed according to its default display value, and you can change the default display value of an element.
  4. Those elements that contain the none display value are not displayed in browser output. Such as – <head>, <title>, etc.

What are the HTML block-level and inline elements?

Those elements are block-level elements that have the default display value is the block. In the same way, elements whose default display value ​​is the Inline are called inline elements.


Differences between the block-level and inline elements

  1. Block-level Elements:
    • A block-level element always starts on a new line, and by default, it takes the full width of the browser. <div> is a block-level element.
  2. Inline Elements:
    • An inline element does not start on a new line and only takes width as needed. <span> is an inline element.
    • You cannot change the width, height, and margin of an inline element.

Example:

<!DOCTYPE html>
<html>
	<body>

      <div style="border:1px solid red;">Block-Level Element</div>

      <span style="border:1px solid blue;">Inline Element</span>
   
      <!-- An inline element does not start on a new line -->
      <span style="border:1px solid blue;">Another Inline Element</span>
      
 	  <!-- A block-level element always starts on a new line -->
      <div style="border:1px solid green; max-width:250px;">Another Block-Level Element</div>
      
	</body>
</html>

The block-level elements can contain the block-level & inline elements, but the inline elements cannot contain the block-level elements, it can only contain the inline elements.

<!-- Ok -->
<div> <span>...</span> </div>

<!-- Not ok -->
<span> <div>...</div> </span>
<!DOCTYPE html>
<html>
	<body>
      
      <!-- Ok -->
      <div style="border:1px solid red;">
        <span style="border:1px solid blue;">Inline element</span> inside the block-level element
      </div>
	  
      <br><br>
      
      <!-- Not Ok -->
      <span style="border:1px solid red;">
        <div style="border:1px solid blue;">Block-Level element</div> inside the inline element
      </span>

	</body>
</html>

How to change the display value of an HTML element?

With the help of the CSS display: property, you can change the display value of an HTML element.

Syntax:

div{
  display: display_value;
}

👉 Converting block-level to inline

div{
  display:inline;
}
<div style="display:inline; border:1px solid red;">Inline Element</div>

👉 Converting inline to block-level

span{
  display:block;
}
<span style="display:block; border:1px solid blue;">Block-Level Element</span>

Example of Invalid

The follwoing example works fine, but it is an invalid syntax.

Why is this invalid syntax?

Each HTML tag is used to create a specific type of element, but when you use a tag to create an element, for which it has not been created, then it will be called an invalid syntax.

The span tag is used to grouping inline elements, this means it cannot contain the block-level elements.

But in the following example, the span tag contains a block-level element. Even though the CSS has changed the <div> to an inline element, but by default, it is a block-level element.

<span style="border:1px solid red; display:block;">
  <div style="border:1px solid blue; display:inline;">Inline element</div> inside the block-level element
</span>

List of HTML inline elements

  • <a>
  • <abbr>
  • <acronym>
  • <audio>
  • <b>
  • <bdi>
  • <bdo>
  • <big>
  • <br>
  • <button>
  • <canvas>
  • <cite>
  • <code>
  • <data>
  • <datalist>
  • <del>
  • <dfn>
  • <em>
  • <embed>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <ins>
  • <kbd>
  • <label>
  • <map>
  • <mark>
  • <meter>
  • <noscript>
  • <object>
  • <output>
  • <picture>
  • <progress>
  • <q>
  • <ruby>
  • <s>
  • <samp>
  • <script>
  • <select>
  • <slot>
  • <small>
  • <span>
  • <strong>
  • <sub>
  • <sup>
  • <svg>
  • <template>
  • <textarea>
  • <time>
  • <u>
  • <var>
  • <video>
  • <wbr>

List of HTML block-level elements

  • <address>
  • <article>
  • <aside>
  • <blockquote>
  • <details>
  • <dialog>
  • <dd>
  • <div>
  • <dl>
  • <dt>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <footer>
  • <form>
  • <h1> – <h6>
  • <header>
  • <hgroup>
  • <hr>
  • <li>
  • <main>
  • <nav>
  • <ol>
  • <p>
  • <pre>
  • <section>
  • <table>
  • <ul>

Ask Questions

Your email address will not be published. Required fields are marked *