Obscure, but semantic HTML tags
“Mind your P’s and Q’s” was the title of a presentation I recently gave at work about little used, but useful HTML tags. Here’s some notes from what was covered:
When doing markup it’s easy to identify elements in terms of paragraphs, lists, divs, and spans, but try not to forget there are other tags which can aid you in semantically marking up your pages.
- <Q>
- The Q tag should be used for short, one-line quotations. This tag will add language specific quote marks around the text for you automatically — which is quite cool. Unfortunately Internet Explorer does not support this. You can remove the generated quotes by adding
q:before, q:after {content:'';}to your stylesheet. - <BLOCKQUOTE>
- Most people are familiar with using the blockquote tag to indent text. This usage is presentational and should never be used. The correct use of the tag is for when you want to markup long quotations.
- <CODE>
- The code tag is for fragments of code which are displayed on the page. There are also similar tags with minor semantic differences such as samp, sample output from a program; kbd, text the user should type; and var, a program variable.
- <ABBR>
- When you use an abbreviation you cannot be sure that the user will know the meaning. To make the page accessible you could use the abbr tag to pass along the meaning. Unfortunately, Internet Explorer doesn’t support the hover tooltip for the title, but degrades gracefully.
- <ACRONYM>
- Similar in usage to the abbr tag this is for acronyms and is supported by all browsers.
- <INS>
- The ins tag is for document changes where text was added at a later time. By default this text appears underlined.
- <DEL>
- The del tag is for document changes where text was removed at a later time but you still want to appear for historical reasons. By default this text has a line through it.
- <OPTGROUP>
- Probably one of the least known, but more useful tags. Optgroup is used to group similar option values. A great use for this is to create multiple select boxes which update each other when changed and still degrade gracefully when Javascript is turned off.
