HTML Block and Inline elements

HTML

Share


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

Mr. A Bc

#123, 3rd Main Street, ABCD Layout, Bangalore, Karantaka 560001

Ms. X yz

#99, 7th cross, 8th Main road, PQR Layout, Bangalore, Karnataka 560001

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.

Share

Recently Added