HTML Text Formatting

HTML Text Formatting

HTML includes several tags for formatting text that can be used directly without needing to write additional styles.

<b>Bold text</b><br><br>
<i>Italic text</i><br><br>
<code>Computer output</code><br><br>
This is <sub>subscript</sub> and <sup>superscript</sup>

HTML Formatting Tags

HTML uses tags like <b> for bold and <i> for italic text to format the output, such as: bold or italic.

These HTML tags are known as formatting tags (see the full tag reference manual at the bottom).

Usually, the <strong> tag is used instead of the <b> tag, and the <em> tag is used instead of the <i> tag.

However, the meanings of these tags are different:

<b> and <i> define bold or italic text.

<strong> and <em> indicate that the text is important and should be highlighted. All major browsers can render various font effects. Future browsers may support better rendering effects.

Online Examples

Text Formatting:

This example demonstrates how to format text in an HTML file.

<b>This text is bold</b>
<br />
<strong>This text is bold</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is italic</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains <sub>subscript</sub>
<br />
This text contains <sup>superscript</sup>

Preformatted Text

This example demonstrates how to use the <pre> tag to control spaces and line breaks.

<pre>
    This example demonstrates how to use the pre tag
    to control spaces and    line breaks.
</pre>

"Computer Output" Tags

This example demonstrates different "computer output" tags.

<code>Computer output</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Computer code sample</samp>
<br />
<var>Computer variable</var>
<br />
<p><b>Note:</b> These tags are often used to display computer/programming code.</p>

Addresses

This example demonstrates how to write addresses in an HTML file.

<address>
    Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>

Abbreviations and Acronyms

This example demonstrates how to use abbreviations and acronyms.

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>In some browsers, when you hover over the abbreviation, the title shows the full expression.</p>
<p>This only works for the acronym element in IE 5.</p>
<p>In Netscape 6.2, both abbr and acronym elements work.</p>

Text Direction

This example demonstrates how to change text direction.

<p>This paragraph is displayed left-to-right.</p>  
<p><bdo dir="rtl">This paragraph is displayed right-to-left.</bdo></p>  

Block Quotes

This example demonstrates short and long quotations.

<blockquote>
        <p>Life is what happens when you're busy making other plans.</p>
        <footer>— John Lennon</footer>
    </blockquote>

    <blockquote>
        <p>If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.</p>
        <footer>— J.K. Rowling, Harry Potter and the Goblet of Fire</footer>
    </blockquote>

    <p>
        In his famous quote, Einstein said: <q>E=mc²</q>
    </p>

Deleted and Inserted Text

This example demonstrates how to mark deleted and inserted text.

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

HTML Text Formatting Tags

Tag	Description
<b>	Defines bold text
<em>	Defines emphasized text
<i>	Defines italic text
<small>	Defines small text
<strong>	Defines important text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text

HTML "Computer Output" Tags

Tag	Description
<code>	Defines computer code text
<kbd>	Defines keyboard input text
<samp>	Defines sample output from a computer program
<var>	Defines a variable
<pre>	Defines preformatted text

HTML Quotation and Citation Tags

Tag	Description
<abbr>	Defines an abbreviation
<address>	Defines contact information
<bdo>	Defines text direction
<blockquote>	Defines a section that is quoted from another source
<q>	Defines a short inline quotation
<cite>	Defines the title of a work
<dfn>	Defines a definition term