Each HTML element inherently possesses a default display value, which varies based on the type of element it is.The two predominant display values are block and inline.
A block-level element consistently begins on a fresh line, with browsers automatically including space (margin) before and after the element.
A block-level element invariably occupies the entire available width, extending to both the left and right edges.
Two frequently utilized block elements are: <p> for defining paragraphs in an HTML document, and <div> for delineating divisions or sections within an HTML document.
| The <p> element is a block-level element. |
| The <div> element is a block-level element. |
Example
| <p>Hello World</p> <div>Hello World</div> |
Below are the block-level elements in HTML:
An inline element does not initiate a new line.
An inline element occupies only the width required for its content.
This is a <span> element inside a paragraph.
Example
| <span>Hello World</span> |
These are the inline elements in HTML:
| Please note: An inline element is unable to encompass a block-level element! |
The <div> element is frequently employed as a wrapper for additional HTML elements.
Although the <div> element doesn’t mandate specific attributes, style, class, and id are commonly utilized.
When utilized in conjunction with CSS, the <div> element serves as a tool for styling content blocks.
Example
| <div style=”background-color:black;color:white;padding:20px;”> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> |
The <span> element serves as an inline container utilized to annotate a segment of text or a portion of a document.
While the <span> element doesn’t necessitate specific attributes, style, class, and id are frequently applied.
When paired with CSS, the <span> element facilitates the styling of text segments.
Example
| <p>My mother has <span style=”color:blue;font-weight:bold;”>blue</span> eyes and my father has <span style=”color:darkolivegreen;font-weight:bold;”>dark green</span> eyes.</p> |
