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:
- HTML: Display Tooltip on Hover
- How to Include 2 Columns Under One Column Header in HTML Table? (rowspan using c)