CODEWITHSUNDEEP
htmlmarkupsemantics
meleyal
meleyal

Reputation: 33310

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

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

Upvotes: 0

Views: 1574

Answers (4)

unor
unor

Reputation: 96597

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)

Upvotes: 1

Chris Van Opstal
Chris Van Opstal

Reputation: 37547

Take a look at microformats, specifically the XOXO Microformat.

Upvotes: 1

Kenan Banks
Kenan Banks

Reputation: 211980

Smells like a nested, unordered list to me.

Upvotes: 2

scunliffe
scunliffe

Reputation: 63588

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.

Upvotes: 1

Related Questions