HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Every HTML element has a default display value, depending on what type of element it is.There are two display values: block and inline
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
Two commonly used block elements are: <p>
and <div>
.
The <p>
element defines a paragraph in an
HTML document.
The <div>
element defines a division
or a section in an HTML document.
The <p> element is a block-level element.
The <div> element is a block-level element.
<p>Hello World</p>
<div>Hello World</div>
Here are the block-level elements in HTML:
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
<span>Hello World</span>
Here are the inline elements in HTML:
Note: An inline element cannot contain a block-level element!
The <div>
element is
often used as a container for other HTML elements.
The <div>
element has no required attributes, but style
, class
and id
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 is
an inline container used to mark up a part of a text, or a part of a document.
The <span>
element has no required attributes, but style
, class
and id
are common.
When used together with CSS, the <span>
element can be used to style parts of the text:
<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>
<div>
element is a block-level
and is often used as a container for other HTML elements<span>
element is an inline
container used to mark up a part of a text, or a part of a documentTag | Description |
---|---|
<div> | Defines a section in a document (block-level) |
<span> | Defines a section in a document (inline) |
For a complete list of all available HTML tags, visit our HTML Tag Reference.