“This article delves into HTML Text Formatting, showcasing different methods to style text. HTML offers text formatting options similar to those in word processing software like MS Word. Let’s explore a few of these options with an example. In this example, we demonstrate text formatting using HTML’s strong, small, and highlight features.”
<!DOCTYPE html>
<html>
<body>
<h2>Welcome To GeeksforGeeks</h2>
<!–Text in Strong–>
<strong>Hello Geeks</strong>
<br>
<!–Text in small–>
<small>Hello Geeks</small>
<br>
<!–Text in Highlight–>
<mark>Hello Geeks</mark>
</body>
</html>
“Emphasizing Text with Bold or Strong: To emphasize text in HTML, we have two options. First, we can make text bold using the `<b>` tag, which requires both an opening `<b>` and closing `</b>` tag. Any text we want to make bold should be enclosed within these tags. Alternatively, we can use the `<strong>` tag to not only make text bold but also give it added semantic importance. The `<strong>` tag also starts with `<strong>` and ends with `</strong>`.
Example 1: In the following example, we illustrate text formatting to show it as regular, bold, and strongly emphasized.”
<!DOCTYPE html>
<html>
<head>
<title>Bold Text</title>
</head>
<body>
<!–Normal text–>
<p>Hello GeeksforGeeks</p>
<!–Text in Bold–>
<p>
<b>Hello GeeksforGeeks</b>
</p>
<!–Text in Strong–>
<p>
<strong>Hello GeeksforGeeks</strong>
</p>
</body>
</html>
“Adding Emphasis with Italics or `<em>`: In HTML, we have two ways to emphasize text. First, we can italicize text using the `<i>` tag, which starts with `<i>` and ends with `</i>`. This tag is used to create an italic effect for text.
Alternatively, we can use the `<em>` tag to not only make text italic but also give it added semantic importance. Similar to the `<i>` tag, the `<em>` tag begins with `<em>` and concludes with `</em>`.
Example 2: In the following example, we demonstrate text formatting to showcase it as italicized or emphasized.”
<!DOCTYPE html>
<html>
<head>
<title>Italic</title>
</head>
<body>
<!–Normal text–>
<p>Hello GeeksforGeeks</p>
<!–Text in Italics–><p>
<i>Hello GeeksforGeeks</i>
</p>
<!–Text in Emphasize–>
<p>
<em>Hello GeeksforGeeks</em>
</p>
</body>
</html>
Highlighting a text: It is also possible to highlight a text in HTML using the <mark> tag. It has an opening tag <mark> and a closing tag </mark>.
Example: The below example describes the use of the <mark> tag that is used to define the marked text.
<!DOCTYPE html>
<html>
<head>
<title>Highlight</title>
</head>
<body>
<!–Text in Normal–>
<p>Hello GeeksforGeeks</p>
<!–Text in Highlight–>
<p>
<mark>Hello GeeksforGeeks</mark>
</p>
</body>
</html>
Making a text Subscript or Superscript: The <sup> element is used to superscript a text and the <sub> element is used to subscript a text. They both have an opening and a closing tag.
Example: The below example describes the use of the <sup> & <sub> tags that are used to add the superscript & subscript texts to the HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Superscript and Subscript</title>
</head>
<body>
<!–Text in Normal–>
<p>Hello GeeksforGeeks</p>
<!–Text in Superscript–>
<p>Hello
<sup>GeeksforGeeks</sup>
</p>
<!–Text in Subscript–>
<p>Hello
<sub>GeeksforGeeks</sub>
</p>
</body>
</html>
“Reducing Text Size with `<small>`: In HTML, we can decrease the font size of text using the `<small>` element. Simply enclose the text you want to appear smaller within `<small>` and `</small>` tags.
Example: Below, we illustrate the application of the `<small>` tag for adjusting font sizes.”
<!DOCTYPE html>
<html>
<head>
<title>Small</title>
</head>
<body>
<!–Text in Normal–>
<p>Hello GeeksforGeeks</p>
<!–Text in small–>
<p>
<small>Hello GeeksforGeeks</small>
</p>
</body>
</html>
“Crossing Out Text with `<del>`: In HTML, we can create a strikethrough effect to indicate deleted text using the `<del>` element. It involves using both an opening `<del>` tag and a closing `</del>` tag.
Example: Below, we demonstrate the usage of the `<del>` tag to visually mark a section of text as deleted within a document.”
<!DOCTYPE html>
<html>
<head>
<title>Delete</title>
</head>
<body>
<!–Text in Normal–>
<p>Hello GeeksforGeeks</p>
<!–Text in Delete–>
<p> <del>Hello GeeksforGeeks</del> </p>
</body>
</html>
“Highlighting Added Text with `<ins>`: In HTML, we can emphasize newly added or inserted text by underlining it using the `<ins>` element. This element consists of both an opening `<ins>` tag and a closing `</ins>` tag.
Example: In the following example, we illustrate the purpose of the `<ins>` tag, which is employed to indicate a block of inserted text.”
<!DOCTYPE html>
<html>
<head>
<title>Inserting the Text</title>
</head>
<body>
<!–Text in Normal–>
<p>Hello GeeksforGeeks</p>
<!–Text in Insert–>
<p>
<ins>Hello GeeksforGeeks</ins>
</p>
</body>
</html>
Not a member yet? Register now
Are you a member? Login now