Home » HTML » Learn How to Code Inline Elements for Formatting and Identifying Text in HTML

Learn How to Code Inline Elements for Formatting and Identifying Text in HTML

By

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

Element Description
i Displays the content in italics.
b Displays the content in bold.
sub Displays the content as a subscript.
sup Displays the content as a superscript.
br An empty element that start a new line of text.

10 HTML Inline Elements for Identifying Text

Element Description
abbr Used for abbreviations.
cite Used to indicate a bibliographic citation like a book title.
code Used for computer code, which is displayed in a monospaced font.
dfn Used for special terms that can be defined elsewhere.
em Indicates that the content should be emphasized, which is displayed in italics.
kbd Used for keyboard entries, which is displayed in a monospaced font.
q Used for quotations, which are displayed within quotation marks.
samp Used to mark a sequence of characters (sample) that has no other meaning.
strong Indicates that the content should be strongly emphasized, which is displayed in bold.
var Used 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: