HTML Tutorial: HTML Text Formatting

HTML text formatting refers to the various ways to style and present text on a webpage. HTML provides several tags that allow developers to format text for emphasis, structure, and readability. Here are some common HTML text formatting elements:

1. Headings

Headings are used to define the structure of a document.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

2. Paragraphs

Paragraphs are used to separate blocks of text.

<p>This is a paragraph.</p>

3. Bold and Strong Text

Bold: Use the  tag for bold text.
Strong Emphasis: Use the  tag for semantically important text.

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

4. Italic and Emphasized Text

Italic: Use the  tag for italicized text.
Emphasis: Use the  tag for emphasized text.

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

5. Underlined Text

Use the  tag to underline text.

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

6. Strikethrough Text

Use the <s> or <del> tags for strikethrough text.

<s>This text has a strikethrough.</s>
<del>This text is deleted.</del>

7. Superscript and Subscript

Superscript: Use the  tag.
Subscript: Use the  tag.

E = mc<sup>2</sup>
H<sub>2</sub>O

8. Monospace (Code) Text

Use the <code> tag for displaying code or monospaced text.

<code>console.log("Hello, World!");</code>

9. Blockquote

Use the <blockquote> tag for quoted content.

<blockquote>This is a blockquote.</blockquote>

10. Preformatted Text

Use the <pre> tag for preserving whitespace and line breaks.

<pre>
This is preformatted text.
    Indented text is shown as is.
</pre>

11. Abbreviations

Use the <abbr> tag to define abbreviations.

<abbr title="World Health Organization">WHO</abbr>

12. Small Text

Use the  tag for smaller text.

<small>This is small text.</small>

13. Highlighted Text

Use the  tag to highlight text.

<mark>This text is highlighted.</mark>

14. Inline Quotes

Use the <q> tag for short quotes.

<q>This is an inline quote.</q>

Example Usage:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Text Formatting</title>
</head>
<body>
    <h1>Text Formatting Examples</h1>
    <p>This is a <b>bold</b> and <i>italicized</i> sentence.</p>
    <p><u>Underlined</u> and <mark>highlighted</mark> text are also possible.</p>
    <blockquote>This is a blockquote for longer quotes.</blockquote>
    <p>Here's a famous equation: E = mc<sup>2</sup>.</p>
    <pre>
        This is preformatted text.
        It respects spaces and line breaks.
    </pre>
</body>
</html>

Let me know if you'd like additional examples or clarifications!

HTML Tutorial

Thursday, December 19, 2024

HTML Text Formatting