HTML text Formatting

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:
Examples
Text formattingThis example demonstrates how you can format text in an HTML document.
Preformatted textThis example demonstrates how you can control the line breaks and spaces with the pre tag.
"Computer output" tagsThis example demonstrates how different "computer output" tags will be displayed.
AddressThis example demonstrates how to write an address in an HTML document.
Abbreviations and acronymsThis example demonstrates how to handle an abbreviation or an acronym.
Text directionThis example demonstrates how to change the text direction.
QuotationsThis example demonstrates how to handle long and short quotations.
Deleted and inserted textThis 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

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

<br />Deprecated. Use <pre> instead <br /><xmp> <br />Deprecated. Use <pre> instead <br />Citations, Quotations, and Definition Tags <br />Tag <br />Description <br /><a href="http://www.w3schools.com/tags/tag_abbr.asp"><abbr></a> <br />Defines an abbreviation <br /><a href="http://www.w3schools.com/tags/tag_acronym.asp"><acronym></a> <br />Defines an acronym <br /><a href="http://www.w3schools.com/tags/tag_address.asp"><address></a> <br />Defines an address element <br /><a href="http://www.w3schools.com/tags/tag_bdo.asp"><bdo></a> <br />Defines the text direction <br /><a href="http://www.w3schools.com/tags/tag_blockquote.asp"><blockquote></a> <br />Defines a long quotation <br /><a href="http://www.w3schools.com/tags/tag_q.asp"><q></a> <br />Defines a short quotation <br /><a href="http://www.w3schools.com/tags/tag_phrase_elements.asp"><cite></a> <br />Defines a citation <br /><a href="http://www.w3schools.com/tags/tag_phrase_elements.asp"><dfn></a> <br />Defines a definition term <br /> <br /> <br />HTML Character Entities <br /> <br />Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text. <br />To display a less than sign (<) in HTML, we have to use a character entity. <br />Character Entities <br />Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source. <br />A character entity has three parts: an ampersand (&amp;), an entity name or a # and an entity number, and finally a semicolon (;). <br />To display a less than sign in an HTML document we must write: &lt; or &#60; <br />The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers. <br />Note that the entities are case sensitive. <br />This example lets you experiment with character entities: <a href="http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_entities" target="_blank">Character Entities</a> <br />Non-breaking Space <br />The most common character entity in HTML is the non-breaking space. <br />Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the character entity. <br />The Most Common Character Entities: <br />Result <br />Description <br />Entity Name <br />Entity Number <br /> <br />non-breaking space <br /> <br />&#160; <br />< <br />less than <br />&lt; <br />&#60; <br />> <br />greater than <br />&gt; <br />&#62; <br />&amp; <br />ampersand <br />&amp; <br />&#38; <br />" <br />quotation mark <br />&quot; <br />&#34; <br />' <br />apostrophe <br />&apos; (does not work in IE) <br />&#39; <br />Some Other Commonly Used Character Entities: <br />Result <br />Description <br />Entity Name <br />Entity Number <br />&#162; <br />cent <br />&cent; <br />&#162; <br />&#163; <br />pound <br />&pound; <br />&#163; <br />&#165; <br />yen <br />&yen; <br />&#165; <br />&#8364; <br />euro <br />&euro; <br />&#8364; <br />&#167; <br />section <br />&sect; <br />&#167; <br />&#169; <br />copyright <br />&copy; <br />&#169; <br />&#174; <br />registered trademark <br />&reg; <br />&#174; <br />&#215; <br />multiplication <br />&times; <br />&#215; <br />&#247; <br />division <br />&divide; <br />&#247; <br />To see a full list of HTML character entities go to our <a href="http://www.w3schools.com/tags/ref_entities.asp">HTML Entities Reference</a>. <br />HTML Links <br /> <br />HTML uses a hyperlink to link to another document on the Web. <br />Examples <br /><a href="http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_links" target="_blank">Create hyperlinks</a>This example demonstrates how to create links in an HTML document. <br /><a href="http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_imglink" target="_blank">An image as a link</a>This example demonstrates how to use an image as a link. <br />(You can find more examples at the bottom of this page) <br />The Anchor Tag and the Href Attribute <br />HTML uses the <a> (anchor) tag to create a link to another document. <br />An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. <br />The syntax of creating an anchor: <br /><a href="url">Text to be displayed</a> <br />The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. <br />This anchor defines a link to W3Schools: <br /><a href="http://www.w3schools.com/">Visit W3Schools!</a> <br />The line above will look like this in a browser: <br /><a href="http://www.w3schools.com/">Visit W3Schools!</a> <br />The Target Attribute <br />With the target attribute, you can define where the linked document will be opened. <br />The line below will open the document in a new browser window: <br /><a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> <br /> <br />The Anchor Tag and the Name Attribute <br />The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. <br />Below is the syntax of a named anchor: <br /><a name="label">Text to be displayed</a> <br />The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use. <br />The line below defines a named anchor: <br /><a name="tips">Useful Tips Section</a> <br />You should notice that a named anchor is not displayed in a special way. <br />To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this: <br /><a href="http://www.w3schools.com/html_links.asp#tips">Jump to the Useful Tips Section</a> <br />A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this: <br /><a href="#tips">Jump to the Useful Tips Section</a> <br /> <br />Basic Notes - Useful Tips <br />Always add a trailing slash to subfolder references. If you link like this: href="http://www.w3schools.com/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href="http://www.w3schools.com/html/" <br />Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document. <br />If a browser cannot find a named anchor that has been specified, it goes to the top of the document. No error occurs. <br />More Examples <br /><a href="http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_link_target" target="_blank">Open a link in a new browser window</a>This example demonstrates how to link to another page by opening a new window, so that the visitor does not have to leave your Web site. <br /><a href="http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_link_locations" target="_blank">Link to a location on the same page</a>This example demonstrates how to use a link to jump to another part of a document. <br /><a href="http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_frame_getfree" target="_blank">Break out of a frame</a>This example demonstrates how to break out of a frame, if your site is locked in a frame. <br /><a href="http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_mailto" target="_blank">Create a mailto link</a>This example demonstrates how to link to a mail message (will only work if you have mail installed). <br /><a href="http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_mailto2" target="_blank">Create a mailto link 2</a>This example demonstrates a more complicated mailto link. <br />Link Tags <br />Tag <br />Description <br /><a href="http://www.w3schools.com/tags/tag_a.asp"><a></a> <br />Defines an anchor <br /> <br /> <br /></p> <div style='clear: both;'></div> </div> <div class='post-footer'> <p class='postmetadata'><small> <span> <abbr class='post_date' title='5:10 AM'>5:10&#8239;AM</abbr> </span> | <span class='post-labels'> </span> | <span class='post-icons'> <span class='item-action'> <a href='https://www.blogger.com/email-post/6747850777942446682/4026082541232994957' title='Email Post'> <span class='email-post-icon'>&#160;</span> </a> </span> <p class='postmetadata alt'> <small> This entry was posted on 5:10&#8239;AM You can follow any responses to this entry through the <a href='https://infosearch4u.blogspot.com/feeds/8032449888700751836/comments/default'>RSS 2.0</a> feed. You can <a href='https://www.blogger.com/comment/fullpage/post/6747850777942446682/4026082541232994957' onclick=''>leave a response</a>, or <a href='https://infosearch4u.blogspot.com/2008/05/html-text-formatting.html' rel='trackback'>trackback</a> from your own site. </small></p> <span class='item-control blog-admin pid-1321919957'> <a href='https://www.blogger.com/post-edit.g?blogID=6747850777942446682&postID=4026082541232994957&from=pencil' title='Edit Post'> <span class='quick-edit-icon'>&#160;</span> </a> </span> </span></small> </p> <p class='post-footer-line post-footer-line-2'></p> <p class='post-footer-line post-footer-line-3'></p> </div> </div> <div class='comments' id='comments'> <a name='comments'></a> <h4> 0 comments: </h4> <dl id='comments-block'> </dl> <p class='comment-footer'> <a href='https://www.blogger.com/comment/fullpage/post/6747850777942446682/4026082541232994957' onclick=''>Post a Comment</a> </p> <div id='backlinks-container'> <div id='Blog1_backlinks-container'> </div> </div> </div> <!--Can't find substitution for tag [adEnd]--> </div> <div class='blog-pager' id='blog-pager'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' href='https://infosearch4u.blogspot.com/2008/05/html-frames-tables-lists.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://infosearch4u.blogspot.com/2008/05/learnig-html-introduction-elements-etc.html' id='Blog1_blog-pager-older-link' title='Older Post'>Older Post</a> </span> <a class='home-link' href='https://infosearch4u.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://infosearch4u.blogspot.com/feeds/4026082541232994957/comments/default' target='_blank' type='application/atom+xml'>Post Comments (Atom)</a> </div> </div> </div><div class='widget HTML' data-version='1' id='HTML7'> <div class='widget-content'> Bidvertiser <!-- Begin BidVertiser code --> <script language="JavaScript1.1" src="//bdv.bidvertiser.com/BidVertiser.dbm?pid=131452%26bid%3D321061" type="text/javascript"></script> <noscript><a href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">pay per click</a></noscript> <!-- End BidVertiser code --> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML4'> <div class='widget-content'> <!-- BEGIN STANDARD TAG - 468 x 60 - Computers and More: Infosearch4u.blogspot.com - DO NOT MODIFY --> <iframe scrolling="NO" frameborder="0" width="468" marginheight="0" src="http://ads.komli.com/st?ad_type=iframe&ad_size=468x60&section=387452" height="60" marginwidth="0"></iframe> <!-- END TAG --> <script type="text/javascript"> var dc_UnitID = 14; var dc_PublisherID = 43559; var dc_AdLinkColor = 'blue'; var dc_adprod='ADL'; var dc_open_new_win = 'yes'; </script> <script src="//kona.kontera.com/javascript/lib/KonaLibInline.js" type="text/javascript"></script> </div> <div class='clear'></div> </div></div> </div> </div> <div class='navigation'> <div class='alignleft'></div> <div class='alignright'></div> </div> </div> <div id='footwrap'> <!-- Please don't remove the designed by, you can remove the availabe free at if you want, but don't remove the designed by link --> <p>Designed by <a href='http://www.seotalk.es'>Posicionamiento Web</a> | Bloggerized by <a href='http://www.gosublogger.com/'>GosuBlogger</a> | <a href='http://www.eblogtemplates.com/blue-business-blogger/'>Blue Business Blogger</a></p> </div> </div> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/91768132-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY47UP_GhtUWmD4d8YfgmOv5Wy4BTA:1737171896089';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6747850777942446682','//infosearch4u.blogspot.com/2008/05/html-text-formatting.html','6747850777942446682'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '6747850777942446682', 'title': 'COMPUTERS AND MORE', 'url': 'https://infosearch4u.blogspot.com/2008/05/html-text-formatting.html', 'canonicalUrl': 'http://infosearch4u.blogspot.com/2008/05/html-text-formatting.html', 'homepageUrl': 'https://infosearch4u.blogspot.com/', 'searchUrl': 'https://infosearch4u.blogspot.com/search', 'canonicalHomepageUrl': 'http://infosearch4u.blogspot.com/', 'blogspotFaviconUrl': 'https://infosearch4u.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\x22COMPUTERS AND MORE - Atom\x22 href\x3d\x22https://infosearch4u.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22COMPUTERS AND MORE - RSS\x22 href\x3d\x22https://infosearch4u.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22COMPUTERS AND MORE - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/6747850777942446682/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22COMPUTERS AND MORE - Atom\x22 href\x3d\x22https://infosearch4u.blogspot.com/feeds/4026082541232994957/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-2656021733847397', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/d2c988fc3a56b1b1', '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': '4026082541232994957', 'pageName': 'HTML text Formatting', 'pageTitle': 'COMPUTERS AND MORE: 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 Text Formatting\r \r HTML defines a lot of elements for formatting output, like bold or italic text.\r Below are a lot of examples that yo...', 'url': 'https://infosearch4u.blogspot.com/2008/05/html-text-formatting.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 4026082541232994957}}]); _WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'headersection', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'lsidebar', document.getElementById('HTML11'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML10', 'lsidebar', document.getElementById('HTML10'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML9', 'lsidebar', document.getElementById('HTML9'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'lsidebar', document.getElementById('HTML1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML6', 'lsidebar', document.getElementById('HTML6'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'lsidebar', document.getElementById('HTML2'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML8', 'lsidebar1', document.getElementById('HTML8'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'lsidebar1', document.getElementById('LinkList1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'lsidebar1', document.getElementById('HTML5'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'lsidebar1', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_FeedView', new _WidgetInfo('Feed1', 'lsidebar1', document.getElementById('Feed1'), {'title': 'Recent Posts', 'showItemDate': true, 'showItemAuthor': true, 'feedUrl': 'http://feeds.feedburner.com/computersandmore', 'numItemsShow': 5, 'loadingMsg': 'Loading...', 'openLinksInNewWindow': false, 'useFeedWidgetServ': 'true'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'main', document.getElementById('HTML3'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/599103511-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML7', 'main', document.getElementById('HTML7'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'main', document.getElementById('HTML4'), {}, 'displayModeFull')); </script> </body> </html>