HTML Blocks and Inline Elements

Every HTML element can be categorized into either (1) Block OR (2) Inline.

Block-level Elements

These elements always start on a new line with full width.
Examples of block level elements are: <div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <ul>, <ol>, <dl>, <pre>, <hr />, <form>, and <address>.

Inline Elements

Inline element does not start with new line and takes width as per content inside.
Examples: <span>, <b>, <strong>, <i>, <u>, <em>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, etc.

HTML Grouping Tags

In HTML <div> and <span> tags are frequently used to group various other HTML tags.

<div> Element

<div> element is the important blog tag and often used as a container for other HTML tags. It can also be used to create webpage layouts like header, footer and sidebar.
Example:

<html>
<head><title>Div Example</title></head>
<body>
<div style=”background:yellow”>
<h2>Computer</h2>
<p>Computer is an electronic device.</p>
</div>
<div style=”background:cyan”>
<h2>Mouse</h2>
<p>Mouse is a input device.</p>
</div>
</body>
</html>

Output:

<span> Element

<span> is an inline html element and often used to group inline elements in HTML.

Example:

<html>
<head><title>Span Example</title></head>
<body>
<p><span style=”color:blue”>Mouse</span> is a input device and <span style=”color:red”>printer</span> is a output device.</p>
</body>
</html>

Output:

Leave a Reply