HTML Blocks: Each HTML element has a default show value, depending on what type of element it is.
All the HTML elements can be categorized into two categories (a) Block Level Elements (b) Inline Elements.
There are two showcase values: block and inline.
In this article, you will learn-
Block-level Elements
A block-level element consistently begins another line.
A block-level element consistently takes up the full width accessible (stretches out to the left and right the extent that it can).
A block-level element has a top and a base edge, though an inline element doesn’t.
The <div> element is a block-level element.
Example
<div>Hello World</div>
Inline Elements
An inline element doesn’t begin another line.
An inline element just takes up as much width as vital.
This is a <span> element inside a paragraph.
Example
<span>Hello World</span>
Note: An inline element can’t contain a block-level element!
The <div> Element
The <div> element is often used as a holder for other HTML elements.
The <div> element has no necessary attributes, but style, class and id are normal.
When used along with CSS, the <div> element can be used to style blocks of substance:
Example
<div style="background-color:black;color:white;padding:20px;"> <h2>Islammabad</h2> <p>Islammabad is the capital city of Pakistan.</p> </div>
The <span> Element
The <span> element is an inline holder used to mark up a piece of a text, or a piece of a document.
The <span> element has no necessary attributes, but style, class and id are normal.
When using along with CSS, the <span> element can be used to style portions of the content:
Example
<p>Welcome to HTML Tutorial <span style="color:blue;font-weight:bold"></span> Learn <span style="color:darkolivegreen;font-weight:bold"></span> HTML .</p>
Chapter Summary
• There are two display values : block and inline
• A block-level element consistently begins another line and takes up the full width accessible
• An inline element doesn’t begin another line and it just takes up as much width as essential
• The <div> element is a block level and is frequently used as a container for other HTML elements
• The <span> element is an inline container used to mark up a piece of a text, or a part of a document
HTML Tags
Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
Related:
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.
