Updated March 18, 2023
Introduction to HTML Text Formatting Tags
Formatting text is an important part of modern internet web pages; even when we were limited to having text-based web browsers, text formatting such as size, orientation, etc., was available. With modern HTML revisions, there are a ton of HTML Tags that can be used to make the text appearance to your liking.
Formatting Text with HTML tags
Below we will discuss some important HTML tags that are used to format text:
1. Formatting Text as bold in an HTML
HTML has two different tags to set the text to a bold appearance. One is <b> and the other one is <strong> while both produce similar output. The <b> tag is a physical tag, only to display the text in bold, and it does not add any value of importance in the browser.
Example
Code:
<!DOCTYPE>
<html>
<body>
<p> <b>Here is some text in bold. </b></p>
</body>
</html>Output :
The <strong> tag, on the other hand, is considered as a logical tag, and it is used to inform the browser that the text in the tag has some logical importance.
Example
Code:
<!DOCTYPE>
<html>
<body>
<p> <strong>This is an important content formatted using the strong tag </strong>, and this is just
normally formatted text</p>
</body>
</html>Output:
2. Setting Text as Italic in HTML5
Just as setting text as Bold, you can use <i> tag and <em> tag to set text as italic on HTML5.
Using <i> is for, just like using <b>, physical display of text as italic and the tag <em> while also showing the text as italic on display, lets the browser know that it has semantic importance.
Example
Code:
<!DOCTYPE>
<html>
<body>
<p> <i> This is the first para in italic text. </i></p>
<p> <em> This content is made italics with the em tag</em>, This is normal text </p>
</body>
</html>Output:
3. Highlighting Text with HTML Code
In situations where you want to highlight some text with a highlighter effect, the tag <mark> can be used; with default CSS, the tag makes the background of text as yellow, helping you grab a visitor’s attention on that text easily.
Example
Code:
<!DOCTYPE>
<html>
<body>
<h3> This text uses <mark> Mark</mark> tag to highlight text on the page </h3>
</body>
</html>Output:
4. Underlining Text in HTML
The HTML tag <u> can be used to add an underline in the text. Be careful not to use underlining with blue text as it may confuse visitors that the text is a link.
Example
Code:
<!DOCTYPE>
<html>
<body>
<p> <u> This is Text with underline tag. </u> </p>
</body>
</html>Output:
5. Text with a strikethrough
In cases where you need to draw a horizontal line through the text, tag <strike> can be used. The line drown is thin, so the text it is crossing can still be read easily.
Example
Code:
<!DOCTYPE>
<html>
<body>
<p> <strike> Here is a sentence with strike through text </strike>. </p>
</body>
</html>Output:
6. Writing in Monospace font in HTML
Using Monospace can be useful in situations where you want to quote something or you want to display some code in the browser. The Monospace code, as the name suggests, makes the width of every character the same. To get it on a browser, we have to use the <tt> tag.
Example
Code:
<!DOCTYPE>lt;html>
<body>
<p> This is normal text. <tt>This is some sample text in monospace fonts, neat. </tt> </p>
</body>
</html>Output:
7. Subscripted Text in HTML
In math and chemistry, using subscript is an absolute requirement on many occasions. In general writing, too, you may come across situations where a subscript text is suitable to use. In HTML, any text under the <sub> tag will work as a subscript in the browser.
Example
Code:
<!DOCTYPE>
<html>
<body>
<p> This is normal text <sub>Notice something different with this text? </sub> </p>
</body>
</html>Output:
8. Deleted Text in HTML5
<del> tag is used as a logical way of telling the browser that text inside the text is deleted. Keep in mind that to a user, the shown text is the same as the tag in strikethrough tag, meaning it is shown in strikethrough formatting.
Example
Code:
<!DOCTYPE>
<html>
<body>
<p> This is normal text <del> This is text between del tag. </del> </p>
</body>
</html>Output:
9. Superscript Text formatting in HTML5
Text in <sup> tag is shown in superscript. This is useful in math, chemistry and other places where math is involved. You can use the tag when citing with adding in-page links with too.
Example
Code:
<!DOCTYPE>
<html>
<body>
<p> This is Normal text<sup> This text is in superscript. </sup> </p>
</body>
</html>Output:
10. Making Text size larger with HTML formatting
In cases where you need some text in a larger size on the screen, but you don’t want to use a heading or increase the font size with a tag, use <big> content between this tag will be displayed in noticeably larger text size.
Example
Code:
<!DOCTYPE>
<html>
<body>
<p> This is Normal text <big> This text in in larger size. </big> </p>
</body>
</html>Output:
11. Making Text smaller with HTML
Like the tag <big>, you can use <small> to make text smaller on the screen without using CSS or headings.
Example
Code:
<!DOCTYPE>
<html>
<body>
<p> This is Normal text <small> the size of this text is smaller </small> </p>
</body>
</html>Output:
Conclusion
Now that you have learned how the formatting of text in HTML works, you should be able to design pages with correct and professional-looking text layout and formatting. It would help if you used normal text and formatting where possible; using custom formatting only when needed gives your pages a neat look. The normal text size is important too, too small, and the readably will be affected negatively, and if it is too large, there will be less information on the screen at once.
Recommended Articles
This has been a guide to HTML Text Formatting Tags. Here we discuss the basic concept, how to format text by using different HTML Formatting tags. You may also have a look at the following articles to learn more –
