html文档结构不规范直接导致seo差、屏幕阅读器失效、维护成本飙升：doctype必须首行全小写且无空格，lang须为bcp 47合规值如zh-cn，charset和viewport需在head内前置，main标签仅能出现一次且为body直接子元素，aside须与邻近内容有逻辑关联，flex布局应避免固定宽度以保障响应式与语义完整性。
HTML文档结构不规范，直接导致SEO效果差、屏幕阅读器无法识别、后期维护成本飙升——这不是风格问题，而是基础错误。
DOCTYPE 和 lang 属性必须写对
浏览器靠 切换标准模式，漏写或写成 <code>..> 会触发怪异模式，CSS Flex 布局可能整体失效，main 标签的语义权重也会归零。
必须是文件第一行，全小写，前后无空格-
中的lang值不能省略或写成zh、cn；zh-CN才被主流搜索引擎和读屏软件正确识别 -
里至少要有<meta charset="UTF-8">和<meta name="viewport" content="width=device-width">，否则中文乱码、移动端布局错位几乎是必然
main 标签只能有一个且不能嵌套
很多人把 <main></main> 当成普通容器反复使用，比如在 <article></article> 或 <section></section> 里再套一个 <main></main> —— 这会让辅助技术认为页面有多个“主体”，直接忽略全部语义，Google 也可能降权。
- 整个页面有且仅有一个
<main></main>，它必须是的直接子元素 -
<main></main>内部可以包含多个<article></article>、<section></section>或<aside></aside>，但不能再包裹<header></header>、<footer></footer>、<nav></nav> - 如果页面是多页应用（如 SPA），路由切换时要确保每次只渲染一个
<main></main>，避免 DOM 中残留多个
aside 不是“右侧栏”的同义词
把所有右边的 <div> 都改成 <code><aside></aside> 是常见误区。<aside></aside> 表示与当前内容相关但可独立存在的旁注信息，比如某篇教程旁的“注意事项”、某篇文章旁的“作者简介”，而不是全局侧边导航或广告位。
- 网站通用的左侧导航栏应放在
<nav></nav>，底部版权栏用<footer></footer>，这两者都不该塞进<aside></aside> - 如果右侧内容随主内容变化（如“本文相关推荐”），才适合用
<aside></aside>；如果是全站固定的“热门分类”，就该放在<nav></nav>或独立<section></section> -
<aside></aside>必须与邻近的<article></article>或<section></section>有明确逻辑关联，否则语义断裂，反而比用<div> 更糟 <h3>Flex 布局中 <code>main区域的宽度控制陷阱用 Flex 实现左右分栏时，常有人给
<main class="container"></main>直接设width: 1200px，结果在小屏上内容溢出、滚动条出现——这违背了响应式初衷，也削弱了<main></main>的语义包容性。- 推荐用
max-width: 1200px+margin: 0 auto替代固定宽度，让内容在小屏自动收缩 -
<main></main>内部的左右分栏（如<div class="main-content"> 和 <code><aside></aside>）应通过flex: 1和flex: 0 0 300px控制比例，而非写死像素值 - 若需兼容 IE11，
display: flex必须加-ms-flexbox前缀，且flex: 1要拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0，否则右侧栏会塌缩
语义化不是加几个新标签就完事，关键在标签和内容之间的逻辑是否真实成立；一旦为“好看”而牺牲语义，后续的无障碍访问、SEO 优化、甚至 JS 选择器维护都会变成硬伤。
- 推荐用
