What is HTML Block and Inline Elements?
Depending on which element it is, every HTML element has a default display value. For most elements, the default display value is block or inline.
All HTML elements can be divided into 2 categories.
- Block Level Elements
- Inline Elements
Block-Level Elements
Block elements appear before and after a line break on the screen.
For instance, the block elements <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr/>, <blockquote>, etc. All of them begin on their own new lines, and anything after them appears on their own new lines.
Example:
<!DOCTYPE html>
<html>
<body>
<div>Hello</div>
<div>World</div>
<p>The DIV element is a block element, and will start on a new line.</p>
</body>
</html>
Output:
Hello
World
The DIV element is a block element, and will start on a new line.
Inline Elements
On the other hand, inline elements can appear in phrases and do not have to be shown on their own new lines.
All elements of the inline elements are the following: <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var>.
Example:
<!DOCTYPE html>
<html>
<body>
<span>Hello</span>
<span>World</span>
<p>SPAN is an inline element and does not begin on a new line.</p>
</body>
</html>
Output:
HelloWorld
SPAN is an inline element and does not begin on a new line.
HTML Grouping Tags
We frequently use two major tags to group different other HTML tags.
- <div> Tags
- <span> Tags
The <div> Tags
The element <div> is often used in other HTML elements as a container.
The <div> element does not have required attributes but is common in style, in class and in Id.
The <div> element can be used together with CSS to design content blocks:
Example:
<!DOCTYPE html>
<html>
<body>
<div style="background-color:Gray;color:white;padding:20px;">
<h2>London</h2>
<p>Dehradun is the capital of the Indian state of Uttarakhand, near the Himalayan foothills.</p>
<p>At its core is the 6-sided Ghanta Ghar clock tower. To the southwest is Paltan Bazaar, a busy shopping area. Just east is the Sikh temple Gurdwara Nanaksar, topped with ornate white and golden domes..</p></div>
</body>
</html>
Output:
London
Dehradun is the capital of the Indian state of Uttarakhand, near the Himalayan foothills.
At its core is the 6-sided Ghanta Ghar clock tower. To the southwest is Paltan Bazaar, a busy shopping area. Just east is the Sikh temple Gurdwara Nanaksar, topped with ornate white and golden domes..
The <span> Element
The element <span> is often used in some text as a container.
There are no necessary attributes to the <span> element, but the style, class and id are common.
Using the <span> element together with CSS, the text parts can be styled:
The difference between the <span> tag and the <div> tag is to use the <span> tag for inline items while the <div> tag is for block-level elements.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>This is <span style="color:red">Important</span> Headline</h1>
</body>
</html>
Output:
This is Important Headline