HTML blocks


HTML elements can be classified into following categories:
  • Block level elements
  • Inline elements

Block level HTML elements

Block level elements are those elements which occupy entire space horizontally.
Examples: <div>,<h1>,<ul>,<ol>,<pre> etc.

Inline level HTML elements

Inline level HTML elements do not acquire full width of browser.
Example: <b>,<i>,<em>,<del>,etc.

div elements in HTML(Block level)

Example:

<!DOCTYPE html>
<html>
<head>
<title>
div element
</title>
</head>
<body>
<div style="background-color:green">
This is div element.
</div>
</body>
</html>

Output:

This is div element.
In the above output one can clearly see that entire line is occupied by green coloured div element.

span element(Inline element)

Example:

<!DOCTYPE html>
<html>
<head>
<title>
div element
</title>
</head>
<body>
This is <span style="color:green"> span</span> element.
</body>
</html>

Output:

This is span element.