您将如何使用语义 HTML 标记建筑计划/地图？答案

【问题标题】：How would you markup a building plan/map using semantic HTML?您将如何使用语义 HTML 标记建筑计划/地图？
【发布时间】：2010-09-28 04:18:27
【问题描述】：

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

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

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

【问题讨论】：

标签： html markup semantics

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

看看microformats，特别是XOXO Microformat。

【讨论】：

谢谢。使用 XOXO 有什么好处，wiki 页面上没有说明？

【解决方案3】：

我闻起来像一个嵌套的无序列表。

【讨论】：

我在考虑定义列表？
每层有 2-6 个房间
我不认为定义列表是嵌套的；从语义上讲，它们是名称/值对的平面列表。嵌套的无序列表非常适合。
定义列表不应该嵌套是真的吗？
我在这里发布了定义列表问题：stackoverflow.com/questions/389086

【解决方案4】：

听起来像是 SVG 的工作？ (Sample Adobe Building in San Jose)

我知道这确实使用了 JavaScript，但是如果您有 7 层楼 * 10 多个房间？使用纯 CSS 会变得相当麻烦。您可以使用一些<ul> 元素来制作嵌套级别的房间，但如果建筑物这么大，我认为列表（即使呈现为块）对查看没有意义。

【讨论】：