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 Inline 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 inline elements and how they differ from block-level elements.


Inline Elements

Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content. An inline element does not start on a new line.

This is an inline <span> element inside a paragraph.

Run code

An inline-level element can't have block-level elements inside it.



List of Inline Elements

The following elements are inline by default:


Inline elements vs block-level 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 <span> Element

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

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text.

Run code

HTML Grouping Tags

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