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 block level elements.

Example :

<div>
  This is the 1st line <span>of inline element</span>
</div>

This will produce the following result −