HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Block-level Elements

All the HTML elements can be categorized into two categories:

  • Block Level Elements
  • Inline Elements

A block-level element always starts on a new line and takes up the full width available.

Block level element

Block level element

Block level element

An inline element does not start on a new line and only takes up as much width as necessary.

Inline level element

Inline level element

Inline level element

In this chapter, we'll examine HTML block-level elements and how they differ from inline elements.


Block-level Elements

A block-level element always starts on a new line and takes up the full width available.

Generally, block-level elements may contain inline elements and (sometimes) other block-level elements.

The <div> element is a block-level element.

Run code

List of Block-level elements

The following is a complete list of all HTML block-level elements:


Block-level elements vs Inline elements

A block-level element always starts on a new line and takes up the full width available.

An inline element does not start on a new line and only takes up as much width as necessary.

Let's look at the following example which demonstrates an inline element:

Run code

The <div> block-level element contains some text. Within that text is a <span> element, which is an inline element.

Because the <span> element is inline, the text correctly renders as a single.

Now let's change that <span> into a block-level element, such as <p>:

Run code

See the difference? The <p> element totally changes the layout of the text, splitting it into three segments:

The text before the <p>, then the <p>'s text, and finally the text following the <p>.


Changing Element Levels

You can change the visual presentation of an element using the CSS display property.

For example, by changing the value of display from inline to block, you can tell the browser to render the inline element in a block box rather than an inline box, and vice versa.

This example convert link element to block-level element:

Run code

This example converts a block-level element to inline element:

Run code

HTML <div> 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.

Run code

HTML Grouping Tags

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)