HTML Text Formatting

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

Formatting Text with HTML

There are a number of HTML tags that can be used to directly change the style of a text without the need to use CSS or style code. These tags together are called formatting tags. The formatting tags used in HTML are –

  • <b> … </b> – This tag gives the text a bold / bold style.
  • <em> … </em> – This tag Expresses any text as emphasize / important text.
  • <i> … </i> – This tag creates an italic style text.
  • <small> … </small> – This tag creates text that is shorter than normal.
  • <strong> … </strong> – This tag Reveals any text as important.
  • <sub> … </sub> – This tag expresses the text as a subscript style.
  • <sup> … </sup> – This tag expresses the text in a superscript style.
  • <ins> … </ins> – This tag expresses the text in an inserted style.
  • <del> … </del> – This tag expresses the text in a deleted style.
  • <mark> … </mark> – This tag marks and highlights an article.
  • <code> … </code> – This tag expresses the text in a computer code.

Now try to understand how these tags basically work:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
     <title>HTML Text Formatting</title>			
  </head>
  <body>
     <p>This tag - <b>gives the text a bold / bold style.</b> </p>
     <p>This tag - <em>Expresses any text as emphasize / important text.</em></p>
     <p>This tag - <i>creates an italic style text.</i></p>
     <p>This tag - <small>creates text that is shorter than normal.</small></p>
     <p>This tag - <strong>Reveals any text as important.</strong></p>
     <p>This tag - <sub>expresses the text as a subscript style.</sub></p>
     <p>This tag - <sup>expresses the text in a superscript style.</sup></p>
     <p>This tag - <ins>expresses the text in an inserted style.</ins></p>
     <p>This tag - <del>expresses the text in a deleted style.</del></p>
     <p>This tag - <mark>marks and highlights an article.</mark></p>
     <p>This tag - <code>expresses the text in a computer code.</code></p>
  </body>
</html>

Formatting Quotations

You can easily format quotes from other sources with the HTML <blockquote> tag.

Blackcoats are usually displayed with indented left and right margins, adding a little extra space at the top and bottom. Try an example to see how it works:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
     <title>HTML Formatting Quotations</title>			
  </head>
  <body>
	 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. Duo Reges: constructio interrete. Zenonis est, inquam, hoc Stoici. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. </p>
    
    <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres..</p>
        <cite>&mdash; Lorem ipsum</cite>
    </blockquote>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. Duo Reges: constructio interrete. Zenonis est, inquam, hoc Stoici. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. </p>
  </body>
</html>

Formatting Abbreviation

You can use the <abbr> tag to describe the summary. The title attribute is used to provide a full extension of the abbreviation inside this tag, which browsers display as a toolbar when the mouse cursor is placed over the element. Let’s try an example:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Formatting Abbreviation Tag in HTML </title>			
  </head>
  <body>
	 <p>The W3C is the main international standards organization for the <abbr title="World Wide Web">WWW or W3</abbr>.</p>
  </body>
</html>

Formatting Addresses

Web pages often include street or postal addresses. HTML provides a special tag <address> to represent contact information for an individual, person, or organization.

This tag should ideally be used to display contact information related to documents such as the author of the article. Most browsers display an address block in italics. Let’s try an example:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Formatting Addresses Tag in HTML </title>			
  </head>
  <body>
	 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. </p>
    <address>
      674 Henderson Rd,<br> 
      Trenton,<br>
      NC,  28585
    </address>
  </body>
</html>

TOOLS

ABOUT US

CONTACT