房源核心信息必须置于<main>内，含标题、价格、户型图（用<figure><figcaption>）、描述及联系入口；按决策路径分<section>并配<h2>；物理地址用<address>，中介信息归<aside>。
用 <main> 包住房源核心信息，别塞进 <div> 里凑数
用户点进详情页，真正要读的是标题、价格、户型图、描述、联系入口——这些必须落在 <main> 内。搜索引擎和读屏工具靠这个识别“这是页面主内容”。常见错误是整个页面用一堆 <div class="container"> 套娃，<main> 要么没写，要么只包了 banner 或面包屑。
实操建议：
-
<main>应直接子元素包含<h1>（房源标题）、<section>（如“基础信息”“周边配套”）等语义块 - 避免在
<main>里放侧边栏、底部推荐、广告位——它们属于<aside>或独立<section> - 如果用了前端框架（如 React/Vue），确保 SSR 或 hydration 后 DOM 中仍保留
<main>结构，别被 JS 动态删掉
<section> 按用户决策路径分块，不是按 UI 样式切栏
房产详情页的阅读动线很明确：先看值不值（价格+面积）、再看住不住得下（户型+楼层）、然后信不信得过（产权+中介信息）、最后要不要行动（电话+预约看房）。每个环节对应一个 <section>，且必须带 <h2> 作为该区块标题。
常见问题：
立即学习“前端免费学习笔记（深入）”；
- 把“小区实景图轮播”和“VR 看房按钮”硬塞进同一个
<section>，但它们服务不同目标（展示 vs 交互），应拆开 - 用
<section>替代<div>只为“看起来更语义化”，却没配<h2>—— 这会让辅助技术丢失上下文 - “交通配套”和“学区信息”混在一个
<section>里，其实用户查地铁和查学校是两个独立动作，应分设
<figure> + <figcaption> 处理户型图与实拍图，别只用 <img>
户型图不是装饰图，它承载关键结构信息（几室几厅、朝向、尺寸标注）；实拍图也需说明拍摄位置（如“主卧朝南窗景”）。裸 <img> 缺少上下文，对 SEO 和无障碍都不友好。
正确写法示例：
<figure> <img src="floorplan.png" alt="三室两厅一卫户型图，主卧朝南，次卧朝北，客厅带阳台"> <figcaption>标准层户型图（建筑面积 98.5㎡）</figcaption> </figure>
注意点：
-
alt属性必须描述图中可识别的关键信息，不能写“户型图”这种泛称 - 如果同一套房源有多张户型图（如原始结构 vs 改造后），每个
<figure>独立，不要合并到一个<figure>里 - VR 看房链接不属于
<figure>，应放在相邻<section>的操作区，用<button>或带role="link"的元素
<address> 只用于房源物理地址，中介公司信息用 <aside>
<address> 在 HTML5 中有明确定义：表示“作者/拥有者”的联系信息，且**仅限当前页面内容的所属实体**。对房源页来说，就是这套房子的实际地理位置，不是中介门店地址，也不是客服电话。
错误用法：
- 把“链家北京朝阳大悦城店：010-8888XXXX”放进
<address>—— 这是服务提供方，不是房源本身属性 - 用
<address>包含经纬度坐标或地图嵌入代码 —— 它只接受文本联系信息 - 在房源列表页的每条卡片里都加
<address>—— 列表页没有单个房源的“主内容上下文”，<address>语义失效
正确做法：房源详情页的物理地址用 <address>，中介公司介绍、经纪人信息、资质证书等统一归入 <aside>，并用 <h2> 标明“本房源由 XX 提供服务”。
复杂点在于多房源聚合页（比如“同小区在售房源”Tab），那里没有单一 <main>，也就没有合法的 <address> 使用场景——此时老实用 <div class="address"> 更稳妥。
