</HTML Text Formatting>

Text Formatting in HTML.

In web pages we deal mostly with lots text , suck as paragraph tag , heading , preformated text .
Some time we want highlight some text , and sometime we want text to look different from other .
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 this 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>

Try it Yourself

Do you know ?
You can use text formating 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 in css

HTML_Syntax First_Web_Page Html_Elements Headings Video_Tag Html_Attributes Audio_Tag Style Formatting Images Table Lists Iframe Symbols HTML_Quiz

</Text Formating >

Highlighting

The 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 were 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.

				
				<p>Here is some content from an article that contains the <mark>searched query</mark>
that we are looking for. Highlighting the text will make it easier for the user to
find what they are looking for.</p>

Try it Yourself

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 and

The is just bold the text without adding any importance to the text.
and the 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</b>
				<strong>This text is strong</strong>

Try it Yourself

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 ?

is used to indicate that the text is fundamentally or semantically important to the surrounding text, while 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 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 , 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 and

As we discuss above i tag and em effect look same but importance different .
The is just Italic the text without adding any importance to the text.
and the is also Italic the text as well as added semantic importance .

				
				
				<i>Italicized Text Here</i>
				<em>Italicized Text Here</em>

Try it Yourself

What is the difference ? and which one we have to use ?

is used to indicate that the text should have extra emphasis that should be stressed, while simply represents text which should be set off from the normal text around it. is used to indicate that the text should have extra emphasis that should be stressed, while 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
: "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 was forced to read Romeo and Juliet in high school.

UnderLine text with HTML

While the 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>

Try it Yourself

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>

Try it Yourself

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>

Try it Yourself

Deleted tag in HTML

To mark text as deleted, use the < ~~del~~> tag:

				
				
				<del>Deleted Text</del>

Try it Yourself

Stricken tag in HTML

To strike through text, use the <s> tag:
Not Supported in HTML5

				
				
		<s>Struck-through text here</s>

Try it Yourself

Superscript , Subscript and small in HTML

To offset text either upward or downward you can use the tags and

Superscript in HTML

To create superscript: tag:

				
				
		<p>Einstein's greatest equation, E = mc<sup>2</sup></p>

Try it Yourself

Subscript in HTML

To create Subscript: tag:

				
				
		<p>Sodium bicarbonate, commonly known as baking soda formula is  NaHCO<sub>3</sub></p>

Try it Yourself

Small in HTML

To defines smaller text : tag:

				
				
		<p>The is a normal text</p>
		<small>The is a small text</small>

Try it Yourself