Wednesday, May 18, 2022

HTML Formatting Tags

In HTML, you can use a text formatting process to make web pages look better. Basically, by using predefined elements for formatting (without using CSS), the text is improved to provide a more beautiful and user-friendly visual appeal to users. Among the most used tags are: italic text, bold text, highlighted text, important text, smaller text, underline text, marked text, deleted text, superscript text, subscript text and so on. In the HTML tutorial below, we will examine each of these tags separately, explain their syntax, and show code examples to better understand how they can be applied in a concrete way.

Read: HTML, CSS, and JavaScript Tools and Libraries

The <i> and <em> HTML Tags

We will discuss the <i> and <em> HTML tags together because they both define italic text. By using the <i> tag, web developers can display content in italics without placing any semantic importance upon it. On the flip side, by using the <em> tag, HTML programmers display the accented text with semantic importance. Let’s create an example using these labels. Here is how to use the <i> and <em> HTML tags:

<!DOCTYPE html>
<html>
    <body>
        <p>This text is italic</p>
        <p style="background-color: #5f9ea0; color: white;">
            <i>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus et molestie ac feugiat sed lectus. Sagittis aliquam malesuada bibendum arcu vitae
                elementum. Sem integer vitae justo eget magna fermentum.
            </i>
        </p>
        <p>This text is emphasized</p>
        <p style="background-color: #6495ed; color: white;">
            <em>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus sed vulputate odio ut. Sed adipiscing diam donec adipiscing tristique risus nec. Nisl vel
                pretium lectus quam id leo in. Vivamus arcu felis bibendum ut tristique et egestas.
            </em>
        </p>
    </body>
</html>

Rendering this code in the browser results in the following two examples:

HTML Formatting Tags <em> and <i>

The <b> and <strong> HTML Tags

The <strong> HTML tag is used to display bold text, giving additional importance to the text, while the <b> HTML tag defines the text as bold, without any additional importance. Here is an example of how to use the <b> and <strong> HTML tags:

<!DOCTYPE html>
<html>
    <body>
        <p>This text is bold</p>
        <p style="background-color: #008b8b; color: white;">
            <b>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices tincidunt arcu non sodales neque. Mi in nulla posuere sollicitudin. In egestas erat
                imperdiet sed euismod. Purus faucibus ornare suspendisse sed nisi lacus sed.
            </b>
        </p>
        <p>This text is strong</p>
        <p style="background-color: #483d8b; color: white;">
            <strong>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Sollicitudin tempor id eu nisl nunc mi. Ac
                feugiat sed lectus vestibulum.
            </strong>
        </p>
    </body>
</html>

Once more, when we render this HTML as a webpage, we get the following results:

HTML Format Tags Bold and Strong

Read: Some of the Coolest, Lesser Known HTML Tags

The <sup> and <sub> HTML Tags

The <sup> HTML tag refers to superscript, being set above the normal line and being smaller than the rest of the text. The <sub> HTML tag, meanwhile, refers to the subscript, being set below the baseline of the text and having a smaller font. Here is how to use the <sup> and <sub> HTML tags:

<!DOCTYPE html>
<html>
    <body>
        <p>Using the <b>SUP</b> tag</p>
        <p style="background-color: #e0ffff; color: black;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.<sup>Mi in nulla posuere sollicitudin. In egestas erat imperdiet sed euismod.</sup>
        </p>
        <p>Using the <b>SUB</b> tag</p>
        <p style="background-color: #87cefa; color: black;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.<sub>Sollicitudin tempor id eu nisl nunc mi. Ac feugiat sed lectus vestibulum.</sub>
        </p>
    </body>
</html>

Here is the result of using these HTML formatting tags:

HTML SUP and SUB Tags

The <mark> HTML Tag

Through this label, web developers can highlight a certain text in a document for reference purposes and more. Let’s see an example of how to use the <mark> HTML tag: 

