HTML - Formatting
HTML, or HyperText Markup Language, serves as the backbone of the World Wide Web, providing a standardized way to structure and present content on the internet. In the vast landscape of HTML, formatting tags play a important role in shaping the visual appearance of web pages. These tags act as styling tools, allowing developers to control how text and other elements are displayed.
Text formatting is a very common practice when typing a document in word. You might have bold, italicized or underlined the text. Why you did it was to draw the attention of the reader to that piece of text as it conveyed something important.
In this exploration, we'll delve into the realm of HTML formatting tags, unraveling their functions and their use cases. Let’s look at them
Bold Text (<b> tag)
It displays the content specified within <b>...</b> element as bold.
Example
<b> Hello </b>
Italic Text (<i> tag)
It displays the content specified within <i>...</i> element in italicized.
Example
<i> Hello </i>
Underlined Text (<u> tag)
It displays the content specified within <u>...</u> element with underline.
Example
<u> Hello </u>
Larger Text (<big> tag)
It displays the content specified within <big>...</big> as one font size larger than the rest of the text surrounding it.
Example
<big> Hello </big>
Smaller Text (<small> tag)
It displays the content specified within <small>...</small> element as one font size smaller than the rest of the text surrounding it.
Example
<small> Hello </small>
Superscript Text (<sup> tag)
It displays the content specified within <sup>...</sup> element in superscript.
The font size of the superscript character is the same size as the other characters but is displayed half a character's height above the other characters.
Example
X <sup> 3 </sup>
Subscript Text (<sub> tag)
It displays the content specified within <sub>...</sub> element in subscript.
The font size of the subscript character is the same as the other characters but is displayed half a character's height below the other characters.
Example
H <sub> 2 </sub> O
Strike Text (<strike> tag)
It displays the content specified within <strike>...</strike> element with strikethrough, which is a thin line through the text.
Example
<strike> Hello </strike>
Inserted Text (<ins> tag)
It displays the content specified within <ins>...</ins> element as inserted text.
Example
<ins>Hello</ins>
Deleted Text (<del> tag)
It displays the content specified within <del>...</del> element as deleted text.
Example
<del> Hello </del>
Marked Text (<mark> tag)
It displays the content specified within <mark>...</mark> element, as marked text with yellow color. Basically, it highlights the text in yellow color.
Example
<mark> Hello </mark>
Emphasized Text (<em> tag)
It displays the content specified within <em>...</em> element as emphasized text. It is similar to <i> tag.
Example
<em> Hello </em>
Strong Text (<strong> tag)
It displays the content specified within <strong>...</strong> element as important text. It is similar to <b> tag
Example
<strong> Hello </strong>
Full Program
<html>
<body>
<b> It will bold the text inside it </b> <br/>
<i> It will italcize the text inside it </i> <br/>
<u> It will uderline the text inside it </u> <br/>
<strike> defines the thin line through the text </strike>
<hr>
<big> defines big text. Font size is 7 </big> <br/>
<small> defines small text. Font size is 1 </small>
<hr>
<em> defines emphasized text. same as italic </em> <br/>
<strong> defines strong text. same as bold </strong>
<hr>
Subscript H<sub>2</sub>O <br/>
Superscript X <sup>3</sup>
<hr>
My favourite color is <del>Red</del><ins>Blue</ins> <br/>
Dont forget to take Exam on <mark>Monday </mark>
</body>
</html>
Output:
Conclusion
HTML formatting tags are indispensable tools for web developers, allowing them to shape the visual appearance of content and enhance the overall user experience.
