...

Web Technologies - HTML

Back to Course

Lesson Description


Lession - #142 HTML Formatting


Bold Text

Anything that appears within <b>...</b>... element, is displayed in bold as shown below –

 


Example

<!DOCTYPE html>
<html>

   <head>
      <title>Bold Text Example</title>
   </head>
    
   <body>
      <p>The following word uses a <b>bold</b> typeface.</p>
   </body>
    
</html>
This will produce the following result –
 

Italic Text

Anything that appears within <i>...</i> element is displayed in italicized as shown below –
Example

    <!DOCTYPE html>
<html>

   <head>
      <title>Italic Text Example</title>
   </head>
    
   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>
    
</html>
 

Underlined Text

Anything that appears inside<u>...</u> element, is displayed with underline as given below −
Example

<!DOCTYPE html>
<html>

   <head>
      <title>Underlined Text Example</title>
   </head>
    
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
    
</html>
 

Strike Text

As given below, any text appearing within the strikethrough element (<strike>...</strike>>
is displayed with a thin line through it.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>Example for the Underlined Text </title>
   </head>
    
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
    
</html>
 

Monospaced Font

A <tt>...</tt> element's content is written in monospaced font.Most fonts have variable widths since letters have different widths (for example, the letter 'm' has a wider width than the letter 'i'>
.A monospaced font, however, has the same width for each letter.
Example
 

<!DOCTYPE html>
<html>

   <head>
      <title>Example for the Strike Text </title>
   </head>
    
   <body>
      <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
   </body>
    
</html>
The text with a <sup>...</sup> element appears in superscript; the font size used is the same as the surrounding characters, but the content is displayed half a character above them.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>This is an Example for the Monospaced Font</title>
   </head>
    
   <body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
   </body>
    
</html>
 

Subscript Text

In a<sub> ...</sub> element, the text is written in subscript; the font size is the same as the surrounding characters, but is displayed half a character's height below them.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>This is an example for Superscript Text </title>
   </head>
    
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
    
</html>
 

Inserted Text

Anything within the <ins>...</ins> element will appear as inserted text.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>This is an example for Inserted Text </title>
   </head>
    
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
    
</html>
 

Deleted Text

Anything within the<del>...</del> element is displayed as deleted text.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>This is an example for Deleted Text </title>
   </head>
    
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
    
</html>
 

Larger Text

As shown below, the content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it. −
Example

<!DOCTYPE html>
<html>

   <head>
      <title>This is an example for Larger Text</title>
   </head>
    
   <body>
      <p>The following word uses a <big>big</big> typeface.</p>
   </body>
    
</html>
 

Smaller Text

As shown below, the content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>This is an example for  Text </title>
   </head>

   <body>
      <p>The following word uses a <small>small</small> typeface.</p>
   </body>

</html>
 

Grouping Content

You can use the <div> and <span> elements to group together several elements to create sections or subsections of a page. For example, you could place all of the footnotes on a page within a<div> element to indicate that all of the elements within that <div> element are related to the footnotes. You could then apply a style to this<div> element to make them appear according to a specific set of style rules.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
    
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">HOME</a> | 
         <a href = "/about/contact_us.htm">CONTACT</a> | 
         <a href = "/about/index.htm">ABOUT</a>
      </div>

      <div id = "content" align = "left" >
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
    
</html>

In contrast, the <span> element can only be used to group inline elements. So, if you have a section of a sentence or paragraph that you want to group together, use the span> element as shown below.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
    
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
    
</html>



These tags are commonly used in conjunction with CSS to allow you to apply a style to a specific section of a page.