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.
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> <html lang="en"> <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:email@example.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.
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 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 upon 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 <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