HTML5 Advanced

HTML Structure - Page

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.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"  
         "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="https://www.w3.org/1999/xhtml/">
<head>
<title>
  HTML Doctor - 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 Address Tag</h3>
  <address>Freddy Fudpucker<br />12 Flamingo Way<br />Bird Town<br />Turkey<br />
    <a href="mailto:charlie@htmldoctor.info">Email</a><br />
  </address>
  <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.

notepad

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.

notepad

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 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 uopn 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/Quizzes

HTML5 Basic Tutorials - Lesson 2 - Basic HTML Structure

CSS Advanced Tutorials - Lesson 6 - Layout

What's Next?

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

HTML5 Reference

The <abbr> abbreviated form 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