HTML Block and Inline elements

HTML elements are divided into two groups namely BLOCK elements and INLINE elements.

What is a Block element?

A block elements is an element that always start on a new line and take up the entire width and any other element starting after it will start from the next line.

List of HTML Block elements

Div <div>

Form <form>

Heading tags

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

Paragraph <p>

List

<ol>
<ul>
<dl>

Horizontal Line <hr />

Blockquote <blockquote>

Preformatted <pre>

Address <address>

What is an Inline element?

An Inline elements is an element that not necessarily start on a new line and take up only the required amount of width.

List of HTML Inline elements

Span <span>

Bold <b>

Italic <i>

Underline <u>

Subscript <sub>

Superscript <sup>

Big <big>

Small <small>

Emphasize <em>

Strong <strong>

List item <li>

Citation <cite>

Definition <dfn>

Insert <ins>

Code <code>

Keyboard <kbd>

Variable <var>

Grouping elements

We use two tags to group HTML elements namely the <div> tag and <span>.

The div tag

The div tag is a block element that is commonly used to group different HTML elements to form a group.

Following is an example of div tag used to create an address container of user.

<!-- 1st user address container -->
<div class="address-container">
	<p>Mr. A Bc</p>
	<address>
		#123, 3rd Main Street, ABCD Layout, Bangalore, Karantaka 560001
	</address>
</div>
<!-- address container ends here -->

<!-- 2nd user address container -->
<div class="address-container">
	<p>Ms. X yz</p>
	<address>
		#99, 7th cross, 8th Main road, PQR Layout, Bangalore, Karnataka 560001
	</address>
</div>
<!-- address container ends here -->

Output

<!-- 1st user address container --><!-- address container ends here --> <!-- 2nd user address container --><!-- address container ends here -->

The span tag

The span tag is an inline element that is commonly used to group different HTML inline elements to form a group.

Following is an example of span tag used to create some inline groups.

<p>This is a sample line having <span>a <strong>CAPITAL</strong> letters word</span> and <span>a <small>small</small> letters word</span>.

Output

This is a sample line having a CAPITAL letters word and a small letters word.