如何使用语义HTML标记建筑平面图/地图？

该建筑（博物馆）有7层（+3至-3），每层分为不同的房间/区域。将鼠标悬停在某个区域上会显示一个描述该区域的弹出窗口

我正在寻找一些能够准确表示7个级别及其区域的标记。 该计划应该是有意义的，并且在没有任何CSS/JS的情况下是“可导航的”

---

编辑：澄清一下，标记只需表示建筑的“语义结构”，而不需要表示空间布局（CSS将添加到布局和图形中）。

听起来像是SVG的工作？（）

---

我知道这确实使用JavaScript，但是如果你有7层*10+个房间？如果使用纯CSS，这将变得相当复杂。您可以使用一些

元素来创建房间的嵌套层，但是如果建筑这么大，我认为列表（即使呈现为块）对查看来说没有意义。

听起来像是SVG的工作？（）

---

我知道这确实使用JavaScript，但是如果你有7层*10+个房间？如果使用纯CSS，这将变得相当复杂。您可以使用一些

元素来创建嵌套的房间级别，但如果建筑这么大，我认为列表（即使渲染为块）查看起来没有意义。
对我来说，闻起来像是嵌套的无序列表。
对我来说，闻起来像是嵌套的无序列表。
看看，特别是。
看看，特别是使用HTML5的。
（但如果您想使用HTML4.01，应该不会有太大的区别）：

如果要使用图像表示建筑，可以使用、和。
区域
（
href
属性）可以链接到包含房间详细描述的页面。
alt
属性可以包含房间的简短描述，如“草莓房（4级）”

如果标记更像一个文本替代品（例如，如果使用
对象
、
画布
或类似的东西），我会使用标题结构：

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


大楼
一级
1号房间
1号房间的说明

2号房间
房间2的说明

二级
1号房间
1号房间的说明

2号房间
房间2的说明


（对于HTML4.01，您可以使用
div
而不是
section
，并相应地调整标题级别）
使用HTML5（但如果您想使用HTML4.01，应该不会有太大的区别）：

如果要使用图像表示建筑，可以使用、和。
区域
（
href
属性）可以链接到包含房间详细描述的页面。
alt
属性可以包含房间的简短描述，如“草莓房（4级）”

如果标记更像一个文本替代品（例如，如果使用
对象
、
画布
或类似的东西），我会使用标题结构：

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


大楼
一级
1号房间
1号房间的说明

2号房间
房间2的说明

二级
1号房间
1号房间的说明

2号房间
房间2的说明


（对于HTML4.01，您可以使用
div
而不是
section
，并相应地调整标题级别）
我在考虑定义列表？每个楼层有2-6个房间，我不认为定义列表是嵌套的；语义上，它们是名称/值对的平面列表。嵌套无序列表非常适合这种情况。定义列表不应该嵌套是真的吗？我在这里发布了定义列表问题：我在考虑定义列表？每个楼层有2-6个房间。我不认为定义列表应该嵌套；语义上，它们是名称/值对的平面列表。嵌套无序列表非常适合这种情况。定义列表不应该嵌套是真的吗？我在这里发布了定义列表问题：谢谢。使用XOXO的好处是什么？wiki页面上没有明确说明。谢谢。使用XOXO的好处是什么？wiki页面上没有明确说明这一点？