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

Question

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

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

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

Answer 1

对我来说，这就像一个嵌套的、无序列表。

Answer 2

听起来像是 SVG 的工作？ （圣何塞的 Adob​​e 建筑示例）

我意识到这确实使用 JavaScript，但是如果你有 7 层 * 10+ 房间呢？ 如果使用纯 CSS，这会变得相当麻烦。 您可以使用一些

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

Answer 3

查看微格式，特别是XOXO 微格式。

Answer 4

使用 HTML5（但如果您想使用 HTML 4.01，应该不会有太大区别）：

如果您想用图像表示建筑物，您可以使用 图像地图，由 map 和 区域。 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 并相应地调整标题级别）