HTML Block and Inline Elements
Every HTML tag categorized into two types. They are block-level elements and inline elements. Both types have their default display values.
Block-level Elements
A block-level element always starts on a new line before and after the element.
In HTML, A block-level element always takes up the entire horizontal space (as much space as possible) of its parent element, and vertical space equal to the height of its contents.
block-level element has a top side margin and a bottom side margin.
For example, The div
element is a block-level element.
Welcome Home
Output
Here are the block-level elements in HTML:
address
article
aside
blockquote
canvas
dd
div
dl
dt
fieldset
figcaption
figure
footer
form
h1
h6
header
hr
li
main
nav
noscript
ol
p
pre
section
table
tfoot
ul
video
Inline Elements
An inline element does not start on a new line.
Inline elements will occupy only the space bounded by the tags and It will not force the content to flow to a new line.
An inline element does not have any margin.
For example, The span
element is a inline element.
Welcome Home
Output
An anchor (or link) is an example of an inline element. You can put several links in a row, and they will display in a line.
Here are the inline elements in HTML:
a
,abbr
,acronym
,b
,bdo
,
big
,br
,button
, cite
,code
,
dfn
,em
,i
,img
,input
,
kbd
,label
,map
,object
,output
,
q
,samp
,script
,select
,small
,
span
,strong
,sub
,sup
,textarea
,
time
,tt
,var
Note: There can't be a block-level element inside an inline element!
Related Links
The <div> Element
The div
element is often used as a container that encapsulates other HTML elements to group together.
The div
element has no any special attributes, but you can use common HTML elements attributes (style, id, and class) to it.
The div
tag can be used with CSS to format content blocks.
Subtitle
This paragraph would be your content paragraph...
Here's another content article right here.
Output
Subtitle
Related Links
The <span> Element
The span
element is used as a container for a part of a text or sentence. It groups other inline elements together.
The span
element has no any special attributes, but you can use common HTML elements attributes (style, id, and class) to it.
The span
tag can be used with CSS to style part of text.
Example
My favourite color is Green
and my sister's favourite color is Red.
Output