HTML Formatting

HTML formatting is used to format text such as bold, italic, underline, and so on.

Formatting Tags

Bold

<strong>Bold text</strong>
<b>Bold text as well</b>

Italic

<em>Italic text</em>
<i>Italic text as well</i>

Underline

<u>Underlined text</u>

Strikethrough

<del>Strikethrough text</del>
<s>Strikethrough text as well</s>

Mark/Highlight

<mark>Highlighted text</mark>

Small

<small>Small text</small>

Superscript and Subscript

<p>x<sup>2</sup> (superscript)</p>
<p>H<sub>2</sub>O (subscript)</p>

Inserted and Deleted

<ins>Inserted text</ins>
<del>Deleted text</del>

Case Study: Academic Form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Statement of Grades</title>
</head>
<body>
    <h1>Statement of Grades</h1>

    <table border="1">
        <tr>
            <th>Course</th>
            <th>Credits</th>
            <th>Grade</th>
        </tr>
        <tr>
            <td><strong>Web Programming</strong></td>
            <td>3</td>
            <td><em>A</em></td>
        </tr>
        <tr>
            <td><strong>Database</strong></td>
            <td>3</td>
            <td><em>A-</em></td>
        </tr>
        <tr>
            <td><strong>Algorithms</strong></td>
            <td>3</td>
            <td><em>B+</em></td>
        </tr>
    </table>

    <p><strong>Semester GPA:</strong> 3.75</p>
    <p><strong>Cumulative GPA:</strong> 3.68</p>

    <hr>

    <p><small>Note: This statement of grades was printed on January 15, 2024</small></p>
</body>
</html>

Everyday Case Study

Case: A developer needs to create a price list.

<h2>Tuition Fee List</h2>

<table>
    <tr>
        <th>Item</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Semester Tuition</td>
        <td>$50,000</td>
    </tr>
    <tr>
        <td><del>$60,000</del> <ins>$55,000</ins></td>
        <td><mark>Promotion</mark></td>
    </tr>
    <tr>
        <td>Laboratory Fee</td>
        <td>$5,000</td>
    </tr>
</table>

Combining Formatting

<p><strong><em>Bold and italic text</em></strong></p>
<p><strong><mark>Bold and highlighted text</mark></strong></p>
<p><em><small>Italic and small text</small></em></p>

Best Practices

Use  instead of : For semantics
Use  instead of : For semantics
Don't overdo it: Use them in moderation
CSS for styling: Use CSS for decoration
Accessibility: Consider screen readers

Summary

HTML formatting is used to format text. Use semantic tags like  and  for accessibility.