HTML Block and Inline Elements
Here we will discuss HTML Block and Inline Elements. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. Previously we shared HTML Tags with Examples Complete Tutorial. |
| CS101 - HTML Block and Inline Elements |
Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).The <div> element is a block-level element.
Examples of block-level elements:
- <div>
- <h1> - <h6>
- <p>
- <form>
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.This is an inline <span> element inside a paragraph.
Examples of inline elements:
- <span>
- <a>
- <img>
The <div> Element
The <div> element is often used as a container for other HTML elements.The <div> element has no required attributes, but both style and class are common.
When used together with CSS, the <div> element can be used to style blocks of content:
Example:
<div style="background-color: black; color:white; padding: 20px;">
<h2>ISLAMABAD</h2>
<p>Islamabad is the capital city of Pakistan located within the federal Islamabad Capital Territory. With a population of two million, it is the 10th largest city of Pakistan.</p>
</div>
The <span> Element
The <span> element is often used as a container for some text.The <span> element has no required attributes, but both style and class are common.
When used together with CSS, the <span> element can be used to style parts of the text:
Example
<h1>My <span style="color:red">Important</span> Heading</h1>
HTML Grouping Tags
Tag : <div> Description : Defines a section in a document (block-level) Tag : <span> Description : Defines a section in a document (inline)Recommended :
For More HTML Tutorials and Short Notes Please Subscribe us below or Like us on Facebook. Thanks
Post a Comment