Below are a lot of examples that you can try out yourself:
Examples
Text formatting
This example demonstrates how you can format text in an HTML document.
Preformatted text
This example demonstrates how you can control the line breaks and spaces with the pre tag.
"Computer output" tags
This example demonstrates how different "computer output" tags will be displayed.
Address
This example demonstrates how to write an address in an HTML document.
Abbreviations and acronyms
This example demonstrates how to handle an abbreviation or an acronym.
Text direction
This example demonstrates how to change the text direction.
Quotations
This example demonstrates how to handle long and short quotations.
Deleted and inserted text
This example demonstrates how to mark a text that is deleted or inserted to a document.
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
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
Deprecated. Use <pre> instead<br /><xmp> Deprecated. Use <pre> instead<br />Citations, Quotations, and Definition Tags<br />Tag Description<br /><abbr> Defines an abbreviation<br /><acronym> Defines an acronym<br /><address> Defines an address element<br /><bdo> Defines the text direction<br /><blockquote> Defines a long quotation<br /><q> Defines a short quotation<br /><cite> Defines a citation<br /><dfn> Defines a definition term
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
Posted by
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta content='https://www.blogger.com/profile/10013322272418037218' itemprop='url'/>
<a class='g-profile' href='https://www.blogger.com/profile/10013322272418037218' rel='author' title='author profile'>
<span itemprop='name'>Unknown</span>
</a>
</span>
</span>
<span class='post-timestamp'>
at
<meta content='http://htmlbasictutorials.blogspot.com/2008/02/html-text-formatting.html' itemprop='url'/>
<a class='timestamp-link' href='https://htmlbasictutorials.blogspot.com/2008/02/html-text-formatting.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2008-02-05T11:26:00-08:00'>11:26 AM</abbr></a>
</span>
<span class='post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-1367346565'>
<a href='https://www.blogger.com/post-edit.g?blogID=8134209472129637542&postID=1528486528055321574&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 class='post-share-buttons goog-inline-block'>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
<h4>No comments:</h4>
<div id='Blog1_comments-block-wrapper'>
<dl class='avatar-comment-indent' id='comments-block'>
</dl>
</div>
<p class='comment-footer'>
<a href='https://www.blogger.com/comment/fullpage/post/8134209472129637542/1528486528055321574' onclick=''>Post a Comment</a>
</p>
</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://htmlbasictutorials.blogspot.com/2008/02/html-attributes.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://htmlbasictutorials.blogspot.com/2008/02/html-character-entities.html' id='Blog1_blog-pager-older-link' title='Older Post'>Older Post</a>
</span>
<a class='home-link' href='https://htmlbasictutorials.blogspot.com/'>Home</a>
</div>
<div class='clear'></div>
<div class='post-feeds'>
<div class='feed-links'>
Subscribe to:
<a class='feed-link' href='https://htmlbasictutorials.blogspot.com/feeds/1528486528055321574/comments/default' target='_blank' type='application/atom+xml'>Post Comments (Atom)</a>
</div>
</div>
</div></div>
</div>
<div id='sidebar-wrapper'>
<div class='sidebar section' id='sidebar'><div class='widget AdSense' data-version='1' id='AdSense2'>
<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client="pub-4459060014368985";
google_ad_host="pub-1556223355139109";
google_ad_host_channel="00000";
google_ad_width=234;
google_ad_height=60;
google_ad_format="234x60_as";
google_ad_type="text";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="669922";
google_color_url="555544";
google_color_text="555544";
//--></script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='clear'></div>
</div>
</div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'>
<h2>Blog Archive</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼ 
</span>
</a>
<a class='post-count-link' href='https://htmlbasictutorials.blogspot.com/2008/'>
2008
</a>
<span class='post-count' dir='ltr'>(18)</span>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼ 
</span>
</a>
<a class='post-count-link' href='https://htmlbasictutorials.blogspot.com/2008/02/'>
February
</a>
<span class='post-count' dir='ltr'>(18)</span>
<ul class='posts'>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-tutorial_05.html'>HTML Tutorial</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/introduction-to-html_05.html'>Introduction to HTML</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-elements.html'>HTML Elements</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/basic-html-tags.html'>Basic HTML Tags</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-attributes.html'>HTML Attributes</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-text-formatting.html'>HTML Text Formatting</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-character-entities.html'>HTML Character Entities</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-links.html'>HTML Links</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-frames.html'>HTML Frames</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-tables.html'>HTML Tables</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-lists.html'>HTML Lists</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-forms-and-input.html'>HTML Forms and Input</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-images.html'>HTML Images</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-backgrounds.html'>HTML Backgrounds</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-colors.html'>HTML Colors</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-color-values.html'>HTML Color Values</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/html-color-names.html'>HTML Color Names</a></li>
<li><a href='https://htmlbasictutorials.blogspot.com/2008/02/ready-to-publish-your-work.html'>Ready to Publish Your Work?</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div><div class='widget Profile' data-version='1' id='Profile1'>
<h2>About Me</h2>
<div class='widget-content'>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' href='https://www.blogger.com/profile/10013322272418037218' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'>
Unknown
</a>
</dt>
</dl>
<a class='profile-link' href='https://www.blogger.com/profile/10013322272418037218' rel='author'>View my complete profile</a>
<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 id='footer-wrapper'>
<div class='footer section' id='footer'><div class='widget AdSense' data-version='1' id='AdSense1'>
<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client="pub-4459060014368985";
google_ad_host="pub-1556223355139109";
google_ad_host_channel="00000";
google_ad_width=468;
google_ad_height=60;
google_ad_format="468x60_as";
google_ad_type="text";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="669922";
google_color_url="555544";
google_color_text="555544";
//--></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/654365252-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AAVkm1uV2LKeXhTdhnMQGMeo3QkM:1778945064659';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8134209472129637542','//htmlbasictutorials.blogspot.com/2008/02/html-text-formatting.html','8134209472129637542');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '8134209472129637542', 'title': 'HTML tutorials', 'url': 'https://htmlbasictutorials.blogspot.com/2008/02/html-text-formatting.html', 'canonicalUrl': 'http://htmlbasictutorials.blogspot.com/2008/02/html-text-formatting.html', 'homepageUrl': 'https://htmlbasictutorials.blogspot.com/', 'searchUrl': 'https://htmlbasictutorials.blogspot.com/search', 'canonicalHomepageUrl': 'http://htmlbasictutorials.blogspot.com/', 'blogspotFaviconUrl': 'https://htmlbasictutorials.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\x22HTML tutorials - Atom\x22 href\x3d\x22https://htmlbasictutorials.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22HTML tutorials - RSS\x22 href\x3d\x22https://htmlbasictutorials.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22HTML tutorials - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/8134209472129637542/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22HTML tutorials - Atom\x22 href\x3d\x22https://htmlbasictutorials.blogspot.com/feeds/1528486528055321574/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-4459060014368985', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/66f339c43d4ec606', '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': '1528486528055321574', 'pageName': 'HTML Text Formatting', 'pageTitle': 'HTML tutorials: HTML Text Formatting'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false}}, {'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: E...', 'url': 'https://htmlbasictutorials.blogspot.com/2008/02/html-text-formatting.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 1528486528055321574}}]);
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense3', 'main', document.getElementById('AdSense3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/1053750561-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense2', 'sidebar', document.getElementById('AdSense2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar', document.getElementById('Profile1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense1', 'footer', document.getElementById('AdSense1'), {}, 'displayModeFull'));
</script>
</body>
</html>