HTML Text Formatting


Formatting Text with HTML

HTML (Hypertext Markup Language) provides various tags that can be used to format text. These tags allow you to change the font size, font style, color, and other properties of the text. Here are some commonly used HTML text formatting tags:

Headings

HTML provides six levels of headings, from H1 to H6. You can use these tags to create headings of different sizes and hierarchy. Here’s an example:

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

Paragraphs

You can use the <p> tag to create paragraphs of text. This tag is used to group together related sentences or text. Here’s an example:

<p>This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>

Bold and Italic Text

You can use the <b> and <i> tags to create bold and italic text, respectively. Here’s an example:

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

Underline Text

You can use the <u> tag to create underline text. Here’s an example:

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

Font Size

You can use the style attribute to set the font size of text. Here’s an example:

<p style="font-size: 24px;">This text has a font size of 24 pixels.</p>

Font Color

You can use the style attribute to set the font color of text. Here’s an example:

<p style="color: red;">This text is red.</p>

Strikethrough Text

You can use the <s> tag to create strikethrough text. Here’s an example:

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

Superscript Text

To create superscript text, use the <sup> tag.

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

Subscript Text

To create subscript text, use the <sub> tag.

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

Text Alignment

To align text, use the text-align property in CSS.

<p style="text-align:center;">This text is centered.</p>
<p style="text-align:right;">This text is aligned to the right.</p>
<p style="text-align:left;">This text is aligned to the left.</p>

Formatting Quotations

You can easily format the quotation blocks from other sources with the HTML <blockquote> tag.

Blockquotes are generally displayed with indented left and right margins, along with a little extra space added above and below. Let’s try an example to see how it works:

<blockquote> 
<p>
Learn from yesterday,
live for today,
hope for tomorrow.
The important thing is not to stop questioning.
</p>
<cite>— Albert Einstein</cite>
</blockquote>

Showing Abbreviations

An abbreviation is a shortened form of a word, phrase, or name.

You can use the <abbr> tag to denote an abbreviation. The title attribute is used inside this tag to provide the full expansion of the abbreviation, which is displayed by the browsers as a tooltip when the mouse cursor is hovered over the element. Let’s try out an example:

<p>The <abbr title="World Wide Web Consortium">W3C</abbr> 
is the main international standards organization for the
<abbr title="World Wide Web">WWW or W3</abbr>.
It was was founded by Tim Berners-Lee.</p>

Marking Contact Addresses

Web pages often include street or postal addresses. HTML provides a special tag <address> to represent contact information (physical and/or digital) for a person, people or organization.

This tag should ideally used to display contact information related to the document itself, such as article’s author. Most browsers display an address block in italic. Here’s an example:

<address> 
Mozilla Foundation<br>
331 E. Evelyn Avenue<br>
Mountain View, CA 94041, USA
</address>

Please check out the HTML reference section for a complete list of HTML formatting tags.