More Text TagsS2C Home « More Text Tags

In Lesson 5 of the Basic HTML tutorials and Lesson 3 of the Intermediate HTML tutorials we looked at most of the text tags available for formatting our text. In this lesson we introduce the final HTML text tags and show you when and how to use them.

The <abbr> Tag

The <abbr> tag and its' closing </abbr> tag are used to define an abbreviation and are generally used with the title attribute, which specifies the phrase or word being abbreviated.

The <acronym> Tag

The <acronym> tag and its' closing </acronym> tag are used to define an acronym. This is an abbreviation spoken as a word and is generally used with the title attribute which specifies the phrase.

The <address> Tag

The <address> tag and its' closing </address> tag are used to define contact information such as an address and email.

The <bdo> Tag

The <bdo> tag and its' closing </bdo> tag are used to define a bidirectional override which reverses the direction of the text dependant upon the value in the required dir attribute.

The <blockquote> Tag

The <blockquote> tag and its' closing </blockquote> tag are used to define a long quotation within our text.

The <pre> Tag

The <pre> tag and its' closing </pre> tag are used to define preformatted text including line breaks and whitespace.

The <q> Tag

The <q> tag and its' closing </q> tag are used to define a short inline quotation 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: 1 Importing CSS and JavaScript

You saved the file to your computer in the C:\_HTMLAdvanced folder as lesson_1_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 - Advanced HTML Lesson 2 - A Final Tour Of Text Tags
</title>
</head>
<body>
<!-- Our HTML for formatting text follows -->
  <h2>Formatting Text Tags</h2>
  <h3>The Abbreviation Tag</h3>
  <p><abbr title="Electric Light Orchestra">ELO</abbr></p>
  <h3>The Acronym Tag</h3>
  <p><acronym title="Time And Relative Dimension In Space">TARDIS</acronym></p>
  <h3>The Address Tag</h3>
  <address>Freddy Fudpucker<br />12 Flamingo Way<br />Bird Town<br />Turkey<br />
    <a href="mailto:kevandjules@server2client.com">Email</a><br />
  </address>
  <h3>The Bidirectional Override Tag</h3>
  <p><bdo dir="ltr">The text will flow from left to right</bdo><br />
     <bdo dir="rtl">The text will flow from right to left</bdo></p>
  <h3>The Block Quotation Tag</h3>
  <blockquote>
   <p>Quotation text in here and remember that blockquotes always enclose other<br />
      block elements such as paragraphs. If you do not do this the HTML will not<br />
      pass Strict HTML/XHTML. Better to have all our code pass this</p>
  </blockquote>
  <h3>The Quotation Tag</h3>
  <p>Quotation text<q>will be wrapped with quotation marks.</q></p>
  <h3>The Preformatted Text Tag</h3>
  <pre>This text will be be displayed
  in a fixed width font and preserves whitespace
	and carriage returns.</pre>
</body>
</html>

Save the file in the C:\_HTMLAdvanced folder as lesson_2_webpage.html and close the Notepad.

save final text tags

Viewing Our Changed File

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

final text tags

Reviewing Our Changes

Abbreviations and Acronyms

In the above screen shot ELO and TARDIS are underlined as I used the Firefox browser to display these tags. Other browsers such as Internet Explorer do not underline the <abbr> and <acronym> tags. Moving the mouse over the abbreviation will show the information held within the title attribute.

Address

The <address> tag is italicized in all browsers and most browsers add a line break before and after the <address> tag.

Bidirectional Override

The <bdo> tag along with its' required dir attribute render the text from left to right or right to left. This is particularly useful for rendering languages that are read from the right to left.

Quotations

The <blockquote> tag is used for long quotations and it's important to note that other block level elements such as paragraphs need to be enclosed within the <blockquote></blockquote> element.

The <q> tag is used for shore inline quotations and will enclose the text in single or double quotes dependant upon the browser being used to render in.

Preformatted Text

The <pre> tag is used to display text as it was entered. I find this particularly useful for indenting code examples and it is used extensively on this site in conjunction with the <code> tag.

Lesson 2 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 Intermediate Tutorials - Lesson 3 - Formatting Text

What's Next?

In the next lesson we take a look at interactive images and how to use them.

HTML4 Reference

The <abbr> abbreviated form tag

The <acronym> acronym tag

The <address> contact information tag

The <bdo> bidirectional override tag

The <blockquote> long quotation tag

The <q> short inline quotation tag

The <pre> preformatted tag

go to home page Homepage go to top of page Top