<!DOCTYPE html>
<html>
    <body>
        <p>Using the <b>mark</b> tag</p>
        <p style="background-color: #6b8e23; color: black;">
            Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Est velit egestas dui id ornare arcu odio. Bibendum enim facilisis gravida neque convallis a cras semper. Gravida rutrum quisque non tellus orci ac
            auctor. Accumsan lacus vel facilisis volutpat.
            <mark> Est ultricies integer quis auctor. Pellentesque diam volutpat commodo sed. Montes nascetur ridiculus mus mauris vitae ultricies leo. Dictum fusce ut placerat orci. Bibendum enim facilisis gravida neque.</mark>
        </p>
    </body>
</html

This results in:

HTML mark Tag

The <small> HTML Tag

By using the <small> HTML tag, web devs can reduce the size of the text to a smaller size than the base size, which is most often used in the text regarding notification, secondary comments, or copyrights:

<!DOCTYPE html>
<html>
    <body>
        <p>Using the <b>small</b> tag</p>
        <p style="background-color: #db7093; color: black;">
            Auctor urna nunc id cursus.Neque sodales ut etiam sit. Tincidunt augue interdum velit euismod. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. Tincidunt dui ut ornare lectus. Tincidunt dui ut ornare
            lectus sit amet est placerat. Integer quis auctor elit sed. Sagittis purus sit amet volutpat consequat. Quis lectus nulla at volutpat diam ut venenatis.
            <small>Ac tincidunt vitae semper quis lectus nulla.Quis lectus nulla at volutpat diam ut venenatis. Ac tincidunt vitae semper quis lectus nulla.</small>
        </p>
    </body>
</html>

Here is the result of running this HTML code:

HTML small Format Tag

Read: Ten HTML Tags for More Modern Web Pages

The <del> HTML Tag

The HTML element <del> is used to display the element that was deleted, by barring it, showing that it has been deleted.

<!DOCTYPE html>
<html>
    <body>
        <p>Using the <b>del</b> tag</p>
        <p style="background-color: #fa8072; color: white;">
            Non consectetur a erat nam. Viverra accumsan in nisl nisi scelerisque eu. Tincidunt nunc pulvinar sapien et. Scelerisque purus semper eget duis. Eu non diam phasellus vestibulum lorem sed risus. Augue neque gravida in fermentum.
            Accumsan lacus vel facilisis volutpat est. Nunc sed velit dignissim sodales ut eu sem integer. Vitae tempus quam pellentesque nec. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi.
            <del>Laoreet sit amet cursus sit. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Amet justo donec enim diam vulputate. Netus et malesuada fames ac.</del>
        </p>
    </body>
</html>

Here is the result of using the <del> HTML tag:

HTML del Format Tag

The <ins> HTML Tag

By using the HTML element <ins>, web programmers can define a text that has been added to a certain document, the content of the tag being displayed as underlined. Here is an example:

<!DOCTYPE html>
<html>
    <body>
        <p>Using the <b>ins</b> tag</p>
        <p style="background-color: #800080; color: white;">
            Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Ac turpis egestas sed tempus. Dignissim diam quis enim lobortis scelerisque fermentum dui. Ipsum a arcu cursus vitae congue mauris rhoncus aenean. Tempus urna
            et pharetra pharetra massa massa ultricies. Adipiscing diam donec adipiscing tristique risus nec feugiat. Sed felis eget velit aliquet sagittis id.
            <del>Hendrerit gravida rutrum quisque non tellus orci ac. Sed elementum tempus egestas sed. Vulputate eu scelerisque felis imperdiet proin fermentum.</del>
            <ins>
                Cras sed felis eget velit. Urna id volutpat lacus laoreet. Amet consectetur adipiscing elit pellentesque habitant. Non nisi est sit amet facilisis magna etiam tempor orci. Sit amet volutpat consequat mauris. Quis blandit
                turpis cursus in hac habitasse platea. Eu mi bibendum neque egestas congue quisque egestas diam in.
            </ins>
        </p>
    </body>
</html>

HTML ins Format Tag

Final Thoughts on HTML Formatting Tags

In this HTML programming tutorial, the most used and common elements and HTML tags for modifying and formatting text have been addressed, but their list is much longer. With these HTML formatting tags, we can add a nice look to the page, making the text more readable and easy to assign with a well-set purpose. You can find many elements related to the semantics of the text, and the ones mentioned above are a good place to start using them.

Read more HTML programming and web development tutorials.

Popular Articles

Featured