HTML Block And Inline Elements

By Nirlipta Majumdar

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.


Block-level Elements

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
element is a block-level element.

Example

<div>Hello</div>
<div>World</div>
Try it Yourself »

Block level elements in HTML:


Inline Elements

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.

Example

<span>Hello</span>
<span>World</span>
Try it Yourself »

Inline elements in HTML:


The
Element

The 

 element is often used as a container for other HTML elements.

The 

 element has no required attributes, but styleclass and id are common.

When used together with CSS, the 

element can be used to style blocks of content:

Example

<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>
Try it Yourself »

The Element

The  element is often used as a container for some text.

The  element has no required attributes, but styleclass and id are common.

When used together with CSS, the element can be used to style parts of the text:

Example

<h1>My <spanstyle="color:red">Important</span> Heading</h1>
Try it Yourself »

HTML Grouping Tags

TagDescription
Defines a section in a document (block-level)
Defines a section in a document (inline)

For a complete list of all available HTML tags, visit our HTML Tag Reference.



Related Tutorials