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 and the other one is while both produce similar output. The 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> Here is some text in bold. </body> </html>

Output :

The 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> This is an important content formatted using the strong tag , and this is just normally formatted text </body> </html>

Output:

2. Setting Text as Italic in HTML5

Just as setting text as Bold, you can use tag and tag to set text as italic on HTML5. Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,492 ratings)Course Price
₹6999 ₹41999
View Course

Using is for, just like using , physical display of text as italic and the tag while also showing the text as italic on display, lets the browser know that it has semantic importance.

Example

Code:

<!DOCTYPE> <html> <body> This is the first para in italic text. This content is made italics with the em tag, This is normal text </body> </html>

Output:

3. Highlighting Text with HTML Code

In situations where you want to highlight some text with a highlighter effect, the tag 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 tag to highlight text on the page </h3> </body> </html>

Output:

4. Underlining Text in HTML

The HTML tag 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> This is Text with underline tag. </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> <strike> Here is a sentence with strike through text </strike>. </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> This is normal text. <tt>This is some sample text in monospace fonts, neat. </tt> </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 tag will work as a subscript in the browser.

Example

Code:

<!DOCTYPE> <html> <body> This is normal text Notice something different with this text? </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> This is normal text <del> This is text between del tag. </del> </body> </html>

Output:

9. Superscript Text formatting in HTML5

Text in 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> This is Normal text This text is in superscript. </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> This is Normal text <big> This text in in larger size. </big> </body> </html>

Output:

11. Making Text smaller with HTML

Like the tag <big>, you can use to make text smaller on the screen without using CSS or headings.

Example

Code:

<!DOCTYPE> <html> <body> This is Normal text the size of this text is smaller </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.

Introduction to HTML Text Formatting Tags