14 Types of HTML Formats and Why They Are Important

By Indeed Editorial Team

Published September 23, 2022

The Indeed Editorial Team comprises a diverse and talented team of writers, researchers and subject matter experts equipped with Indeed's data and insights to deliver useful tips to help guide your career journey.

In web development, an HTML document allows you to design and customize the display of a web page. There are many ways you can format this document, such as making text smaller or bolder. Knowing what some of these formatting options are can help you to create a web page that most closely aligns with your project and creative design goals. In this article, we review a list of 14 HTML formats you can use to modify your HTML document.

Related: Guide To Understanding HTML vs. CSS (Plus Differences)

Why is HTML formatting important?

HTML formatting is important because it allows you to customize your text and create unique websites and web pages that are engaging for users. These formats are especially useful for web design professionals who want to add a more personalized element while having the text still be neat and clean. You can create visually appealing web pages that are elegant and capable of enhancing the user interface. This type of formatting also creates more uniformity throughout the web page, streamlining your design so the text is easier to read and understand.

Related: How To View HTML Using Different Internet Browsers

List 14 of HTML formats

Here's a list of 14 formats you can use for the text in your HTML document:

1. Bold text

The bold format causes the text between the bold tags to appear darker and thicker. This bold effect helps to make the text more noticeable when users read through your web page. If you want to emphasize a particular message or draw the user's attention to a specific area, then bold is a viable solution.

Related: HTML vs. JavaScript: Definitions, Differences and Why They Matter

2. Italic text

The italic format causes the text between the italic tags to appear at a slight angle. It's normal to use Italics when you mention the title of a personalized work, like a movie or a book. Sometimes italics help to highlight an unspoken idea or concept that you want the user to consider.

3. Underlined text

The underlined format causes the text between the underlined tags to appear with a thin line under it. You primarily use underlines to emphasize an important part of the text. Be mindful that links in web pages are usually in the underlined format by default.

4. Strikethrough text

The strikethrough format causes the text between the strikethrough tags to appear with a thin line running straight through the center. You can also call this the strike-out format. Using this tool often signifies that a piece of text is old or irrelevant.

5. Preformatted text

The preformatted format causes the text between the preformatted tags to appear in the web browser as it does in a text editor. This includes other elements like spaces, punctuations and carriage returns. Normally, web browsers ignore elements like multiple spaces, but you can preserve these qualities when you use this format.

6. Superscript text

The superscript format causes the text between the superscript tags to appear in a smaller font size than the surrounding characters. However, it also sits a few inches above the other characters. You often use this format for formulas, scientific specifications and mathematical expressions.

7. Subscript text

The subscript format causes the text between the subscript tags to appear smaller than the other surrounding characters. Additionally, it sits a few inches below the other nearby characters. It's common to use this format for mathematical equations and chemical formulas. You also use it for footnote characters and copyright or trademark symbols.

8. Inserted text

The inserted format causes the text between the inserted tags to appear inserted in the paragraph with an underline. You often pair this format with another format to show that it's replacing something else. For example, you can strikethrough the word 'flowers' and then use the inserted format for the word 'chocolates'. This shows that the word 'chocolates' replaces the word 'flowers' in the paragraph.

9. Deleted text

The deleted format causes the text between the deleted tags to appear with a line running through the center. This format works almost identically to the strikethrough tool and they are mostly interchangeable. You often use this format with another format to signify the replacement of deleted text from the paragraph.

10. Larger text

The larger format causes the text between the big tags to appear in a font size that's much bigger than the rest of the surrounding text. You mainly use this format to emphasize an important piece of text. You might also make the typeface of a piece of text bigger so it's easier for users or yourself to find it at a later time.

11. Smaller text

The smaller format causes the text between the small tags to appear in a font size that's one font size smaller than the rest of the surrounding text. Instead of drawing attention to a piece of text, you use this format to make it less noticeable. You often employ the smaller format when you want to include a specific idea, but not emphasize it too much since it may not be as contextually relevant or poignant in relation to the surrounding text.

12. Strong text

The strong format causes the text between the strong tags to appear more emphasized than the surrounding text. It essentially tells the web browser that the text is more important. The formatted text may appear boldened, but the exact visual effect can vary depending on the browser you're using.

13. Font face

The font face format causes the text between the font face tags to appear in a different font. There are many fonts that you can use, like Courier, Times New Roman or Arial. However, be mindful that the user's computer may not be able to view certain fancy or specialized fonts. Try to use fonts that most users have installed on their computers by default.

Related: 20 Web-Safe Fonts To Impact Your Audience

14. Monospace font

The monospace format causes each letter of the text between the monospace tags to appear with the same width. Most fonts are variable-width fonts because letters usually have different widths. For example, a 'w' is wider than an 'l'. This format ensures that the spacing of all the letters is similar.

Explore more articles