Как бы вы разметили план здания / карту, используя семантический HTML?

Question

Здание (музей) имеет 7 уровней (от +3 до -3), каждый из которых разделен на разные комнаты / зоны. Если навести курсор на область, появится всплывающее окно с описанием этой области.

Я ищу некоторую разметку, которая будет точно представлять 7 уровней и их области. План должен иметь смысл и быть «ориентированным» без каких-либо CSS / JS.

Редактировать: некоторые пояснения, разметка должна представлять только «семантическую структуру» здания, а не пространственную планировку (CSS добавит в макет и графику).

Answer 1

Пахнет мне как вложенный, неупорядоченный список.

Answer 2

Использование HTML5 (но не должно иметь большого значения, если вы хотите использовать HTML 4.01):

Если вы хотите представить здание с помощью изображений, вы можете использовать Карта изображений , состоящую из map и area. Атрибут area (href) может указывать на страницу, содержащую подробное описание комнаты. Атрибут alt может содержать краткое описание комнаты, например «Клубничная комната (уровень 4)».

Если разметка больше похожа на текстовую альтернативу (например, если вы используете object, canvas или что-то в этом роде), я бы выбрал структуру заголовка:

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

(для HTML 4.01 вы бы использовали div вместо section и соответственно изменили бы уровень заголовка)

Answer 3

Взгляните на микроформаты , в частности XOXO Микроформат .

Answer 4

Звучит как работа для SVG? ( Образец Adobe Building в Сан-Хосе )

Я понимаю, что здесь используется JavaScript, но если у вас 7 этажей * 10+ комнат? с чистым CSS это будет довольно сложно. Вы можете использовать некоторые элементы <ul> для создания вложенных уровней комнат, но если здание такое большое, я не думаю, что список (даже если он представлен в виде блоков) будет иметь смысл для просмотра.