Skip to main content

HTML - Formatting

If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.

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>
This will produce the following result −

Underlined Text

Anything that appears within <u>...</u> element, is displayed with underline as shown 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>
This will produce the following result −

Strike Text

Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text as shown below −

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Strike Text Example</title>
   </head>
 
   <body>
      <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
   </body>
 
</html>
This will produce the following result −

Monospaced Font

The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Monospaced Font Example</title>
   </head>
 
   <body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
   </body>
 
</html>
This will produce the following result −

Superscript Text

The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Superscript Text Example</title>
   </head>
 
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
 
</html>
This will produce the following result −

Subscript Text

The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text Example</title>
   </head>
 
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
 
</html>
This will produce the following result −

Inserted Text

Anything that appears within <ins>...</ins> element is displayed as inserted text.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Inserted Text Example</title>
   </head>
 
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
 
</html>
This will produce the following result −

Deleted Text

Anything that appears within <del>...</del> element, is displayed as deleted text.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Deleted Text Example</title>
   </head>
 
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
 
</html>
This will produce the following result −

Larger Text

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

Example


<!DOCTYPE html>
<html>

   <head>
      <title>Larger Text Example</title>
   </head>
 
   <body>
      <p>The following word uses a <big>big</big> typeface.</p>
   </body>
 
</html>
This will produce the following result −

Smaller Text

The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below −

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

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

</html>
This will produce the following result −

Grouping Content

The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.
For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special 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" bgcolor = "white">
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
 
</html>
This will produce the following result −
HOME        CONTACT      ABOUT
Content Articles
Actual content goes here.....
The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element as follows.

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>
This will produce the following result −

These tags are commonly used with CSS to allow you to attach a style to a section of a page.

Labels:

Comments

Post a Comment

Popular posts from this blog

The new TAG Heuer Carrera Calibre Tourbillon Nanograph is a lot of buzzwords in a beautiful package

Almost every word in the name of TAG Heuer’s new watch – the Carrera  Calibre Heuer 02T Tourbillon Nanograph – is important. Carrera connects it to TAG’s long history of chronographs while Calibre suggests a handmade watch made with some technical prowess. Tourbillon means you can expect this thing to cost more than a car (about $25,000 when it goes on sale) and Nanograph suggests that this thing is doing something quite unique. And it is. TAG Heuer loves experimenting with new materials and the Nanograph features a new hairspring design that is unique to TAG. The hairspring, which is made of carbon-composite, is lightweight and unaffected by gravity or shock. It also offers “perfect concentric oscillations” and is completely antimagnetic. Couple that with the rotating tourbillon and the suggestion is that this watch will remain accurate under all sorts of pressure. Further, rest of the movement includes carbon fiber and aluminum which reduces the effects of temperat...
Post a Comment
Read more

HTML - Lists

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain − <ul>  − An unordered list. This will list items using plain bullets. <ol>  − An ordered list. This will use different schemes of numbers to list your items. <dl>  − A definition list. This arranges your items in the same way as they are arranged in a dictionary. HTML Unordered Lists An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML  <ul>  tag. Each item in the list is marked with a bullet. Example <!DOCTYPE html> <html> <head> <title> HTML Unordered List </title> </head> <body> <ul> <li> Beetroot </li> <li> Ginger </li> <li> Potato </li> <li> Radis...
Post a Comment
Read more

Asus ROG Phone goes up for pre-order in the UK with £100 discount

After  yesterday's launch in the UK , the Asus ROG Phone is finally set to hit the shelves in the country. However, you still need to wait until December 14 when the actual shipments start but if you hurry up and pre-order you can get the phone for £100 off. Otherwise, the actual price of the phone is £799 and can be found on Asus' official website. Unfortunately, though, there's still no word on the accessories and how much will they cost. We guess we will have to wait some more to find out.
Post a Comment
Read more