Welcome to your first step in learning HTML! In this article, we’ll dive into text formatting in HTML. Text formatting is crucial because it makes your web pages readable and visually appealing. We’ll cover the basics, and by the end, you’ll be able to style text with ease.

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a web page using markup. HTML elements are the building blocks of HTML pages, and they are represented by tags.

Basic Text Formatting Tags

Let’s start with some fundamental text formatting tags. These tags help you emphasize your text, create headings, and more.

Bold Text

To make text bold, use the <b> or <strong> tags.

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

Example:

This is bold text. This is strong text.

The <strong> tag is generally preferred because it conveys semantic importance.

Italic Text

To italicize text, use the <i> or <em> tags.

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

Example:

This is italic text. This is emphasized text.

The <em> tag is often used to emphasize text.

Underlined Text

To underline text, use the <u> tag.

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

Example:

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

Strikethrough Text

To strike through text, use the <s> or <del> tags.

<p>This is <s>strikethrough</s> text.</p>
<p>This is <del>deleted</del> text.</p>

Example:

This is strikethrough text. This is deleted text.

The <del> tag indicates that the text is no longer accurate or relevant.

Text Formatting for Emphasis

Besides bold and italic, HTML provides other tags for emphasizing text.

Highlighted Text

To highlight text, use the <mark> tag.

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

Example:

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

Subscript and Superscript

For subscript and superscript text, use the <sub> and <sup> tags, respectively.

<p>This is <sub>subscript</sub> text.</p>
<p>This is <sup>superscript</sup> text.</p>

Example:

This is H₂O (water). This is E = mc² (Einstein’s equation).

Block-level Text Elements

Block-level elements start on a new line and stretch out to the left and right as far as they can.

Paragraphs

The <p> tag defines a paragraph.

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

Example:

This is a paragraph.

Headings

HTML has six levels of headings, from <h1> to <h6>.

<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>

Example:

This is a heading 1

This is a heading 2

This is a heading 3

This is a heading 4

This is a heading 5

This is a heading 6

Preformatted Text

To display preformatted text, use the <pre> tag. It preserves both spaces and line breaks.

<pre>
This is preformatted text.
    It preserves spaces and line breaks.
</pre>

Example:

This is preformatted text.
    It preserves spaces and line breaks.

Inline Text Elements

Inline elements do not start on a new line. They only take up as much width as necessary.

Inline Code

To display inline code, use the <code> tag.

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

Example:

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

Quotes

To indicate a quotation, use the <blockquote> and <q> tags.

<blockquote cite="https://www.example.com">
  This is a blockquote.
</blockquote>

<p>This is a <q>short quotation</q> within a paragraph.</p>

Example:

This is a blockquote.

This is a “short quotation” within a paragraph.

Conclusion

These are the basic HTML text formatting tags you’ll need to start creating well-structured and visually appealing web pages. Practice using these tags in your projects, and you’ll soon be comfortable with them. Remember, HTML is all about structure and meaning, so choose the right tags to convey the right message.