HTML Text Formatting

HTML text formatting is essential for enhancing the readability, structure, and presentation of web content. By using various HTML tags, developers can emphasise, highlight, and style text in different ways.

What is HTML Text Formatting?

HTML text formatting involves the use of HTML tags to modify the appearance and structure of text on a web page. These tags allow you to emphasize important information, organize content, and improve the overall user experience.

Common HTML Text Formatting Tags

Headings

HTML provides six levels of headings, from <h1> to <h6>, with <h1> being the highest level and <h6> the lowest. Headings help structure the content and improve SEO.

html

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

Paragraphs

The <p> tag defines a paragraph, creating a block of text with a margin above and below it.

html

<p>This is a paragraph of text.</p>

Bold Text

The <b> and <strong> tags make text bold. The <strong> tag also indicates that the text is of strong importance.

html

<b>This text is bold.</b>
<strong>This text is strongly emphasized.</strong>

Italic Text

The <i> and <em> tags italicize text. The <em> tag adds semantic emphasis, indicating that the text should be stressed.

html

<i>This text is italic.</i>
<em>This text is emphasized.</em>

Underlined Text

The <u> tag underlined the text.

html

<u>This text is underlined.</u>

Strikethrough Text

The <s> and <del> tags create strikethrough text, indicating that the text is no longer relevant or has been deleted.

html

<s>This text is struck through.</s>
<del>This text has been deleted.</del>

Subscript and Superscript

The <sub> and <sup> tags create subscript and superscript text, often used in mathematical expressions and chemical formulas.

html

<p>H<sub>2</sub>O</p> <!-- Subscript -->
<p>E = mc<sup>2</sup></p> <!-- Superscript -->

Highlighted Text

The <mark> tag highlights text, indicating it is relevant or important.

html

<mark>This text is highlighted.</mark>

Small Text

The <small> tag reduces the font size of the text.

html

<small>This text is smaller.</small>

Quotations

The <blockquote class="p-4 my-4 border-s-4 border-gray-300 bg-gray-10 dark:border-gray-500 dark:bg-gray-10"> and <q> tags define block and inline quotations, respectively.

html

<blockquote cite="https://www.example.com">This is a block quotation.</blockquote>
<q>This is an inline quotation.</q>

Code and Preformatted Text

The <code> and <pre> tags display code snippets. The <code> tag formats inline code, while the <pre> tag preserves whitespace and displays text in a monospaced font.

html

<code>let x = 10;</code> <!-- Inline code -->
<pre>
function example() {
console.log("This is preformatted text.");
}
</pre> <!-- Preformatted text -->

Example: HTML Text Formatting in Action

Here’s an example of an HTML document demonstrating various text formatting tags.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>
        HTML Text Formatting Example
    </title>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <h1>HTML Text Formatting</h1>
    <p><b>Bold</b> Text</p>
    <p><strong>Strongly Emphasized</strong> Text</p>
    <p><i>Italic</i> Text</p>
    <p><em>Emphasized</em> Text</p>
    <p><u>Underlined</u> Text</p>
    <p><s>Strick Through</s> Text</p>
    <p><del>Deleted</del> Text</p>
    <p><mark>Highlighted</mark> Text</p>
    <p><small>Smaller</small> Text</p>
    <p>Subscript Example: H<sub>2</sub>O</p>
    <p>Superscript Example: E = mc<sup>2</sup></p>
    <blockquote cite="https://www.example.com">
        Block Quote Text
    </blockquote>
    <pre>
Preformatted Text
function example() {
console.log("Hello, world!");
}
    </pre>
</body>

</html>

Best Practices for HTML Text Formatting

Use Semantic Tags: Use semantic tags like <strong>, <em>, <blockquote class="p-4 my-4 border-s-4 border-gray-300 bg-gray-10 dark:border-gray-500 dark:bg-gray-10">, and <code> to convey meaning and improve accessibility.

html

<strong>Important</strong> vs. <b>Important</b>

Keep HTML and CSS Separate: Use CSS for styling text (e.g., color, font size, font family) rather than inline styles.

html

<p class="highlight">Highlighted text</p>
<style>
.highlight {
background-color: yellow;
}
</style>

Ensure Readability and Accessibility: Ensure that formatted text remains readable and accessible to all users, including those using screen readers.

html

<p><em>Emphasized text</em> is easier for screen readers to interpret than <i>italicized text</i>.</p>

Avoid Deprecated Tags: Avoid using deprecated tags like <font>, <center>, and <strike>. Use modern alternatives instead.

html

<p style="text-align: center;">Centered text</p> instead of <center>Centered text</center>

Validate HTML Code: Use HTML validators to ensure your code is compliant with HTML standards and best practices.

html

<!-- Validate your HTML code using tools like W3C Markup Validation Service -->

Conclusion

HTML text formatting is crucial for creating well-structured, readable, and accessible web content. By understanding and effectively using HTML formatting tags, developers can enhance the presentation and usability of their web pages.

Related Articles