Text Formatting Tags (e.g., <strong>
, <em>
, <u>
)
HTML provides a variety of text formatting tags that allow you to emphasize, highlight, or style text in different ways. These tags enhance the presentation and readability of your web page's content. Let's explore some of the commonly used text formatting tags:
<strong>
The <strong>
element is used to indicate strong importance or emphasis in text. Browsers typically render text within <strong>
tags as bold. It's not meant solely for making text bold; its primary purpose is to convey importance to assistive technologies and search engines.
<p>This text is <strong>important</strong>.</p>
<em>
The <em>
element represents emphasized text, which is typically rendered in italics by browsers. Like <strong>
, it's not about applying italics but rather indicating emphasis.
<p>This text is <em>emphasized</em>.</p>
<u>
The <u>
element underlines text, which is commonly associated with hyperlinks. However, it can be used for other purposes where underlining is meaningful. For hyperlinks, consider using <a>
(anchor) elements.
<p>This text is <u>underlined</u>.</p>
<sub>
and <sup>
The <sub>
and <sup>
elements are used to create subscript and superscript text, respectively. Subscript is typically used for mathematical expressions or chemical formulas, while superscript is useful for footnotes or exponent notation.
<p>H<sub>2</sub>O is water.</p>
<p>2<sup>3</sup> = 8</p>
<del>
and <ins>
The <del>
and <ins>
elements are used to represent content that has been deleted or added to a document. They are often used in conjunction with the cite
attribute to provide additional information about the modification.
<p><del cite="https://example.com/change-log">This text has been removed.</del></p>
<p><ins cite="https://example.com/change-log">This text has been added.</ins></p>
<mark>
The <mark>
element highlights a portion of text, making it visually stand out. It's commonly used to highlight search results or relevant keywords on a page.
<p>The <mark>important</mark> information is highlighted.</p>
<cite>
The <cite>
element is used to indicate the title of a creative work, such as a book, movie, or piece of art. Italicized formatting is commonly applied to text within <cite>
elements.
<p>The novel <cite>Moby-Dick</cite> is a classic.</p>
Styling Text
While these HTML elements have default styles, you can use CSS to customize their appearance. CSS allows you to control properties such as font size, color, and more to match your website's design.
<p>This text is <strong style="color: red;">important</strong>.</p>
In summary, HTML provides a variety of text formatting tags that serve to indicate meaning, importance, and visual styling. When using these tags, it's important to consider their semantic meaning and accessibility. Properly used, these tags can enhance the clarity and presentation of your web page's content.