HTML provides several tags that you can use to make some text on
your web pages to appear differently than normal text, for example, you can use
make the text bold, tag
<i> to make the text italic, tag
highlight the text, tag
<code> to display a fragment of computer
marking editorial insertions and deletions, and more.
The following example demonstrates the most commonly used formatting tags in action. Now, let’s try this out to understand how these tags basically work:
<p>THIS IS <b>BOLD TEXT</b>.</p> <p>THIS IS <strong>STRONGLY IMPORTANT TEXT</strong>.</p> <p>THIS IS <i>ITALIC TEXT</i>.</p> <p>THIS IS <small>SMALLER TEXT</small>.</p> <p>THIS IS <sub>SUBSCRIPT</sub> AND <sup>SUPERSCRIPT</sub> TEXT.</p> <p>THIS IS <del>DELETED TEXT</del>.</p> <p>THIS IS <em>EMPHASIZED TEXT</em>.</p> <p>THIS IS <mark>HIGHLIGHTED TEXT</mark>.</p> <p>THIS IS <code>COMPUTER CODE</Ccode>.</p> <p>THIS IS <ins>INSERTED TEXT</ins>.</p>
By default, the
<strong> tag is typically rendered in the
is rendered as
However, there is a difference in the meaning of these tags.
Difference between <strong> and <b> tag
<b> tags render the enclosed text in a bold typeface by default, but the
<strong> tag indicates that its contents have strong importance, whereas the
<b> tag is simply used to draw the reader’s attention without conveying any special importance.
<p><strong>WARNING!</strong> PLEASE PROCEED WITH CAUTION.</p> <p>THE CONCERT WILL BE HELD AT <b>HYDE PARK</b> IN LONDON.</p>
Difference between <em> and <i> tag
<i> tags render the enclosed text in italic type by default, but the
<em> tag indicates that its contents have stressed emphasis compared to surrounding text, whereas the
<i>tag is used for marking up text that is set off from the normal text for readability reasons, such as a technical term, an idiomatic phrase from another language, a thought, etc.
<p>CATS ARE <em>CUTE</em> ANIMALS.</p> <p>THE <i>ROYAL CRUISE</i> SAILED LAST NIGHT.</p>
You can easily format the quotation blocks from other sources
with the HTML
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>
For short inline quotations, you can use the HTML
<q> tag. Most browsers display inline quotes by surrounding the text in quotation marks. Here’s an example:
<p>ACCORDING TO THE WORLD HEALTH ORGANIZATION (WHO): <q>HEALTH IS A STATE OF COMPLETE PHYSICAL, MENTAL, AND SOCIAL WELL-BEING.</q></p>
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>