HTML Formatting

HTML Text Formatting

This text is bold

This text is italic

This is computer output

This is subscript and superscript



HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.

These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).

Often <strong> renders as <b>, and <em> renders as <i>.

However, there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.
<strong> or <em> means that you want the text to be rendered in a way that the user understands as “important”. Today, all major browsers render strong as bold and em as italics.

 

Try it Yourself – Examples

Text formatting

<!DOCTYPE html><html><body>

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body></html>

Preformatted text

<!DOCTYPE html><html><body>

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

<p>The pre tag is good for displaying computer code:</p>

<pre>
for i = 1 to 10
print i
next i
</pre></body></html>

 

Computer Code

<!DOCTYPE html><html><body>

<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>

<p><b>Note:</b> These tags are often used to display computer/programming code.</p>

</body></html>

Address

<!DOCTYPE html>
<html><body><address>

Written by abc.com<br>
<a href=”mailto:us@example.org”>Email us</a><br>
Address: Box 564, Disneyland<br>
Phone: +12 34 56 78
</address></body></html>

Abbreviations and acronyms

<!DOCTYPE html><html><body>

<p>The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.</p>
<p>Can I get this <abbr title=”as soon as possible”>ASAP</abbr>?</p>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p></body></html>

Text direction

<!DOCTYPE html><html><body>

<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
</p>

<bdo dir=”rtl”>
Here is some Hebrew text
</bdo></body></html>

Quotations

<!DOCTYPE html><html><body>

<h2>The &lt;blockquote&gt; tag</h2>
<p>The &lt;blockquote&gt; tag specifies a section that is quoted from another source.</p>
<p>Here is a quote from WWF’s website:</p>
<blockquote cite=”http://www.worldwildlife.org/who/index.html”>
For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<p><b>Note:</b> Browsers usually indent &lt;blockquote&gt; elements.</p>

<h2>The &lt;q&gt; tag</h2>
<p>The &lt;q&gt; tag defines a short quotation.</p>

<p>WWF’s goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
<p><b>Note:</b> Browsers insert quotation marks around the &lt;q&gt; tag.</p></body></html>

Deleted and inserted text

<!DOCTYPE html><html><body>

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

<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p></body></html>

 

Comments are closed.