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

Похоже на работу для SVG? (Образец здания Adobe в Сан-Хосе)

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

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

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

Использование 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 и соответствующим образом скорректировать уровень заголовка)