FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/html5.jpg


@coder 1040

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>

 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer