RK* - rikkertkoppes.com

thoughts

[HTML] the map element

For navigation, people often use an ol or ul element, wrapped in something like <div id="navigation"> nowadays. But let us not forget about the map element. Besides client side image maps, this element could (and in my opinion should) be used for imageless navigation as well.

When we take a look at the HTML 4.01 specification for map, we see that there's a little passage on the use of map other than an image map.

The MAP element specifies a client-side image map (or other navigation mechanism) that may be associated with another elements (IMG, OBJECT, or INPUT). An image map is associated with an element via the element's usemap attribute. The MAP element may be used without an associated image for general navigation mechanisms.

W3C: 13.6.1 Client-side image maps: the MAP and AREA elements

So, instead of wrapping a div around your navigation elements (lists probably), put it in a map element, which is much more meaningful.

<map name="navigation" id="navigation">
  <ol>
    <li>item 1</li>
    <li>item 2</li>
    <!-- etc -->
  </ol>
</map>

Note that the name attribute on this element is mandatory in HTML, in XHTML, the id attribute is mandatory.

Further reading


comment

DerKleinePunkt (2005-04-13)

Correct me if i am wrong, but i noticed the following: - For navigation...use a ul element...But let...the map element (a moet trouwens an zijn, niet zeurderig bedoeld)

Looking at your example should that not be, "use a div element" instead of ul? The way i read your article, you could (should) use the map instead of div to specify navigational areas. But when i look at your pagesource, you do not use a map for your top navigation? (see <div id="navigation" class="structural">)

Rikkert (2005-04-15)

you got a point there

- you are right about the spelling issues - you are right about the DIV turning into MAP (instead of UL, which in my example is infact an OL) - you are also right about my page source, but that's a thing on my list :D

let me get back to this all tomorrow (I will make some modifications to this article), thanks fot putting this out.

edit: done

DerKleinePunkt (2005-04-17)

I am back ;-)

I noticed that there is still a div element surrounding your top-navigation. Is this for the sence of structure? Or is that div used for page allingment or a combination of both or maybe even other reasons? I also read default.css, but i could only find code for the map element.

Rikkert (2005-04-17)

it is there to give extra structure to the document indeed, I have two map elements, one for global navigation and one for timeframe navigation, both are grouped in a surrounding div.

I do not use it for alignment purposes, that's why it doesn't appear in my css indeed. The class "structural" in my source for div's emphasizes these div's are used for structural purpuses only and not for chapter and paragraph structures (which in my opinion should be the default usage - see my "[HTML] what div is about" article)

Kees (2005-04-18)

"The MAP element specifies a client-side image map (or other navigation mechanism) that may be associated with another elements (IMG, OBJECT, or INPUT). An image map is associated with an element via the element's usemap attribute. The MAP element may be used without an associated image for general navigation mechanisms." (W3C)

I think W3C's means that the map element should only be used with a graphical navigation, not a textual one. In your example, the map element is not associated with anything.

DerKleinePunkt (2005-04-18)

"The map element may be uses without an associated image for general navigation mechanism". The last sentence is the most important (and propably should be mentioned in the example), the map element may be used for "general navigation" and not should.

I thought well in it's most basic form everything with a link is navigation, so you could use it almost anywhere . But the w3c startpage provided me with a good example, just compare the top-navigation with there menu's.

[offtopic] I am webprogrammer and still a html en css novice, but I think the w3c are pretty vage about which ellement should be used for example a menu or creating (div seems obvious enough) different page segments. By creating 100% correct html pages you still get a lot of extra code. See Rikkerts or the W3C code for example. It has structure, but if the w3c would create or define elements for specific tasks it would save a lot of code (div's, ul's you name it). And which less code and even more structure a page loads faster and it saves money (see every through tables out of the window topic). [/offtopic]

dexus (2005-07-10)

http://www.w3.org/TR/WCAG10-HTML-TECHS/#group-bypass

Add comment
older articles

AdministrationAtom feed