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.
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:
- <h1> - <h6>
An inline element does not start on a new line and only takes up as much width as necessary. This is an inline element inside a paragraph.
Examples of inline elements:
The <div> Element
The <div> element is a block-level element that is often used as a container for other HTML elements.
The <div> element has no required attributes, but style and class are common.
When used together with CSS, the <div> element can be used to style blocks of content:
<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
The element is an inline element that is often used as a container for some text. The element has no required attributes, but style and class are common. When used together with CSS, the element can be used to style parts of the text:
<h1>My <span style="color:red">Important</span> Heading</h1>
HTML Grouping Tags
|<div>||Defines a section in a document (block-level)|
|<span>||Defines a section in a document (inline)|