In HTML, every HTML elements or tags has own display value, depending on what type of element it is.

All the HTML elements can be categorized into two categories

1. Block Level Elements
2. Inline Elements

Block-level Elements

Block-level elements always starts with new line.

For example, the

,

,

,

,

,

,

,

,
,

,

, 
, 
, 
 etc. elements are all block level elements.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
A block level element has a top and a bottom margin, whereas an inline element does not.
The 
 element is a block-level element.

Inline Elements
Inline elements not start with new line.
The , , , , , , , , , 
, , , , , , , and  elements are all inline elements.

An inline element only takes up as much width as necessary.
This is a  element inside a paragraph tag
The 
 tag
This is very important tag. Most of the time you will using this tag while developing website.
This is block-level tag. This element is often used as a container for other HTML elements.
When used together with CSS, the element can be used to style blocks of content:
Following is a simple example of <div> tag. We will learn Cascading Style Sheet (CSS) in a separate tutorial but we used it here to show the usage of <div> tag.
See the Pen div tag by Arpit (@soniarpit) on CodePen.

The  tag
<span> tag is inline element. I used most this when I need to group inline tags.
This tag also does not provide any visual change on the block but has more meaning when it is used with CSS.
Following is a simple example of <span> tag. We will learn Cascading Style Sheet (CSS) in a separate tutorial but we used it here to show the usage of <span> tag
See the Pen span tag by Arpit (@soniarpit) on CodePen.

Finally

















Tag
Description
<div>
Defines a section in a document (block-level)
<span>
Defines a section in a document (inline)
Hope you enjoyed the tutorial. Happy coding :)
Previous: #13 HTML Lists
Next: #15 HTML class Attribute