Scribd
Upload
5 views3 pages

Essential HTML Formatting Tags Guide

The document explains HTML formatting tags used to define text appearance and structure on webpages. It details common tags such as <b>, <strong>, <i>, <em>, <u>, <s>, <sup>, <sub>, <code>, and <pre>, highlighting their functions and differences between semantic and styling tags. An example HTML document showcases the use of these formatting tags in practice.

Uploaded by

jesusjobin05
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views3 pages

Essential HTML Formatting Tags Guide

The document explains HTML formatting tags used to define text appearance and structure on webpages. It details common tags such as <b>, <strong>, <i>, <em>, <u>, <s>, <sup>, <sub>, <code>, and <pre>, highlighting their functions and differences between semantic and styling tags. An example HTML document showcases the use of these formatting tags in practice.

Uploaded by

jesusjobin05
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

✅ HTML Formatting

HTML formatting tags are used to define the appearance and structure of
text on a webpage. These tags provide emphasis, style, and semantic
meaning to content.

📌 Common HTML Formatting Tags

1️⃣ Bold Text – <b> and <strong>

<p>This is <b>bold</b> text.</p>

<p>This is <strong>important bold</strong> text.</p>

 <b> simply makes text bold without added importance.

 <strong> makes text bold and indicates that it’s of greater


importance (useful for accessibility and SEO).

2️⃣ Italic Text – <i> and <em>

<p>This is <i>italic</i> text.</p>

<p>This is <em>emphasized italic</em> text.</p>

 <i> styles the text in italics.

 <em> emphasizes the text, typically italicizing it but also indicating


importance.

3️⃣ Underline – <u>

<p>This is <u>underlined</u> text.</p>

 <u> underlines text, often used for styling or indicating links.

4️⃣ Strikethrough – <s>

<p>This is <s>struck through</s> text.</p>

 <s> shows that the text is no longer relevant or correct.

5️⃣ Superscript – <sup>

<p>This is x<sup>2</sup>.</p>
 <sup> is used for superscript text, like mathematical powers or
ordinal indicators.

6️⃣ Subscript – <sub>

<p>This is H<sub>2</sub>O.</p>

 <sub> is used for subscript text, like chemical formulas.

7️⃣ Code – <code>

<p>This is <code>inline code</code>.</p>

 <code> displays text as computer code, typically using a


monospace font.

8️⃣ Preformatted Text – <pre>

<pre>

This is preformatted text.

Whitespace and line breaks are preserved.

</pre>

 <pre> preserves spaces and line breaks exactly as typed.

📌 Semantic vs Styling Tags

 Semantic tags like <strong>, <em> describe meaning and


importance.

 Styling tags like <b>, <i> are purely for appearance without
implying meaning.

✅ Example – Combined Formatting

<!DOCTYPE html>

<html>

<head>

<title>HTML Formatting Example</title>


</head>

<body>

<h1>HTML Formatting Tags</h1>

<p>This is <b>bold</b>, <i>italic</i>, <u>underlined</u>, and


<s>struck through</s> text.</p>

<p>Here is <sup>superscript</sup> and <sub>subscript</sub>


text.</p>

<p>This is <strong>strong importance</strong> and <em>emphasized


text</em>.</p>

<p>Code example: <code>[Link]('Hello World');</code></p>

<pre>

Preformatted text:

Line 1

Line 2 indented

Line 3

</pre>

</body>

</html>

You might also like