Often Forgotten XHTML Tags you Should Know & Use

The contents of this article may be out of date. It has been archived and will no longer be updated, comments are closed and the page is provided for reference purposes only.

Over the years web authors have moved away from HTML tags in favor of CSS and while separating content from presentation is the way forward adding spans and classes can add more to markup than using XHML tags in the right places. Only a handful of these tags are used in the markup of web pages today. Here are a few XHTML tags that perhaps should be used a little more often than they actually are.

<abbr>

By marking up abbreviations you can give useful information to your visitors by showing tooltips when they hover the mouse over the element. HTML 4 supported both <abbr> and <acronym> tags to describe abbreviations and acronyms. The HTML 5 standard depreciates the <acronym> tag and advises authors to use <abbr> instead in both cases.

Usage:

<abbr title=“HyperText Markup Language”>HTML</abbr>

This is the result. Hover your mouse above the following text.

HTML

<dfn>

<dfn> defines a definition term. The title attribute is often used to describe the definition and can be helpful to add to aid your visitors. For more detailed definitions or multiple terms <dl>, <dt> and <dd> are used to construct definition lists.

Usage:

<dfn title=“Microsoft web browser”>Internet Explorer</dfn>

This is the result. Hover your mouse above the following text.

Internet Explorer

<address>

The <address> tag is intended for contact information, such as an address or a signature. The tag should not be used to describe a postal address, unless it is a part of the contact information. The address usually renders in italic. Most browsers will add a line break before and after the address element.

Usage:

<address>
Author of this document:<br />
<a href=“mailto:hello@markinns.com”>Mark Inns</a>
<address>

<q>

The <q> tag defines a short quotation. It tells the browser to insert quotation marks around the marked element. The <blockquote> tag is used to add larger quotes as a block element, <q> is intended to be used inline. Most of us use the &quot; entity whenever they need to insert quotations, or in the case of some software (ExpressionEngine) quotes are turned into curly quotes for us. But the <q> tag could be a better option if you want to add style to your quotes with CSS.

Usage:

<q>The quick brown fox jumps over the lazy dog</q>

Result:

The quick brown fox jumps over the lazy dog

<bdo>

Bi-directional text. If you don’t speak (or read) on of the Arabic languages you probably have not heard of or ever needed to use this tag before. The tag is usually used with languages that are read in a different direction to the default language. For example, if Hebrew were used in an English document, it would need to be defined as being read from right-to-left.

Usage:

<bdo dir=“rtl”>The quick brown fox jumps over the lazy dog</bdo>

Result:

The quick brown fox jumps over the lazy dog

Another tag that has not been in the HTML standard since 1998 is <wbr>. The <wbr> means word break and its purpose is to tell the browser that it “may insert a line break here, if it wishes.” If the browser does not think a line break is necessary nothing happens.

The <wbr> works like word wrap – it wraps the text only when necessary, thereby preventing the page from breaking because of the presence of exceptionally long lines of text. The tag is not part of HTML 5 and therefore should not be used. The function <wbr> is actually quite useful especially when using fluid layouts as this site does.

The solution is Soft Hyphens (&shy;). A soft hyphen is a character of text that is usually invisible. It signals a spot in the text (usually in the middle of a long word) where it would be acceptable to break the line with a hyphen. When a browser that supports soft hyphens encounters a long word or other long piece of text with no obvious wrap point that doesn’t fit horizontally inside a block on the page, it will look for a soft hyphen within the text and display it as a normal hyphen followed by a line break. Using Soft Hyphens will make sure your site validates and render the same effect as the depreciated <wbr> tag.

Usage:

Here is a long word Taumata­whak­a­tangi­hanga­koauau­o­­tamatea­turipukaka­piki­­maunga­horo­nuku­po­kai­whenua­­kitana­tahu it is the Maori name for a hill in New Zealand now generally abbreviated to Taumata. Another long place name is Gorsa­fawd­dach­aidraigodan­­heddo­gleddolon­­penrhyn­areur­­draeth­cere­digion, it’s a town close to Cardigan Bay in Wales.

Try resizing your browser window to see the the words become broken.

This article was posted on 20 February 2009 in HTML

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.