HTML 语义化与 SEO
语义化指用合适的标签表达内容的含义：标题用 h1~h6、导航用 nav、文章用 article、侧边栏用 aside、页脚用 footer，而不是清一色的 div。它的受益者有三：开发者（结构即注释，可读性好）、搜索引擎（爬虫靠标签理解内容权重）、辅助设备（屏幕阅读器靠 landmark 区域给视障用户导航）。
SEO 与语义化是因果关系：搜索引擎爬虫读不到 CSS 渲染后的视觉效果，只能读 HTML。h1 一个页面只用一次、img 必须有 alt、a 要有可读文字、结构上“重要内容靠前写”，这些都是语义化落地到 SEO 的具体动作。
- 语义化 = 用对的标签而不是万能 div，同时利于 SEO 与无障碍
- h1 全页唯一、img 必写 alt、重要内容在 DOM 中靠前
- meta description 与 title 是搜索结果里直接展示的门面
HTML
<!-- 语义化骨架：每个标签都有“角色” --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>前端面试题库 - 语义化示例</title> <meta name="description" content="用语义化标签搭建的页面骨架"> </head> <body> <header> <nav><a href="/">首页</a><a href="/course">教程</a></nav> </header> <main> <article> <h1>文章主标题（全页唯一）</h1> <p>正文段落，内容靠前写，爬虫与用户都先看到重点。</p> <section> <h2>小节标题</h2> <img src="cover.jpg" alt="必须写：描述图片内容"> </section> </article> <aside>相关推荐 / 侧边栏</aside> </main> <footer>版权信息</footer> </body> </html>
本节要点语义化让结构本身会说话：开发者读得懂、爬虫抓得准、屏幕阅读器能导航；h1 唯一、alt 必写、重要内容前置。
