Some tags in HTML are provided only for text formatting. Using these tags, you can control the presentation and position of text on the web page. As you can bold or underline text.
You can do this work in a text editor with a button click, but in HTML, you use tags for this. Some common formatting types that you apply to text are listed below.
1. Bold
2. Italic
3. Underline
4. Marked
5. Superscript
6. Subscript
7. Small
8. Deleted
Formatting HTML Text
HTML <b> Tag
<b> Tag is used to make a text bold by HTML. For this, you can write text between start and end tags.
<b> This text will be bolded. </b>
Output: - This text will be bolded
HTML <i> Tag
In HTML, <i> tag is used to make a text italic.
<i> This text will be italic </i>
Output: - This text will be italic
HTML <ins> Tag
<Ins> tag is used to underline any text.
<ins> This text will be underlined </ins>
Output: - This text will be underlined
HTML <mark> Tag
If you want to highlight a text, you can use the <mark> tag for it.
<mark> this text will be highlighted </mark>
Output: - this text will be highlighted
HTML <sup> Tag
You can use this <sup> tag for super sript text.
<p>Normal text</sup>Super scripted text</sup>Normal text</p>
<p>Normal text</sup>Super scripted text</sup>Normal text</p>
Output: -This is normal text Super scripted text Normal text
HTML <sub> Tag
If you want to add text to the subscript then you will use the <sub> tag.
<p> Normal text <sub> Subscripted text </ sub>Normal text </ p>
Output: - Normal text Subscripted text Normal text
HTML <small> Tag
If you want to keep a text smaller than other text, then you can use the <small> tag for it. Many editors also do this in highlighted text.
<p> Normal Text <small> Small Text </ small> Normal text </ p>
Output: - Normal Text Small text Normal text
HTML <del> Tag
You can use the <del> tag to show a text deleted. When a tag is deleted, then that text is displayed through the line.
<p> <del> This text will be deleted </ del> </ p>
Output: - This text will be deleted
Below is a complete example of the HTML text formatting tag.
<html>
<head>
<title> Text Formatting </title>
</head>
<body>
<p> Normal text <b> This text will be bolded </b> Normal text </p>
<p> Normal text <i> This text will be italic </i> Normal text </p>
<p> Normal text <ins> This text will be underlined Normal text </ins> </p>
<p> Normal text <mark> This text will be highlighted </mark> Normal text </p>
<p> Normal text <sup> Super scripted text </sup> Normal text </p>
<p> Normal text <sub> Subscripted text </sub> Normal text </p>
<p> Normal Text <small> Small Text </small> Normal Text </p>
<p> Normal Text <del> This text will be deleted </del> Normal Text </p>
</body>
</html>
<head>
<title> Text Formatting </title>
</head>
<body>
<p> Normal text <b> This text will be bolded </b> Normal text </p>
<p> Normal text <i> This text will be italic </i> Normal text </p>
<p> Normal text <ins> This text will be underlined Normal text </ins> </p>
<p> Normal text <mark> This text will be highlighted </mark> Normal text </p>
<p> Normal text <sup> Super scripted text </sup> Normal text </p>
<p> Normal text <sub> Subscripted text </sub> Normal text </p>
<p> Normal Text <small> Small Text </small> Normal Text </p>
<p> Normal Text <del> This text will be deleted </del> Normal Text </p>
</body>
</html>
The above web page will show as it runs the script given above.
Styling HTML Text
CSS is used to style text, such as changing its color or changing font family and so on.
CSS is a big topic. You can get more information about CSS from CSS in Hindi tutorial. Here are just a few styles used for your understanding. For this, you use Style tag. And give a CSS property and its values.
Changing Text Color
To change the color of the text of any tag, you use the color property of CSS. And after that, putting the colon to name the color.
<p style = "color: red"> This text will be red. </ p>
Changing Font Family
To change the font family of text, you use the font-family property and give the name of the font family as the value.
<p style = "font-family: Arial"> This text will be in Arial </ p>
Changing Text Size
To change the size of the text, you use the font size property and give the size you want as the value.
<p style = "font-size: 45"> This size is changed by style tag. </ p>
Changing Text Position
To change the position of text, the text-align property is used and as value, you can pass left, right or center.
<p style = "text-align: center"> This position is change by style tag </ p>
An example of this is being given below.
<html>
<head>
<title> Text Formatting </title>
</head>
<body>
<p style = "color: red"> This text will be red. </p>
<p style = "font-family: Arial"> This text will be in Arial </p>
<p style = "font-size: 45"> This size is changed by style tag. </p>
<p style = "text-align: center">
This position is changed by style tag.
</p>
</body>
</html>
The above script will generate the given web page.
Hopefully, this "HTML Tutorial - Format and Style” would be helpful for you. If it's so please help your friends and other bloggers to share this post on social media. If you have any question related to the post, please comment on the comment box and also follow this website for more information about the blogging and SEO tips.
Previous:- How to use Heading tag in HTML? Next:- How to use Link tag in HTML?
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.