Block and Inline Elements in HTML – HTML,CSS tutorial

Author: satz | Date: August 30, 2009

It is very much important for a web developer to know the characteristics of each elements in HTML. This article briefly explains the difference between the Block elements and the Inline elements in HTML.

Block Elements:

Following are the some of the main features of a block level element.

  • An element that takes up full width available, and
  • Has a line break before and after it.

Some of the sample elements would be:

<h1>
<h2>
<p>
<ul>
<ol>
<li>
<div>

Inline Elements:

Following are some of the features of and inline element

  • An element which takes up only as much width as necessary, and
  • Does not force line breaks before and after the elements.

Some of the sample elements would be:

<span>
<a>
<b>
<strong>
<i>

NOTE:

By changing the “display” attribute of these elements, we can achieve the specific requirements. The following is the example using CSS.

li {display:inline}
span {display:block}