Text Formatting

Complete HTML Course (Free)

About Lesson

This lesson introduces HTML text formatting techniques. You’ll learn how to style and emphasize text using a variety of HTML elements, making your content visually appealing and easier to read.

1. What is Text Formatting in HTML?

Text formatting refers to altering the appearance of text to highlight important parts or add stylistic emphasis. HTML provides several elements to format text for specific purposes.

2. Common HTML Formatting Elements

Bold Text:  and 
- : Displays text in bold for visual emphasis, but does not add semantic importance.
```
This text is bold.
```
- : Displays bold text while adding semantic importance, signaling the content is crucial.
```
This text is important and bold.
```
Italicized Text:  and 
- : Italicizes text for visual styling without adding semantic emphasis.
```
This text is italicized.
```
- : Italicizes text while indicating emphasis or importance.
```
This text is emphasized and italicized.
```
Underlined Text: 
- Underlines text, typically for stylistic emphasis.
```
This text is underlined.
```
Strikethrough Text: <s> and <del>
- <s>: Strikes through text for stylistic purposes, indicating outdated or irrelevant content.
```
<s>This text is no longer relevant.</s>
```
- <del>: Indicates deleted content, often used in collaborative editing.
```
<del>This text has been removed.</del>
```
Superscript and Subscript:  and 
- : Displays text as superscript, often for exponents or footnotes.
```
x2 + y2 = z2
```
- : Displays text as subscript, often for chemical formulas or indices.
```
H2O (water)
```
Monospace Text: <code> and <pre>
- <code>: Represents code snippets in a monospace font.
```
<code>console.log('Hello, world!');</code>
```
- <pre>: Preserves whitespace and formatting, often used for displaying code blocks.
```
<pre>
function greet() {
 console.log("Hello, World!");
}
</pre>
```
Highlighted Text: 
- Highlights text with a background color, drawing attention to it.
```
This text is highlighted.
```
Small Text: 
- Displays smaller text, often for fine print or disclaimers.
```
This is a small disclaimer text.
```

Quotations: <q> and <blockquote>

<q>: For inline quotations.

<q>The quick brown fox jumps over the lazy dog.</q>

<blockquote>: For longer, block-level quotations.

<blockquote>
    "The only limit to our realization of tomorrow is our doubts of today."
</blockquote>

Abbreviations: <abbr>
- Indicates an abbreviation, with a title attribute explaining its meaning.
```
<abbr title="World Wide Web">WWW</abbr>
```

3. Example: Combining Formatting Elements

<!DOCTYPE html>
<html>
<head>
    <title>Text Formatting Example</title>
</head>
<body>
    <h1>Welcome to HTML Text Formatting</h1>
    <p>This is a <strong>bold</strong> and <em>italicized</em> example of formatted text.</p>
    <p>You can write equations like: E = mc<sup>2</sup> or H<sub>2</sub>O.</p>
    <p>For code snippets: <code>console.log('Hello, World!');</code></p>
    <blockquote>
        "Good design is obvious. Great design is transparent."
    </blockquote>
    <p><mark>Highlighted text</mark> draws attention.</p>
    <p>Use <abbr title="Hypertext Markup Language">HTML</abbr> to build your webpage!</p>
</body>
</html>

4. Best Practices for Text Formatting

Use Semantic Elements:
Prefer  and  over  and  to convey meaning as well as style.
Avoid Overuse:
Excessive formatting can make text appear cluttered. Use formatting sparingly for clarity.
Maintain Accessibility:
Use attributes like title in <abbr> and <blockquote> to provide context for users with assistive technologies.
Combine Elements:
Use combinations (e.g., bold and italic) judiciously to enhance emphasis without overcomplicating the content.

5. Hands-On Activity: Text Formatting

Open your text editor and create a new file called text_formatting.html.

Write the following code:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Text Formatting</title>
</head>
<body>
    <h1>Learn Text Formatting</h1>
    <p><strong>Bold</strong> and <em>Italic</em> text are great for emphasis.</p>
    <p>Highlight important content using <mark>highlighted text</mark>.</p>
    <p>Here’s an equation: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>
    <p>Example of a blockquote:</p>
    <blockquote>
        "The journey of a thousand miles begins with one step." - Lao Tzu
    </blockquote>
</body>
</html>

Save the file and open it in a browser to see how the formatted text appears.

6. Summary

Text formatting allows you to style and emphasize content effectively.
Use semantic tags like  and  to add both style and meaning.
Avoid excessive formatting to maintain readability and clarity.

This module equips you with the tools to format text in a visually appealing and meaningful way. In the next module, we’ll explore working with links to connect your web pages and resources seamlessly!