Text formatting tags in HTML, <b> (bold), <i> (italics), <u> (underline), <strong> (strong emphasis), and <em> (emphasis).
Text Formatting Tags
<b> (Bold)
The <b> element now denotes a span of text to which attention is being drawn for useful purposes without conveying any extra importance. Examples include keywords in a document abstract, product names in a review, or actionable words in interactive text-driven software. It was previously discouraged in favor of <strong> because it was seen as purely presentational. The default rendering is typically bold text.
<p>The <b>XR-5</b> is our latest model.</p>The XR-5 is our latest model.
<i> (Italics)
The <i> element now denotes a span of text in an alternate voice or mood, indicating a different quality of text. Examples include taxonomic terms, technical terms, idiomatic phrases from another language, thoughts, or ship names. Like <b>, it was previously seen as purely presentational. Browsers extract <i> text in italics by default.
<p>The scientific name for the common house cat is <i>Felis catus</i>.</p>The scientific name for the common house cat is Felis catus.
<u> (Underline)
The <u> element was denounced in HTML 4 but reintroduced in HTML5 with a new semantic meaning: to represent an unstated, non-textual annotation. This used to indicate misspelled text. It’s still primarily rendered with an underline. However, using CSS (text-decoration: underline) is generally preferred for simply underlining text for stylistic purposes.
<p>This paragraph contains some <u>mispelled</u> text.</p>This paragraph contains some mispelled text.
<strong> (Importance)
The <strong> element is used to indicate that the enclosed text is fundamentally or semantically important to the surrounding text. It signifies greater importance than regular text and marked with a different tone of voice by a text-to-speech program. You may nest <strong> within other <strong> tags to further increase the level of importance. Browsers display <strong> text in boldface.
<p><strong>Warning:</strong> Do not touch the electrical wires.</p>Warning: Do not touch the electrical wires.
<em> (Emphasis)
The <em> element is used to indicate emphatic stress. It gives context to the reader about the meaning of a sentence or paragraph, and when spoken, these words would be verbally emphasized. You can nest <em> elements to increase the level of emphasis. Browsers commonly reduce <em> text in italics.
<p>Are you <em>sure</em> you want to do that?</p>Are you sure you want to do that?
Redefinition of <i> versus <em>
In earlier versions of HTML, both <i> and <em> resulted in italicized text. However, HTML5 has redefined their semantic meanings.
- The <em> element is now specifically for indicating emphatic stress, which implies a change in how the text would be spoken.
- The <i> element is now for text that is in an alternate voice or mood, or offset from the normal style for reasons other than emphasis, such as foreign words, technical terms, or thoughts. It does not inherently imply emphasis or importance.
While browsers still reduce both <em> and <i> in italics by default, their semantic distinction is important for accessibility (screen readers) and for conveying the planned meaning of the text. You can always override the default styling with CSS.
Marking Important Text:
To mark text as important, you should use the <strong> element. This semantically indicates the significance of the content.
<!DOCTYPE html>
<html>
<head>
<title>Marking Important Text</title>
</head>
<body>
<p>This is a regular paragraph.</p>
<p><strong>This sentence contains important information that users should take note of.</strong></p>
<p>You must <strong>register</strong> before you can access the full content.</p>
<p><strong>Deadline:</strong> The application must be submitted by Friday.</p>
</body>
</html>This is a regular paragraph.
This sentence contains important information that users should take note of.
You must register before you can access the full content.
Deadline: The application must be submitted by Friday.
In the above examples, the <strong> tag clearly indicates the text that carries significant meaning or importance within the context of the surrounding content.
HTML5 Topics