HTML Inline Elements

HTML elements can be categorized into two types based on how they display their content on a web page, namely Block and Inline elements.

Inline elements display their content as is without any separation from the content around them.

  • They won't start on a new line
  • They only take up the width required to display their content

This is an inline text using <span> element

This is a paragraph containing inline bold text using <b> element.

List of HTML Inline Elements

Here is a list of HTML Inline elements.

<a>, <abbr>, <acronym>, <b>, <dbo>, <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>

The most commonly used Blocked element is the span <span>.

Inline Elements cannot contain Block Elements

Let's try to understand what inline elements can contain, which can help us in choosing the right HTML elements while building a web page.

  • Inline elements can contain any number of valid inline elements.
  • Inline elements cannot contain any of the block elements.

In the below example, we have block elements <div>, <h1>, <p>, where <p> contains inline elements <span>, <b> and <i>, which can explain how they can be used.

<div>
    <h1>HTML Inline Elements</h1>
    <p>
        This is a block element containing several inline elements
        <span>
            text inside span with <b>bold text</b> and <i>italic text</i>
        </span>
    </p>
</div>

Example

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <div>
        <h1>HTML Inline Elements</h1>
        <p>
            This is a block element containing several inline elements
            <span>
                text inside an inline element using span with <b>bold text</b> and <i>italic text</i>
            </span>
        </p>
    </div>
</body>
</html>

Overall

HTML Inline elements are useful in building a web page content, where the different elements need to be next to each other.