HTML Formatting Tags
HTML Formatting Tags are used to change appearance of text for better look and feel than the default text. The formatting tags can make text bold, italic, underlined, etc.
All the formatting tags are paired tags. Anything written between any formatting tag will be displayed according to the tag in the browser. For example, anything written between <i> and </i> will display as italic text in the browser.
There are different tags for various formatting tags. Each Tag has its own type of formatting associated with it.
Some HTML Formatting tags are:
- Bold Tag
<b>
- Italic Tag
<i>
- Underline Tag
<u>
- Strong Tag
<strong>
- Small Tag
<small>
- Big Tag
<big>
- Mark Tag
<mark>
- Emphasized Tag
<em>
- Deleted Tag
<del>
- Inserted Tag
<ins>
- Subscripted Tag
<sub>
- Superscripted Tag
<sup>
HTML Bold Tag
The HTML <b> Tag defines bold text. Bold text is wider and darker text than the default text, without any extra importance to the browser. Look at the example below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Bold Text </title>
</head>
<body>
<p> This is Normal text. </p>
<b> This is Bold Text. </b>
</body>
</html>
Output
HTML Bold Text Example
This is normal text.
This is Bold Text.
HTML Strong Text
The HTML <strong> Tag displays same formatting like a <b> tag. But the Strong text has some importance to the browser and search engines. It is always recommended to write keywords within <strong> Tag to give them extra importance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Strong Text </title>
</head>
<body>
<p> This is Normal text </p>
<strong> This Text is Strong </strong>
</body>
</html>
Output
HTML Strong Tag Example
This is Normal text
This Text is Strong
HTML Italic Text
The HTML <i> Tag defines italic text. This type of formatting displays cursive font based text that slant slightly to the right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Italic Text </title>
</head>
<body>
<p> This is normal text </p>
<i> This is italic Text </i>
</body>
</html>
Output
HTML Italic Text Example
This is normal text
This is italic Text
HTML Underlined Text
The HTML <u> Tag defines Underlined text. All the text within the <u> and </u> tags will have an underline throughout.
Underlined Text is used to draw attention of the user and is a default formatting for a hyperlinked text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Underlined Text </title>
</head>
<body>
<p> This is Normal text </p>
<u> This is Underlined Text </u>
</body>
</html>
Output
Underlined Text
This is Normal text
This is Underlined Text
HTML Small Text
The HTML <small> Tag defines small text. This text is used for some side commenting or to write some copyright information.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Small Text </title>
</head>
<body>
This text is <small> small </small>.
</body>
</html>
Output
HTML Small Tag Example
This text is small .
HTML Big Text
The HTML <big> element defines BIG text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Big Tag </title>
</head>
<body>
This text is <big> BIG </big>
</body>
</html>
Output
HTML Big Tag Example
This text is BIG
HTML Marked Text
The HTML <mark> Tag defines Highlighted text. The text will have a background color and represent relevancy in an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Mark Tag </title>
</head>
<body>
This text is <mark> Marked. </mark>
</body>
</html>
Output
HTML Mark Tag Example
This text is Marked.
HTML Emphasized Text
The HTML <em> element defines Emphasized text. It will give the text the same Italic formatting. This tag is important for screen readers. The screen readers give extra emphasize on this type of text and read it with verbal stress.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Emphasize Text </title>
</head>
<body>
This text is Normal.
This text is <em> Emphasized. </em>
</body>
</html>
Output
HTML Emphasize Tag Example
This text is Normal.
This text is Emphasized.
HTML Deleted Text
The HTML <del> element defines Deleted text. This displays Text with a line strike.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Delete Text </title>
</head>
<body>
<p> This text is Normal. </p>
This text is <del> Deleted. </del>
</body>
</html>
Output
HTML Delete Tag Example
This text is Normal.
This text is
Deleted.
HTML Inserted Text
The HTML <ins> element defines inserted (added) text. It gives the underlined formatting to the text. It is used in combination with deleted text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Insert Text </title>
</head>
<body>
This text is <ins> inserted. </ins>
</body>
</html>
Output
Insert Text
This text is inserted.
HTML Subscripted Text
The HTML <sub> element defines subscripted text. This type of text is small in size and is placed slightly below the normal line of text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Subscript Text </title>
</head>
<body>
This text is <b> bold. </b>
This text is <i> italic. </i>
This text is <sup> Subscripted. </sup>
</body>
</html>
Output
HTML Subscript Tag Example
This text is bold.
This text is italic.
This text is Subscripted.
HTML Superscripted Text
The HTML <sup> element defines superscripted text. It also dispalys very small text like subscript, but here, the text is placed slightly above the normal line of text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Superscript Tag </title>
</head>
<body>
This text is <b> bold. </b>
This text is <i> italic. </i>
This text is <sup> Superscripted.
</body>
</html>
Output
HTML Superscript Tag Example
This text is bold.
This text is italic.
This text is Superscripted.