HTML Block and Inline Elements

HTML block and inline elements are two types of element with respect to element display value.

Block and Inline elements

Now lets see block and inline elements below:

Block element: A block element always start on a new line and take full available width. The block level element can contain other block and inline elements within it. For example <div>,<footer>,<form>.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div style="border: 1px solid black">Block level element</div>
<div style="border: 1px solid black">Block level element</div>
<div style="border: 1px solid black">Block level element</div>
 Block and Inline Elements

Block level Elements in HTML

<div> <form> <header> <hr> <main> <section> <table> <ul> <ol>

<pre> <video> <nav> <footer> <address> <article> <h1>-<h6> <p>

Inline Element

An inline element does not start on a new line and take only necessary width. The inline elements can contain data and other inline elements within it. For example <span>,<b>,<var>.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<p>Example of <span style="border: 1px solid black">Inline </span>Element</p>
<p>Example of <span style="border: 1px solid black">Inline </span>Element</p>
<p>Example of <span style="border: 1px solid black">Inline </span>Element</p>

Inline Elements in HTML

<span> <abbr> <b> <i> <u> <em> <img> <br> <sub> <sup> <time> <big>

<small> <mark> <code> <label> <select> <a> <button> <input> <script> <output>

Inline Element within Block Element

Note: The inline elements cannot contain block elements within it but block level can contain inline elements within it.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div style="border: 1px solid black">My Favorite <span style="border: 1px solid black">color</span> is blue</div>
<div style="border: 1px solid black">My Favorite <span style="border: 1px solid black">color</span> is blue</div>
<div style="border: 1px solid black">My Favorite <span style="border: 1px solid black">color</span> is blue</div>

Here in the above code style attribute is added so it can become more clear that how much width both elements are occupying.

You can visit html element to learn more types of html elements.