HTML is a hypertext markup language used to design static web pages. It describes the structure of a webpage and consists of a series of elements. Elements in HTML tells the browser how to display content. Html formatting refers to changing the appearance of the text to make it look better. This is possible even without using CSS.
HTML Text Formatting Tasks for Beginners
In this tutorial, we shall focus on some of the basic HTML formatting techniques that you should know as a beginner.
Making the text Bold
To make some text bold in Html, we use the opening tag <b> and the crossing tag </b>. Any text between the two tags is in bold without any extra importance.
Example:
<body> <!-- This is normal text --> <p>This text is normal</p> <!-- This is bold text --> <p><b>This text is bold</b></p> </body>
Output:
This text is normal
This text is bold
Making the text Italic
The Italic tag <i> is used to indicate a part of the text in an alternative voice or a phrase from another language or thought.
Example:
<body> <!-- This is normal text --> <p>Please, I am not Italicized</p> <!-- This is Italicized text --> <p>This my new look when am Italicized</p> </body>
Output: Please, I am not Italicized
This my new look when am Italicized
Making the Text Superscript
Superscript text appears slightly above the normal line of type. It’s usually smaller than the rest of the text. A common use of superscript is in writing the dates. The superscript tags are: <sup> </sup>
Example:
<body> <!-- This is normal text --> <p>The date today is 19th November 2020</p> <!-- This is supercribed text --> <p>The date today is 19 <sup>th </sup> November 2020</p> </body>
Output: The date today is 19th November 2020
The date today is 19th November 2020
Making the text subscript
Unlike the superscript text, the subscript text appears half below the normal type line. It’s also rendered in a small font. Mostly the subscript can be used in writing formulas. The subscript tags are: <sub> </sub>
Example:
<body> <!-- This is normal text --> <p>Chemistry formulas H20, H2</p> <!-- This is subscript text --> <p>Chemistry formulas H<sub>2</sub>0, H<sub>2</sub>sub></p> </body>
Output: Chemistry formulas H20, H2
Chemistry formulas H20, H2
Making the text highlighted
The <mark> text formatting tag defines the text that is highlighted or marked for reference. This shows that the text is of special interest. In browsers, they show this text with a yellow background color.
Example:
<body> <!-- This is normal text --> <p> I am not marked</p> <!-- This is marked text --> <p> I am of great importance if you see me marked</p> </body>
Output:
Striking through the text
The strikethrough defines the text that has been deleted. Its always enclosed within the <del> opening tag and </del> closing tag. The web browsers usually strike a line through this deleted text.
<body> <!-- This is normal text --> <p> Not deleted text</p> <!-- This is deleted text --> <p> <del>Strike through text</del></p> </body>
Output: Not deleted text
Strike through text
Making the text smaller
The <small> closing tag and the </small> closing tag are used to make the text smaller than the normal text.
Example:
<body> <!-- This is normal text --> <p> I am not small enough to be small</p> <!-- This is small text --> <p> I am <small>small enough </small></p> </body>
Output: I am not small enough to be small
I am small enough
Making the text emphasized
This is almost similar to italic text since they appear the same, only that emphasizing the text is of importance. It’s usually enclosed in <em> </em> tags.
Inserted text
Browsers mark this text as underlined. This is the text that has been inserted into your document. The opening and closing tag of inserted text are <ins> </ins>
Example:
<body> <!-- This is normal text --> <p> This is not inserted text</p> <!-- This is inserted text --> <p> <ins>Thi is an example of an inserted txt</ins></p> </body>
Output: This is not inserted text
This is an example of an inserted text
Headings
There are six levels of Html headings. Each heading with different font size. Normally the font sizes reduce from h1 to h6.
<body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body>
Output:
Conclusion
In this tutorial, we have learned the 10 basic HTML Text Formatting Tasks. Although there are still plenty of more options, this list should help you get started. We will share a few more intermediate ones and expertise ones in the upcoming articles. Stay tuned to Code Underscored!
