HTML语义化（Semantic HTML）是指在编写HTML代码时，不仅仅使用<div> <span>这类通用标签，而是通过<header> <footer> <main> <h1> <h2>等等有明确含义的标签来描述网页内容。
这样做的好处包括：
- 易于组织网页设计思路（一级二级三级标题让网页层次鲜明；header、footer、main让网页结构科学）
- 满足无障碍需求（footer、main、header可以帮助屏幕阅读器用户更好地导航页面）
本次让我们来分析aliexpress首页，之所以分析它，因为这是ali旗下的跨境电商网站，相比于国内站，他在无障碍需求上做得会更好，相信他在HTML语义化上也会更好
一进入首页，打开F12看HTML代码
比较尴尬的是，映入眼帘的首先是一排<div>标签，尽管他们的id或者class是语义化的，但其标签本身并不是
我们进一步往下翻
打开id为header的元素，结果其中装载的也都是div
我怀疑是不是工程师在写代码时，原本是带语义的，但是编译后语义标签消失，或者是打包工具让语义消失
在此我们询问豆包
豆包认为编译或者打包工具通常并不会导致语义化消失，让我们检查一下aliexpress首页前端使用的是什么技术栈，通过wappalyzer看到它使用的应该是React库
除此之外，并没有看到它使用的UI库，再次询问豆包
豆包暗示它可能是过度使用了<div>
既然如此，让我们来尝试使用屏幕阅读器，看缺失语义标签的情况下使用aliexpress是怎样的体验
首先，Reading Mode阅读模式不适用于该网页，那我们直接用Axe来测试一下该网页的accessibility
结果显示有210处地方"not contained by landmarks"
结果表明，aliexpress的语义化做的还并不到位
原因分析：
- 有可能是工程师规范，让组件库每个组件都以
<div>为基础，并不使用其他语义标签 - 有可能是为了反爬，使用语义标签或许会减少爬虫难度，毕竟aliexpress作为一个电商网站，时时刻刻都有几千万只爬虫虎视眈眈
但不管如何，aliexpress的语义化做的就是不够到位，一眼放去皆是<div>
本以为作为国际站会更加迎合无障碍标准，但实际上或许是因为语义化在无障碍中属于是moderate的问题，导致网站并不重视
接下来我们将分析一些其他大厂的网站，看看他们的HTML语义化做的如何。
