HTML Text Formatting Tags

HTML Text Formatting Tags
Nikhil
Published on 2021-07-01 04:50:41

HTML Text Formatting tags overview and code sample

While most HTML tags are used to create elements, HTML also 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.

Highlighting tags


The <mark> element is new in HTML5 and is used to mark or highlight text in a document "due to its relevance in another context".1 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.

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub list Example</title>
</head>
<body>
  <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>
</body>
</html>

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.

Common standard formatting is black text on a yellow background, but this can be changed with CSS.

 

Bold, Italic, and Underline


Bold Text


To bold text, use the <strong> or <b> tags:

<strong>Bold Text Here</strong>  or  <b>Bold Text Here</b>

What’s the difference? Semantics. <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.

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.

HTML BOLD TEXT EXAMPLE:

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub html boldtag example</title>
</head>

<body>
    <p>The following word uses a <b>bold</b> typeface.</p>
</body>

</html>

 
output:
 

The following word uses a bold typeface.

 

Italic Text


To italicize text, use the <em> or <i> tags:

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

What’s the difference? Semantics. <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.

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.

HTML Italic Text EXAMPLE:

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub html italic tag example</title>
</head>

<body>
    <p>The following word uses a <i>italicized</i> typeface.</p>
</body>

</html>

 

Underlined Text


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>This paragraph contains some <u>misspelled</u> text.</p>

HTML Underlined Text EXAMPLE

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub html underline tag example</title>
</head>

<body>
    <p>The following word uses a <u>underlined</u> typeface.</p>
</body>

</html>

 
output:
 

The following word uses a underlined typeface.

Abbreviation Tags


To mark some expression as an abbreviation, use <abbr> tag:

<p>I like to write <abbr title="Hypertext Markup Language">HTML</abbr>!</p>

If present, the title attribute is used to present the full description of such abbreviation.

HTML Abbreviation Tag EXAMPLE

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub html underline tag example</title>
</head>

<body>
  <p>I like to write <abbr title="Hypertext Markup Language">HTML</abbr>!</p>
</body>

</html>

 
output:
 

I like to write HTML!

Inserted, Deleted, or Stricken tags


To mark text as inserted, use the <ins> tag:

<ins>New Text</ins>

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

<del>Deleted Text</del>

To strike through text, use the <s> tag:

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

Anything that appears within <ins>...</ins> element is displayed as inserted text.

HTML Inserted Text Example

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub html Inserted tag example</title>
</head>

<body>
    <p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>

</html>

output:

I want to drink cola wine

Anything that appears within <del>...</del> element, is displayed as deleted text.

HTML Deleted Text Example

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub html delete tag example</title>
</head>

<body>
    <p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>

</html>

output:

I want to drink cola wine

HTML Strike Text Example:

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub html strike tag example</title>
</head>

<body>
    <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>

</html>

output:

The following word uses a strikethrough typeface.

Superscript and Subscript tags

To offset text either upward or downward you can use the tags <sup> and <sub>.

To create superscript:

<sup>superscript here</sup>

To create subscript:

<sub>subscript here</sub>

The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters.

HTML Superscript Text Example

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub html Superscript tag example</title>
</head>

<body>
    <p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>

</html>

output:

The following word uses a superscript typeface.

The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters.

HTML Subscript Text Example

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub html Subscript tag example</title>
</head>

<body>
    <p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>

</html>

output:

The following word uses a subscript typeface.

ATutorialHub Related Guide

HTML Tutorials Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website