HTML Reference 网站是如何组织和分类 HTML 元素的?
HTML Reference（htmlreference.io）把自己定位为“所有 HTML 元素和属性的免费指南”，它的内容组织方式很直接：先用“集合（Collections）”把元素按用途分组，再在每个分组内按字母顺序排列，并在每个元素旁标注若干属性标签。如果你已经知道要找哪个元素，直接按字母定位最快；如果你只记得用途（比如“表单相关”或“语义化标签”），就从集合入口进。
集合分组：按用途划分入口
网站把元素归入若干集合，页面证据中出现的集合包括：
- Base elements（基础元素）
- Forms（表单）
- Lists（列表）
- Semantic（语义）
- Tables（表格）
- experimental（实验性）
这种分法的好处是：当你不知道具体标签名、只知道“我要做一个表格结构”时，可以从 Tables 集合进入，浏览该用途下的相关元素，而不是在全部标签里逐个翻。
字母顺序：组内定位靠首字母
在每个集合内部，元素按字母顺序排列。从页面证据可以看到，元素列表从 a、abbr、address、area、article、aside、audio 一路向下排列到 b、base、bdi、bdo、blockquote、body、br、button 等。
这意味着两种查找路径都成立：
- 已知标签名：直接按首字母在列表中定位，例如找
blockquote就跳到 b 段。 - 已知用途：先选集合，再在集合内按字母找。
属性标签：每个元素旁的分类标记
每个元素旁边都带有一组标签，页面证据中反复出现的有：
| 标签 | 含义方向 |
|---|---|
| meta | 元数据相关元素 |
| self-closing | 自闭合元素 |
| inline | 行内元素 |
| block | 块级元素 |
| experimental | 实验性元素 |
这些标签的作用是让你在浏览列表时就能快速判断元素的类别，而不必逐个点进详情页。例如 br、img、input、link、meta 这类会带 self-closing 标记；div、h1–h6、header、footer 这类会带 block 标记；a、abbr、b、code、em 这类会带 inline 标记。
experimental 标签：标记实验性元素
experimental 是一个独立标签，用于标记实验性元素。在页面证据中，dialog 和 hgroup 都带有 experimental 标记。看到这个标签，就意味着该元素在标准中的稳定性或浏览器支持情况需要你额外确认，不适合不加判断地直接用于生产环境。
怎么用这套结构最快找到元素
- 知道标签名：直接按字母顺序扫列表，首字母定位。
- 知道用途：从 Base elements / Forms / Lists / Semantic / Tables 等集合入口进入。
- 想筛类别：看元素旁的 meta、self-closing、inline、block 标签。
- 想避开不稳定元素：注意 experimental 标记。
整体上，这个网站的组织逻辑是“集合定范围、字母定位置、标签定属性”，三层信息叠加在同一个列表视图里，适合快速查阅而不是系统学习。