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.