Practical 4 - CSU953 - CSE 2026 - Shoolini University

Create a static web page which defines all text formatting tags of HTML in tabular format

b: This tag is used to make text bold

strong: This tag is used to make text bold to make it look important

i: This tag is used to make text italic

em: This tag to make text emphasized.

mark: This tag is used to mark any text.

small: This tag is used to make text smaller

del: This tag is used to mark a text like deleted by strikethough i.e. by cutting the word.

ins: This tag is used to mark a text as inserted text.

sup: This tag is a superscript and is used to make move up i.e. it specifies inline text which is to be displayed as superscript for solely typographical reasons.

sub: This tag is a subscript and is used to make move down i.e. it specifies inline text which is to be displayed as subscript for solely typographical reasons.

Following is the hierarchy required for the tags:
  1. all the tags can be used anywhere regardless of its positions inside the body of the html

Code

                    
<!doctype html>
<html lang="en">
<head>
    <title>Practical 4 - CSU953 LAB 4 - CSE 2026</title>
</head>
<body>
<table class="table table-striped table-hover text-center align-middle caption-top">
    <caption>Table showing all the text formatting tags:</caption>
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">tags</th>
            <th scope="col">output</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td><b></td>
            <td><b>Bold text</b></td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td><strong></td>
            <td><strong>Important text</strong></td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td><i></td>
            <td><i>Italic text</i></td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td><em></td>
            <td><em>Emphasized text</em> </td>
        </tr>
        <tr>
            <th scope="row">5</th>
            <td><mark></td>
            <td><mark>Marked text</mark> </td>
        </tr>
        <tr>
            <th scope="row">6</th>
            <td><small></td>
            <td><small>Smaller text</small> </td>
        </tr>
        <tr>
            <th scope="row">7</th>
            <td><del></td>
            <td><del>Deleted text</del> </td>
        </tr>
        <tr>
            <th scope="row">8</th>
            <td><ins></td>
            <td><ins>Inserted Text</ins></td>
        </tr>
        <tr>
            <th scope="row">9</th>
            <td><sup></td>
            <td>(a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2ab</td>
        </tr>
        <tr>
            <th scope="row">10</th>
            <td><sub></td>
            <td>H<sub>2</sub>O is water </td>
        </tr>
    </tbody>
</table>
</body>
</html>

Output

Table showing all the text formatting tags:
# tags output
1 <b> Bold text
2 <strong> Important text
3 <i> Italic text
4 <em> Emphasized text
5 <mark> Marked text
6 <small> Smaller text
7 <del> Deleted text
8 <ins> Inserted Text
9 <sup> (a+b)2 = a2 + b2 + 2ab
10 <sub> H2O is water