Tutorial

Forum

Sign Up

log In

HTML
Formating

❮ Previous

Next ❯

In HTML, formatting tags are used to style text and change its presentation. These tags are applied within text elements to adjust their appearance, such as making text bold, italicized, or underlined.


Common Formatting Tags in HTML

  • Bold Text
  • Strong Text
  • Italic Text
  • Emphasized Text
  • Underlined Text
  • Strike Text
  • Deleted Text
  • Superscript Text
  • Subscript Text
  • Preformatted Text
  • Small Text
  • Marked Text

Bold and Strong Text: <b> and <strong>

  • <b>: Makes text bold without implying any special importance.
  • <strong>: Makes text bold and also indicates that the text has strong importance
Example
<!DOCTYPE html>
<p>This is <b>bold</b> text using the b tag.</p>
<p>This is <strong>strongly emphasized</strong> text using the strong tag.</p>

Try it yourself

Italic and Emphasize Text: <i> and <em>

  • <i>: Makes text italicized without implying emphasis.
  • <em>: Makes text italicized and also indicates that the text has emphasized importance.
Example
<!DOCTYPE html>
<p>This is <i>italicized</i> text using the i tag.</p>
<p>This is <em>emphasized</em> text using the em tag.</p>

Try it yourself

Underline Text: <u>

  • <u>: Underlines text, which is typically used for indicating links. In modern HTML, its use for general text styling is discouraged in favor of CSS.
Example
<p>This is <u>underlined</u> text using the u tag.</p>

Try it yourself

Strikethrough and Delete Text: <s> and <del>

  • <s>: Strikes through text to indicate that it is no longer accurate or relevant.
  • <del>: Indicates text that has been deleted from a document.
Example
<!DOCTYPE html>
<p>This is <s>struck-through</s> text using the s tag.</p>
<p>This is <del>deleted</del> text using the del tag.</p>

Try it yourself

Superscript and Subscript: <sup> and <sub>

  • <sup>: Displays text as superscript (above the baseline).
  • <sub>: Displays text as subscript (below the baseline).
Example
<!DOCTYPE html>
<p>Water is represented as H<sub>2</sub>O.</p>
<p>E=mc<sup>2</sup></p>

Try it yourself

Preformatted Text: <pre>

  • <pre>: Displays text with preserved formatting, including spaces and line breaks.
Example
<pre>
This is preformatted text.
It maintains spaces and
line breaks as they are.
</pre>

Try it yourself

Small Text: <small>

  • <small>: Displays text in a smaller size.
Example
<p>This is normal text and <small>this is smaller text</small>.</p>

Try it yourself

Mark Text: <mark>

  • <mark>: Highlight or emphasize text by marking it with a visual cue, such as a background color
Example
<p>To learn more about HTML, you should focus on the <mark>basic structure</mark> of a webpage.</p>

Try it yourself

Modern Approach: Using CSS for Styling

While HTML formatting tags provide basic text styling, modern web development practices recommend using CSS for styling. CSS offers greater flexibility and control over the appearance of text and other elements.

Example
<!DOCTYPE html>
<head>
<style>
.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.strikethrough { text-decoration: line-through; }
.superscript { vertical-align: super; font-size: smaller; }
.subscript { vertical-align: sub; font-size: smaller; }
</style>
</head>
<body>
<p class="bold">This text is bold using CSS.</p>
<p class="italic">This text is italicized using CSS.</p>
<p class="underline">This text is underlined using CSS.</p>
<p class="strikethrough">This text is struck-through using CSS.</p>
<p>Water is represented as H<span class="subscript">2</span>O.</p>
<p>E=mc<span class="superscript">2</span></p>
</body>

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.