WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

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