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:email@example.com">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.
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.
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.
The <address> tag is italicized in all browsers and most browsers add a line break before and after the <address> tag.
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.
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.
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.
In the next lesson we take a look at interactive images and how to use them.
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