HTML Text Formatting

In this tutorial you will learn how to format the text on the web pages using HTML tags.

While most HTML tags are used to create elements, HTML also provides in-text formatting tags to apply specific text-related styles to portions of text. This topic includes examples of HTML text formatting such as highlighting, bolding, underlining, subscript, and stricken text.

Example:   Try It

 
<b>This text is bold</b><br>
<i>This text is italic</i><br>
This is <sub>subscript</sub>and <sup>superscript</sup>

HTML Formatting Elements Try It

Formatting elements were designed to display special types of text:

• <b> - The HTML <b> element defines bold text, without any extra importance.
  This is bold text
• <strong> - <strong> is used to indicate that the text is fundamentally or semantically important to the surrounding text. A text-to-speech program speak these word(s) with a different tone of voice to convey that the text is important in some way.
  This is strongly important text.
• <small> - <small> is used to indicate the samller text.
  This is smaller text.
• <i> - The HTML <i> element defines italic text, without any extra importance.
  This is italic text
• <em> - The HTML <em> element is used to indicate that the text should have extra emphasis that should be stressed.
  This is emphasized text
• <mark> - The <mark> element is new in HTML5 and is used to mark or highlight text in a document.
  This is highlighted text.
• <del> - Deleted text Deleted text
• <ins> - Inserted text Inserted text
• <u> - Underlined text Underlined text
• <sub> - Subscript text _{Subscript text}
• <sup> - Superscript text ^{Superscript text}

Marking up computer code Try It

• <pre> -Preformatted text.
  Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
  

  This is
           @#$   Preformatted text... @#$
  

• <code> - Computer Code.
  The <code> tag is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.
  This is a computer code if (x=3) {print x;}

Marking-up Quotes Try It

• <q> - a short quotation.
  The q element can be used for a quote that is part of a sentence.
  
  Example:

  SRIREP goal is to: <q>Provide a quality education by hands-on training.</q>

  Result:   SRIREP goal is to: Provide a quality education by hands-on training.
• <cite> - for Work Title.
  The <cite> HTML element is used to describe a reference to a cited creative work, and must include the title of that work.
  
  Example:

  Conquer the heart of the enemy with truth and love, not by violence.
  <cite> - By Mahatma Gandhi</cite>
  

  Result: Conquer the heart of the enemy with truth and love, not by violence. - By Mahatma Gandhi
• <blockquote> - for a block-level quote.
  Blockquotes are generally displayed with indented left and right margins, along with a little extra space added above and below.
  
  Example:

   
  <blockquote> Conquer the heart of the enemy with truth and love, not by violence.
  <cite>By Mahatma Gandhi</cite></blockquote>
  

  Result:

  Conquer the heart of the enemy with truth and love, not by violence. -By Mahatma Gandhi

Showing Abbreviations Try It

To mark some expression as an abbreviation, use <abbr> tag:

 <p>I like to write <abbr title="Hypertext Markup Language">HTML</abbr>! </p> 

I like to write HTML!

Marking Contact Addresses Try It

To display the contact information for the author/owner of a document or an article., use <address> tag:

<address> 
Sri Ramanuja e-patashala,
123-3/4A,Beach Road,
Majali-Post,
Karwar-581400
</address>

Practice exercise:

1.Write an html code to display the web page as follows. View

Sri Hari Book Store

Mission

Sriharibookstore.com is committed to bringing the most convenient, easy and secure shopping experience on the web.

Products

10 Million Books across 20+ Languages, Audio Books, Gadgets & Accessories, Toys, Electronics, Mobiles & Tablets Accessories, Health Care Devices and Many More Stores.

If there's a book that you want to read, but it hasn't been written yet, then you must write it. ― Toni Morrison

Highlights

Sriharibookstore.com has been awarded the most promising Start-Up company 2013.
The Most Prompt Customer Service & Support 2013-2014.
India's largest Book Warehouse - India Book of Records 2013 -2014.