Block & Inline Elements
Block & Inline Elements
All the HTML elements can be categorized into two categories:
(a) Block Level Elements
(b) Inline Elements
Block-level Elements
A block-level element always starts on a new line and takes up the full width available, and anything that follows them appears on its own new line.
For example, the <p>, <h1> - <h6>, <ul>, <ol>, <div>, <header>, <footer>, <table>, <li>, <section>, <article>,<blockquote>, <form>, <hr> etc. elements are all block level elements.
Example:
<div>
This is 1st line of block-level element
</div>
<div>
This is 2nd line of block-level element
</div>
This will produce the following result −
Inline Elements
An inline element is the opposite of the block-level element. It does not start on a new line and it only takes up as much width as necessary.
For example, the <span>, <a>, <img>, <select>, <textarea>, <strong>, <small>, <label>, <big>, <button>, <input>, <sub>, <sup>, <q>, <b>, <em>, <i>, <br> etc. elements are all inline elements.
Example:
<div>
This is the 1st line <span>of inline element</span>
</div>
This will produce the following result −
