HTML Tags and REL attributes You Really Should Know

via Net tuts+ 10 Rare HTML Tags You Really Should Know is a timely reminder (especially since IE 8 is just out), of some basic HTML markup that you really should know.

in particular there are several tag you really need to know :

• the <optgroup> tag,  for grouping of options inside a select box.
• the <label> tag, to note the label’s text,  can also pass a “for” attribute to specify which element is to be given the label, and make the caption clickable for the associated element.
• the <fieldset> tag, to logically group form elements.   Once applied  tag draws a box around the elements within the fieldset, by default styling.
• the <wbr> tag, is used to specify a place where you think a line break might be useful, but only if needed.

They missed the “no break” or <nobr> tag, which prevents any line breaks from occurring in a flow of text, which I had need of when working with picky marketing people at “Brand Name” split over two lines.

update : james herdman pointed out to me that <abbr> isn’t supported by IE5 and IE6.   (See Styling abbreviations and acronyms for more information on <abbr> and <acronym>.)  And that a few organization are still stuck in the 90’s with their use of ie 6 (shutter).

The Net Tut’s article also included the “Rel” html attribute of the anchor link tag.    It’s example of rel=”clickable” is a new one for me.  I would think that a class name would be fine or better.

REL attributes are heavily used in microformats and these are some of the more common ones:

• rel=”tag” is used for web page tag or folksonomy, see my 2005 post Folksonomies on Slashdot: revised, restated and summarized for more.
• rel=”me” is used identifying pages about “me”, in the building XFN (XHTML Friends Network) data or profile aggregation.
• rel=”nofollow” means that search engines SHOULD NOT afforded any additional weight or ranking to the linked to web page.
• rel=”home” to a hyperlink, used for site navigation purposes, links to the homepage of the site in which the current page appears.
• rel=”ext” to define a link as being to an external website.

Also used is rel=”Next” and rel=”Prev”  which are a little different as they are part of the W3 Basic HTML data types and refer to the next or Previous documents in a linear sequence of documents, and may be used be user agents to preload the “next” or “previous” document to reduce the perceived load time.  (I’ve seen them used by Grease Monkey scripts to give you a bottomless page effect)

See this list of existing rel values which collects all known HTML rel values from specifications, formats, proposals, brainstorms, and non-trivial POSH (Plain Old Semantic HTML) usage in the wild.

Any other useful but obscure tag’s and attributes we should know?

2010 Update : One to add is the short link microFormat. Flickr, YouTube, TechCrunch and all WordPress blogs already use this rel=”shortlink” mircoFormat. found via the Show Short Link GreaseMonkey Script

2010 Aug Update : another one to add is the rel link for a webpage icon for Web Clip, similar to favicons, using rel=”apple-touch-icon” in order to set the home screen icon on your iPhone and iPod Touch and iPad devices.

If you don’t want Safari on iOS to add any effects to the icon, replace “apple-touch-icon” with “apple-touch-icon-precomposed”. See Configuring Web Applications in the Safari Dev Center for more. Also Adding FavIcon’s for Moble Safari Web Sites (iPod/iPhone/iPad)

You can also minimize the status bar that is displayed at the top of the screen on iPhone OS, making it more like a “a native application” by using a meta tag “apple-mobile-web-app-status-bar-style”.

Note: you have to save the app to your home screen for these to work.