Formatting TextS2C Home « Formatting Text

In Lesson 5 of the Basic HTML tutorials we showed how to emphasise text using the </em> and </strong>. In this lesson we introduce a lot more tags that change the appearance of our text.

The <cite> Tag

The <cite> tag and its' closing </cite> tag are used to define a citation within our text.

The <code> Tag

The <code> tag and its' closing </code> tag are used to define computer code fragment within our text.

The <del> Tag

The <del> tag and its' closing </del> tag are used to define an editorial deletion within our text.

The <dfn> Tag

The <dfn> tag and its' closing </dfn> tag are used to define a definition term within our text.

The <ins> Tag

The <ins> tag and its' closing </ins> tag are used to define an editorial insertion within our text.

The <kbd> Tag

The <kbd> tag and its' closing </kbd> tag are used to define text to be entered by the user within our text.

The <samp> Tag

The <samp> tag and its' closing </samp> tag are used to define a sample output code fragment within our text.

The <var> Tag

The <var> tag and its' closing </var> tag are used to define a computer variable within our text.

Viewing the Tags

Wow! That's a lot of tags and the best way to understand them is to see what effects they have on our text.

Open the file with Notepad we created and tested in Lesson: 2 More HTML Structure

You saved the file to your computer in the C:\_HTMLIntermediate folder as lesson_2_webpage.html

Copy and paste the following code into the reopened file, overwriting the existing contents.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Tutorials - Intermediate HTML Lesson 3 - Formatting Text
</title>
</head>
<body>
<!-- Our HTML for formatting text follows -->
  <h2>Formatting Text Tags</h2>
  <h3>The Citation Tag</h3>
  <p>Shakespeare once wrote '<cite>If music be the food of love, play on</cite>'</p>
  <h3>The Code Tag</h3>
  <p>A void return Java Method Signature. <code>void foo() {} </code></p>
  <h3>The Editorial Deletion Tag</h3>
  <p>Today is <del>Monday</del>Tuesday.</p>
  <h3>The Definition Term Tag</h3>
  <p>The Milky Way is a <dfn>Spiral</dfn> galaxy.</p>
  <h3>The Editorial Insertion Tag</h3>
  <p>There were <ins>6</ins> green bottles hanging on the wall</p>
  <h3>The Keyboard Input Tag</h3>
  <p>Type <kbd>Fried Green Tomatoes</kbd> and press the Enter key.</p>
  <h3>The Sample Output Code Fragment Tag</h3>
  <p>System.out.println("Sample Output Code"); <samp>Sample Output Code</samp></p>
  <h3>The Computer Variable Tag</h3>
  <p><var>colCount</var> = 20;</p>
</body>
</html>

Save the file in the C:\_HTMLIntermediate folder as lesson_3_webpage.html and close the Notepad.

save format

Viewing Our Changed File

From the C:\_HTMLIntermediate folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

formatting

Reviewing Our Changes

There are subtle differences in some tags and others just look italicized. Similar effects can be achieved with a little CSS but these tags can cut down on CSS definitions and have their place in HTML.

Lesson 3 Complete

Play around with the HTML code and see the different effects you get with these tags.

Related Tutorials

HTML4 Basic Tutorials - Lesson 5 - Emphasising Text

HTML4 Advanced Tutorials - Lesson 2 - More Text Tags

What's Next?

In the next lesson we take a final look at lists by creating definition lists.

HTML4 Reference

The <cite> citation tag

The <code> computer code fragment tag

The <del> editorial deletion text tag

The <dfn> definition term tag

The <ins> editorial insertion text tag

The <kbd> keyboard entry tag

The <samp> sample output code fragment tag

The <var> computer variable tag

go to home page Homepage go to top of page Top