What is HTML Text Formatting and how to use this on web pages.
2021-10-12 12:34 · 9 min read
Text Formatting in HTML.
On web pages, we deal mostly with lots of text, suck as paragraph tag, heading, preformatted text.
Sometimes we want to highlight some text, and sometimes we want the text to look different from others.
HTML5 provides in-text formatting tags to apply specific text-related styles to portions of text. This topic includes examples of HTML text formatting such as highlighting, bolding, underlining, subscript, and stricken text
In this tutorial, you will learn about these tags briefly.
Example:- To make text bold and italic;
This is bold text
This is italic text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- simple example of text formating tags-->
<p> This is <b>bold</b> text </p>
<p> This is <i>italic</i> text </p>
<p> This is <sub>subscript</sub> and this is <sup>superscript</sup> </p>
</body>
</html>Do you know?
You can use text formatting in CSS also:-
<style>
h1{
font-style: italic;/*to make text italic*/
font-weight: bold;/*to make text bold*/
}
</style>Click here to learn more about CSS
</Text Formating >
Highlighting
The <mark> element is new in HTML5 and is used to mark or highlight text in a document.
The most common example would be in the results of a search where the user has entered a search query and results are shown highlighting the desired query. Here is a simple code example of a mark tag.
Output:
Here is some content from an article that contains the searched query that we are looking for. Highlighting the text will make it easier for the user to find what they are looking for.
Bold, Italic, and Underline
Bold text with HTML <b> and <strong>
The <b> is just bold the text without adding any importance to the text.
and the <strong> is also bold the text as well as added semantic "strong" importance and when browser/Search engine display this text they understand this text as important portion of article.
<b>This text is bold</text is bold</b>
<strong>This text is strong</strong>
lic text with HTML <i> and <elic text with HTML <i> and <elic text with HTML <i> and <elic text with HTML <i> and <e
So the Question is , what is the difference between b tag and strong ? or which tag we have to use in our article ? and which better for SEO ?
<strong> is used to indicate that the text is fundamentally or semantically important to the surrounding text, while <b> indicates no such importance and simply represents text that should be bolded.
Let discuss the different between b tag and strong deeper.
If you were to use <b> a text-to-speech program would not say the word(s) any differently than any of the other words around it - you are simply drawing attention to them without adding any additional importance. By using <strong>, though, the same program would want to speak those word(s) with a different tone of voice to convey
that the text is important in some way
Conclusion:-If you just want to bold text than we use b tag but if we also want to screen reader software or search engine to read it as important text than use strong tag.
Italic text with HTML <i> and <em>
As we discuss above “i” tag and em effects look the same but the importance is different.
The <b> is just Italic the text without adding any importance to the text.
and the <strong> is also Italic the text as well as added semantic importance.
<i>Italicized Text Here</i>
<em>Italicized Text Here</em>
What is the difference ? and which one we have to use ?
<em> is used to indicate that the text should have extra emphasis that should be stressed, while <i> simply represents text which should be set off from the normal text around it. <em> is used to indicate that the text should have extra emphasis that should be stressed, while <i> simply represents text which should be set off from the normal text around it. that the text is important in some way
For example, if you wanted to stress the action inside a sentence, one might do so by emphasizing it in italics via
<em>: "Would you just submit the edit already?"
But if you were identifying a book or newspaper that you would normally italicize stylistically, you would simply use <i>: "I was forced to read Romeo and Juliet in high school.
UnderLine text with HTML <u>
While the <u> element itself was deprecated in HTML 4, it was reintroduced with alternate semantic meaning in HTML 5 - to represent an unarticulated, non-textual annotation. You might use such a rendering to indicate misspelled text on the page, or for a Chinese proper name mark.
<p><u>Hypertext Markup Language</u> is the standard markup language
for documents designed to be displayed in a web browser</p>Abbreviation in HTML
To mark some expression as an abbreviation, use <abbr> tag:
If present, the title attribute is used to present the full description of such abbreviation.
<p>I like to write <abbr title="Hypertext Markup Language">HTML</abbr></p>Inserted tag in HTML
To mark text as inserted, use the <ins> tag:
<p>I like to write <abbr title="Hypertext Markup Language">HTML</abbr></p>Deleted tag in HTML
To mark text as deleted, use the < del> tag:
<del>Deleted Text</del>Stricken tag in HTML
To strike through text, use the <s> tag:
Not Supported in HTML5
<s>Struck-through text here</s>Superscript, Subscript, and small in HTML
To offset text either upward or downward you can use the tags <sup> and <sub>
Superscript in HTML
To create superscript: <sup> tag:
<p>Einstein's greatest equation, E = mc<sup>2</sup></p>Subscript in HTML
To create Subscript: <sub> tag:
<p>Sodium bicarbonate, commonly known as baking soda formula is NaHCO<sub>3</sub></p>
Small in HTML
To defines smaller text : <small> tag:
<p>The is a normal text</p>
<small>The is a small text</small>
