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).

score 2 · Answer 1 · answered Dec 23 '08 at 13:23

2

Smells like a nested, unordered list to me.

answered Dec 23 '08 at 13:23

Kenan Banks

207,056
34
155
173

I was thinking definition lists? – meleyal Dec 23 '08 at 13:42
It varies, between 2-6 rooms per floor – meleyal Dec 23 '08 at 13:58
I don't think definition lists are meant to be nested; semantically they are a flat list of name/value pairs. A nested unordered list is a good fit for this. – Adam Lassek Dec 23 '08 at 14:13
It is true that definition lists shouldn't be nested? – meleyal Dec 23 '08 at 14:24
I posted the definition list question over here: http://stackoverflow.com/questions/389086 – meleyal Dec 23 '08 at 15:26

score 1 · Answer 2 · answered Aug 27 '12 at 09:39

Using HTML5 (but shouldn't make a big difference if you'd like to use HTML 4.01):

If you want to represent the building with images, you can use an Image Map, consisting of map and area. The area (href attribute) could link to a page containing the detailed description of the room. The alt attribute could contain a short description of the room, like "Strawberry room (level 4)".

If the markup is more like a text-alternative (for example, if you'd use object, canvas or something like that), I would go with a heading structure:

<section>
 <h1>The building</h1>

 <section id="level-1">
  <h1>Level 1</h1>

   <section id="level-1-room-1">
    <h1>Room 1</h1>
    <p>description of room 1</p>
   </section>

   <section id="level-1-room-2">
    <h1>Room 2</h1>
    <p>description of room 2</p>
   </section>

 </section> <!-- #level-1 -->

 <section id="level-2">
  <h1>Level 2</h1>

   <section id="level-2-room-1">
    <h1>Room 1</h1>
    <p>description of room 1</p>
   </section>

   <section id="level-2-room-2">
    <h1>Room 2</h1>
    <p>description of room 2</p>
   </section>

 </section> <!-- #level-2 -->

</section>

(for HTML 4.01, you would use div instead of section and adjust the heading level accordingly)

score 1 · Answer 3 · answered Dec 23 '08 at 13:17

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.

score 1 · Answer 4 · answered Dec 23 '08 at 14:03

1

Take a look at microformats, specifically the XOXO Microformat.

answered Dec 23 '08 at 14:03

Chris Van Opstal

36,423
9
73
90

Thanks. What are the advantages of using XOXO, it wasn't made clear on the wiki page? – meleyal Dec 23 '08 at 14:19

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

4 Answers4

Linked