How to Emphasize Text in a Document using HTML5?


Text may be emphasized in documents using a variety of HTML5 features and may aid in highlighting crucial information and make it simpler for readers to recognize vital elements right away. A frequently followed technique to emphasize a text is to make the text bold.

Different tags are used in HTML like − <b>, <i>, <u> etc to emphasize text, superscript text, add chemical formulations, and mathematical formulas.

Syntax

<p> <b>bold</b> <i>italic</i> <u>underline</u> </p>

Example

In this example, we will examine the different types of techniques to emphasize a text in an HTML5 document, such as &minus b> tag is used to make text bold, the i> tag is used to make the text italic, u> tag is used to underline text, the mark> tag is used to highlight text, the small> tag is used to make text smaller, the strong> tag is used to strongly emphasize text, the em> tag is used to emphasize text, the sup> tag is used for superscript, and the sub> tag is used for subscript.

Algorithm

Step 1: Determine which text should be highlighted.

Step 2: Select the proper HTML element for the sort of emphasis required (bold, italic, underline, and so on).

Step 3: Wrap the recognized text with the HTML element of your choice.

Step 4: Save and view the revised HTML document.

Example

<!DOCTYPE html>
<html>
<head>
	<title>Emphasize Text on Webpage</title>
</head>
<body>
	<h1>Text Emphasized With HTML 5</h1>
<p>
<!-- underline the text with u tag -->
Here we have <u>underlined</u> text.
</p>

<p>
<!-- b tag to bold text –->
		Lets <b>bold</b> the text.
</p>
<p>
<!-- highlight tag using mark tag -->
		This is how <mark>highlighted</mark> text look.
</p>
<p>
<!-- i tag to make text style italic -->
		Now, Let's try <i>italic</i> text.
</p>
<p>
<!-- strongly bold the text by using strong tag -->
		You can also <strong>strongly emphasized</strong> text.
</p>
<p>

<!-- em tag to emphasize text less than stronger -->
		Many websites <em>emphasize</em> text in this way.
</p>
<p> We can compress text with <small>small</small> text feature.
</p>
<p>
<!-- script the text using sup tag -->
		You can use superscript: x<sup>2</sup> while doing Maths.</p> <p>
//script the tag using sub tag//
You can also do subscript: H<sub>2</sub>O while doing science and math work.
</p>
</body>
</html>

Conclusion

In HTML5, text may be emphasized using a variety of techniques. The specific requirements of your work and the type of UI UX requirements define the approach to be used. By utilizing these HTML5 features, your website may stand out from the crowd and make sure that readers pay attention to the most crucial details of your website.

Updated on: 09-Aug-2023

76 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements