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.
<div>Welcome Home</div> Output
Here are the block-level elements in HTML:
addressarticleasideblockquote
canvasdd
div
dl
dt
fieldset
figcaption
figure
footer
form
h1h6
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.
<span>Welcome Home</span> 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.
<div id="myDiv" name="myDiv" title="Example Div Element">
<h5>Subtitle</h5>
<p>This paragraph would be your content paragraph...</p>
<p>Here's another content article right here.</p>
</div> 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
<p>My favourite color is <span style="color:green;font-weight:bold">Green</span>
and my sister's favourite color is <span style="color:Red;font-weight:bold">Red.</span></p> Output