HTML语义化是用原生标签准确表达内容角色与层级关系；<div>无语义，而<nav><main>等提供结构信息、辅助技术支持及SEO优势，标题层级须逻辑完整，语义标签需配合合理结构才能生效。
HTML语义化不是“给标签加个名字”，而是用浏览器和机器都能识别的原生标签，准确表达内容在网页中的角色和层级关系。
为什么 <div> 不能代替 <nav> 和 <main>
因为 <div> 没有内置语义，对屏幕阅读器、搜索引擎、甚至你自己半年后回看代码，都等于没说任何结构信息。而 <nav> 明确告诉辅助技术“这是导航区”，<main> 告诉爬虫“这是页面唯一主体内容”。浏览器还可能为 <main> 自动添加 ARIA role="main"，但绝不会给 <div id="main"> 加。
- 一个页面只能有一个
<main>，且不能嵌套在<article>、<aside>、<footer>等内 -
<nav>不一定非得是顶部横条——侧边栏菜单、页脚链接组、文章内“上一篇/下一篇”也算导航，可用多个<nav> -
<header>和<footer>可以出现在<article>或<section>内部，不只属于整页
<section>、<article>、<aside> 的边界在哪
关键看内容是否能独立存在、是否具备完整主题。不是“看起来像一块区域”就用 <section>，也不是“带点样式”就硬套 <article>。
-
<article>：可被单独分发、复用的内容，比如博客正文、新闻稿、用户评论（含作者、时间、正文） -
<section>：有明确主题的一组内容，通常带标题（<h2>–<h6>），比如“产品特性”“客户评价”“技术参数” -
<aside>：与当前内容相关但非核心的信息，比如侧边栏广告、术语解释框、作者简介（放在文章末尾时） - 没有语义需求的容器，比如纯为 CSS 布局或 JS 操作加的包裹层，仍该用
<div>
标题层级（<h1>–<h6>）不是样式开关，是结构锚点
搜索引擎和屏幕阅读器靠它构建内容大纲。跳过层级（如 <h1> 后直接 <h3>）会破坏逻辑树，导致“无法展开子项”或“索引权重错位”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 每个
<article>或<section>应有自己的标题，且建议从<h2>开始（整页<h1>仅一个） - 不要用
<h2>仅为了变大加粗——那是 CSS 的事；也不要为“视觉上小一点”就降级用<h4> - 用
<hgroup>（已废弃）或 CSS 隐藏副标题，别用<h2>+<h3>模拟主副标题
语义化不是“必须用新标签”，而是“不用就吃亏”
老项目改不动？至少保证 <h1>–<h6> 层级正确、<img> 带 alt、表单控件有 <label> 关联、链接文字有意义（别写“点击这里”）。这些比强行塞 <section> 更影响实际体验和 SEO。
最容易被忽略的是：语义化效果依赖浏览器解析+辅助工具支持，不是写了标签就自动生效。比如 <nav> 要配合理内部结构（如 <ul><li><a>），否则屏幕阅读器仍可能读作“一组文字”。
