HTML Text Formatting

HTML defines a lot of elements for formatting output, like bold or italic text.

Below are a lot of examples that you can try out yourself:

How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"

To find out, click the VIEW option in your browser's toolbar and select SOURCE or PAGE SOURCE. This will open a window that shows you the HTML code of the page.

Text Formatting Tags

Tag Description
Defines bold text
Defines big text
Defines emphasized text
Defines italic text
Defines small text
Defines strong text
Defines subscripted text
Defines superscripted text
Defines inserted text
Defines deleted text
Deprecated. Use instead
Deprecated. Use instead
Deprecated. Use styles instead

"Computer Output" Tags

Tag Description
Defines computer code text
Defines keyboard text
Defines sample computer code
Defines teletype text
Defines a variable 
 Defines preformatted text 
 
  Deprecated. Use 
 instead 
 
 
 </td> <td class="deprecated">Deprecated. Use <pre> instead</td> </tr> <tr> <td><xmp></td> <td class="deprecated">Deprecated. Use <pre> instead</td> </tr> </tbody></table>  <h2>Citations, Quotations, and Definition Tags</h2>  <table class="ex" border="1" cellspacing="0" width="100%"><tbody><tr> <th align="left" width="20%">Tag</th> <th align="left" width="80%">Description</th> </tr> <tr> <td><abbr></td> <td>Defines an abbreviation</td> </tr> <tr> <td><acronym></td> <td>Defines an acronym</td> </tr> <tr> <td><address></td> <td>Defines an address element</td> </tr> <tr> <td><bdo></td> <td>Defines the text direction</td> </tr> <tr> <td><blockquote></td> <td> Defines a long quotation</td> </tr> <tr> <td><q></td> <td>Defines a short quotation</td> </tr> <tr> <td><cite></td> <td>Defines a citation</td> </tr> <tr> <td><dfn></td> <td>Defines a definition term</td></tr></tbody></table>
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><span class='post-icons'>
<span class='item-control blog-admin pid-1833975000'>
<a href='https://www.blogger.com/post-edit.g?blogID=786837436972712872&postID=1679042438417452924&from=pencil' title='Edit Post'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
</div>
<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
Exercise
<a href='https://onlinehtml.blogspot.com/search/label/HTML%20Text%20Formatting' rel='tag'>HTML Text Formatting</a>
</span>
</div>
<div class='post-footer-line post-footer-line-3'></div>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
</div>
</div>

        </div></div>
      
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='https://onlinehtml.blogspot.com/2008/01/html-character-entities.html' id='Blog1_blog-pager-newer-link' title='Newer Post'>Newer Post</a>
</span>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='https://onlinehtml.blogspot.com/2008/01/html-attributes.html' id='Blog1_blog-pager-older-link' title='Older Post'>Older Post</a>
</span>
<a class='home-link' href='https://onlinehtml.blogspot.com/'>Home</a>
</div>
<div class='clear'></div>
<div class='post-feeds'>
</div>
</div><div class='widget HTML' data-version='1' id='HTML7'>
<div class='widget-content'>
<div><script type="text/javascript">var addthis_pub="nomigobo";</script>
<a onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" href="http://www.addthis.com/bookmark.php" onclick="return addthis_sendto()"><img border="0" width="83" alt="" style="border:0" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_scED5S8oBKFahh9zbJ04-TsYkY8-Vp-Ni54Y8ILud2XWWjm58pMcnCYujPMueIrxlixpJAnyRElwzthxn6tuPik-DZepn2CtEvDiFI1NiVY5bKuA=s0-d" height="16"></a><script src="//s7.addthis.com/js/152/addthis_widget.js" type="text/javascript"></script></div>
</div>
<div class='clear'></div>
</div><div class='widget HTML' data-version='1' id='HTML2'>
<h2 class='title'>mixx it</h2>
<div class='widget-content'>
<a href="http://www.mixx.com/" onclick="window.location='http://www.mixx.com/submit?page_url='+window.location; return false;">
<img border="0" alt="Add to Mixx!" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sqDWon3NylZlMm2iC0ngXqqCUCtdLTpjVPADELP6XtQU_2eMVCUOV3RGATG1GON4MN8ZxXis39qHozu20FOnj1IGcgZyDdDoArvVUeqjL1qM542XeCSw=s0-d">
</a>
</div>
<div class='clear'></div>
</div></div>
</div>
<div id='ads-wrapper'>
<div class='sidebar section' id='ads'><div class='widget AdSense' data-version='1' id='AdSense3'>
<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client="pub-3758486422209903";
google_ad_host="pub-1556223355139109";
google_ad_host_channel="00000";
google_ad_width=160;
google_ad_height=600;
google_ad_format="160x600_as";
google_ad_type="text_image";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="6699CC";
google_color_url="6699CC";
google_color_text="6699CC";
//--></script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='clear'></div>
</div>
</div><div class='widget HTML' data-version='1' id='HTML5'>
<div class='widget-content'>
<!-- Search Google -->
<center>
<form action="http://www.google.com/custom" target="_top" method="get">
<table bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" height="32" align="left">
<a href="//www.google.com/">
<img border="0" alt="Google" src="//www.google.com/logos/Logo_25wht.gif" align="middle"></a>
<br/>
<label for="sbi" style="display: none">Enter your search terms</label>
<input maxlength="255" id="sbi" value="" name="q" size="20" type="text"/>
</td></tr>
<tr><td valign="top" align="left">
<label for="sbb" style="display: none">Submit search form</label>
<input id="sbb" value="Search" name="sa" type="submit"/>
<input value="pub-3758486422209903" name="client" type="hidden"/>
<input value="1" name="forid" type="hidden"/>
<input value="ISO-8859-1" name="ie" type="hidden"/>
<input value="ISO-8859-1" name="oe" type="hidden"/>
<input value="GALT:#008000;GL:1;DIV:#FFFFFF;VLC:663399;AH:center;BGC:FFFFFF;LBGC:FFFFFF;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" name="cof" type="hidden"/>
<input value="en" name="hl" type="hidden"/>
</td></tr></table>
</form>
</center>
<!-- Search Google -->
</div>
<div class='clear'></div>
</div><div class='widget HTML' data-version='1' id='HTML1'>
<div class='widget-content'>
<a href="http://www.url-submitter.com/">URL Submitter</a> - Submit your URL to Search engines and Directories for FREE!
</div>
<div class='clear'></div>
</div><div class='widget HTML' data-version='1' id='HTML3'>
<h2 class='title'>FEEDJIT Live Traffic Feed</h2>
<div class='widget-content'>
<script src="//feedjit.com/serve/?bc=FFFFFF&amp;tc=494949&amp;brd1=336699&amp;lnk=494949&amp;hc=336699&amp;ww=160" type="text/javascript"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript>
</div>
<div class='clear'></div>
</div><div class='widget AdSense' data-version='1' id='AdSense5'>
<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client="pub-3758486422209903";
google_ad_host="pub-1556223355139109";
google_ad_host_channel="00000";
google_ad_width=200;
google_ad_height=90;
google_ad_format="200x90_0ads_al_s";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="336699";
google_color_url="336699";
google_color_text="336699";
//--></script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='clear'></div>
</div>
</div></div>
</div>
<!-- spacer for skins that want sidebar and main to be the same height -->
<div class='clear'>
</div>
</div>
<!-- end content-wrapper -->
</div>
<div id='footer-wrapper'>
<div class='footer section' id='footer'><div class='widget AdSense' data-version='1' id='AdSense2'>
<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client="pub-3758486422209903";
google_ad_host="pub-1556223355139109";
google_ad_host_channel="00000";
google_ad_width=728;
google_ad_height=15;
google_ad_format="728x15_0ads_al_s";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="336699";
google_color_url="336699";
google_color_text="336699";
//--></script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='clear'></div>
</div>
</div></div>
</div>
</div>
</div>
<!-- end outer-wrapper -->

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/344097953-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'APlU3lwu7biqzzKBATqpGYstgv-7:1775687482570';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d786837436972712872','//onlinehtml.blogspot.com/2008/01/html-text-formatting.html','786837436972712872');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '786837436972712872', 'title': 'Learn Online HTML Free', 'url': 'https://onlinehtml.blogspot.com/2008/01/html-text-formatting.html', 'canonicalUrl': 'http://onlinehtml.blogspot.com/2008/01/html-text-formatting.html', 'homepageUrl': 'https://onlinehtml.blogspot.com/', 'searchUrl': 'https://onlinehtml.blogspot.com/search', 'canonicalHomepageUrl': 'http://onlinehtml.blogspot.com/', 'blogspotFaviconUrl': 'https://onlinehtml.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en-US', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Learn Online HTML Free - Atom\x22 href\x3d\x22https://onlinehtml.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Learn Online HTML Free - RSS\x22 href\x3d\x22https://onlinehtml.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Learn Online HTML Free - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/786837436972712872/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Learn Online HTML Free - Atom\x22 href\x3d\x22https://onlinehtml.blogspot.com/feeds/1679042438417452924/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-3758486422209903', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'isGoogleEverywhereLinkTooltipEnabled': true, 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/5ddb33369fcd32d1', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '1679042438417452924', 'pageName': 'HTML Text Formatting', 'pageTitle': 'Learn Online HTML Free: HTML Text Formatting'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'HTML Text Formatting', 'description': 'HTML defines a lot of elements for formatting output, like bold or italic text.  Below are a lot of examples that you can try out yourself: ...', 'url': 'https://onlinehtml.blogspot.com/2008/01/html-text-formatting.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 1679042438417452924}}]);
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML6', 'sidebar', document.getElementById('HTML6'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'sidebar', document.getElementById('HTML4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense1', 'sidebar', document.getElementById('AdSense1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense4', 'main', document.getElementById('AdSense4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2626028960-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML7', 'main', document.getElementById('HTML7'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'main', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense3', 'ads', document.getElementById('AdSense3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'ads', document.getElementById('HTML5'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'ads', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'ads', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense5', 'ads', document.getElementById('AdSense5'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense2', 'footer', document.getElementById('AdSense2'), {}, 'displayModeFull'));
</script>
</body>
</html>