MakeW3web

Formatting Text

In HTML, there are several elements that allow you to format text to emphasize or distinguish certain parts of your content. These formatting elements can change the appearance of the text, such as making it bold or italic, without affecting its structure or meaning.

Here's an overview of some common HTML text formatting elements, along with examples:

  1. `<strong>`: The `<strong>` element is used to give strong emphasis to a piece of text, usually making it bold. This indicates that the text has higher importance.
Example:
<p>This is a normal sentence with <strong>strong emphasis</strong> on some words.</p>
  1. `<em>`: The `<em>` element is used to give emphasis to a piece of text, usually making it italic. This indicates that the text has a different quality or should be read with stress.
Example:
<p>This is a normal sentence with <em>emphasized text</em> in it.</p>
  1. `<mark>`: The `<mark>` element is used to highlight a piece of text, usually with a yellow background color. This can be useful for marking important or relevant information.

Example:

<p>This is a normal sentence with a <mark>marked</mark> piece of text.</p>
  1. `<del>`: The `<del>` element is used to represent deleted text, usually displayed with a strikethrough. This can be helpful for showing revisions or updates.

Example:

<p>This is a normal sentence with <del>deleted text</del> in it.</p>
  1. `<ins>`: The `<ins>` element is used to represent inserted text, usually displayed with an underline. This can be helpful for showing additions or corrections.

Example:

<p>This is a normal sentence with <ins>inserted text</ins> in it.</p>
  1. `<sub>` and `<sup>`: The `<sub>` and `<sup>` elements are used to display subscript and superscript text, respectively. These are commonly used in mathematical expressions, footnotes, or chemical formulas.

Example:

<p>This is a normal sentence with H<sub>2</sub>O (subscript) and E = mc<sup>2</sup> (superscript).</p>

Here's an example that combines these formatting elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Text Formatting Example</title>
</head>
<body>
    <p>This is an example of <strong>strong emphasis</strong> and <em>italic emphasis</em> used together.</p>
    
    <p>Here's a sentence with a <mark>highlighted</mark> word.</p>
    
    <p>This is a sentence with <del>deleted</del> and <ins>inserted</ins> text.</p>
    
    <p>Finally, this sentence includes H<sub>2</sub>O (subscript) and E = mc<sup>2</sup> (superscript).</p>
</body>
</html>

By using these HTML formatting elements, you can emphasize or distinguish specific parts of your text, making your content more engaging and easier to understand. However, keep in mind that it's best to use these elements sparingly and only when necessary to avoid cluttering your content. Additionally, for more advanced styling, consider using CSS to apply custom styles to your text.

Was this page helpful?