How would you markup a building plan/map using semantic HTML?

Question

The building (a museum) has 7 levels (+3 to -3), each divided into different rooms/areas. Hovering over an area will reveal a popup describing that area.

I'm looking for some markup that will accurately represent the 7 levels and their areas. The plan should make sense and be 'navigable' without any CSS/JS.

Edit: Some clarification, the markup only has to represent the 'semantic structure' of the building, not the spatial layout (CSS will add in the layout and graphics).

Answer 1

Sounds like a job for SVG? (Sample Adobe Building in San Jose)

I realize that this does use JavaScript, but if you have 7 floors * 10+ rooms? this would get rather hairy with pure CSS. You could use some <ul> elements to make nested levels of rooms, but if the building is this big, I don't think the list (even if rendered as blocks) would be meaningful to view.

Answer 2

Smells like a nested, unordered list to me.

Answer 3

Take a look at microformats, specifically the XOXO Microformat.