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