Inline Elements in HTML

Inline Elements in HTML

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • HTML
  • 3 mins read

In contrast to a block element in HTML, an inline element doesn't start on a new line. Instead, an inline element is coded within a block element. In this tutorial, you'll learn how to code inline elements for formatting and identifying text in HTML.

5 HTML Inline Elements for Formatting Text

ElementDescription
iDisplays the content in italics.
bDisplays the content in bold.
subDisplays the content as a subscript.
supDisplays the content as a superscript.
brAn empty element that start a new line of text.

10 HTML Inline Elements for Identifying Text

ElementDescription
abbrUsed for abbreviations.
citeUsed to indicate a bibliographic citation like a book title.
codeUsed for computer code, which is displayed in a monospaced font.
dfnUsed for special terms that can be defined elsewhere.
emIndicates that the content should be emphasized, which is displayed in italics.
kbdUsed for keyboard entries, which is displayed in a monospaced font.
qUsed for quotations, which are displayed within quotation marks.
sampUsed to mark a sequence of characters (sample) that has no other meaning.
strongIndicates that the content should be strongly emphasized, which is displayed in bold.
varUsed for computer variables, which are displayed in a monospaced font.

Notes on Inline Elements

  • An inline element is coded within a block element and doesn't begin on a new line.
  • The formatting elements should be used when no special meaning is implied.
  • The content elements should be used to convey meaning. Then, you can use CSS to format them.

Example

<html lang="en">

<head>
    <style>
        body {
            background-color: #bbe8fc;
        }
    </style>
</head>

<body>
    <h1>HTML Inline Elements</h1>
    <h3>em Example</h3>
    <p>If you don't get 80% or more on your final, <em>you won't pass.</em></p>
    <h3>strong Example</h3>
    <p>Save a bundle at our <strong>big yearend sale</strong>.</p>
    <h3>kdb Example</h3>
    <p>When the dialog box is displayed, enter <kbd>mycode29</kbd>.</p>
    <h3>sub Example</h3>
    <p>The chemical symbol for water is H<sub>2</sub>O.</p>
    <h3>q Example</h3>
    <p><q>To sleep, perchance to dream-ay, there's the rub.</q></p>
</body>

</html>

Output

The output would be as shown in the featured image of this article.

See also: