结论：语义化标签比css更重要，main漏写/重复、nav滥用、img缺alt会严重损害seo和无障碍体验；main只能出现一次且不可嵌套，nav仅用于高频复用导航，img的alt需精准描述内容或置空。
直接说结论：用对语义化标签比堆CSS更重要，<main></main>漏写或重复、<nav></nav>套在无关链接里、<img>没alt，这三类问题会立刻拖垮SEO和屏幕阅读器体验。
为什么只能出现一次且不能嵌套
<main></main>是辅助技术（如NVDA、VoiceOver）跳转到核心内容的唯一锚点。搜索引擎也把它当作“页面主干”信号源——如果写了两个<main></main>，或把<main></main>包在<section></section>里，会导致：内容权重被稀释、AT用户无法准确定位正文、Google可能降权该页主体内容。
- 只在页面最外层包裹真正独立、不可省略的主体内容，比如文章正文、产品列表、表单主区域
- 不要在
<article></article>或<section></section>内部再套<main></main>——它们本身已是独立内容单元 - 如果页面有多个“主要内容区块”（如首页含新闻+活动+推荐），用
<section></section>分隔，统一包在单个<main></main>里
nav不是所有链接容器都该用
<nav></nav>专指全局导航链路，比如顶部主导航、侧边菜单、页脚快捷入口。把它乱用在“相关文章链接”“分页按钮”甚至“分享按钮”上，反而会让AT用户误判为“可跳过区域”，也稀释了搜索引擎对主路径的信任度。
- 仅用于用户高频、跨页面复用的导航结构；单次性操作链接（如“返回上一页”）用
<a></a>即可 - 一个页面最多3个
<nav></nav>（常见：顶部主导航、底部快捷导航、面包屑） - 如果导航是JS动态渲染的，确保初始HTML中仍存在语义化
<nav></nav>骨架，否则爬虫和AT首次加载就失效
alt属性不是“随便填点文字”
<img>的alt是视觉缺失时的唯一内容替代，也是Google图像搜索和GEO（生成式引擎优化）提取信息的关键字段。写alt="图片"或alt="banner_v2_0723.jpg"等于告诉机器“这图不重要”，直接丢弃上下文。
- 功能性图（按钮、图标）：描述动作，如
alt="删除订单"、alt="展开筛选条件" - 信息图/数据图：概括核心结论，如
alt="2025年Q3用户留存率上升12%，达84%" - 装饰性图：明确置空
alt=""，避免AT读出冗余信息 -
<picture></picture>里的每个<source></source>不用写alt，只在最终<img>上声明一次
lang和charset错位会直接让SEO失效
和<meta charset="UTF-8">必须出现在最前面。位置错乱（比如charset写在CSS后面）会导致浏览器解析乱码，而lang缺失会让Google无法判断页面目标语言，直接影响区域搜索排名和AI摘要生成。
-
lang值要精确：简体中文用zh-CN，繁体用zh-TW，别写zh或cn -
charset必须是UTF-8，且必须在<title></title>之前，否则标题可能显示为方块 - 如果页面含多语言内容（如中英双语页脚），用
hreflang而非lang属性处理
最常被忽略的其实是标题层级：h1-h6不是样式开关，而是内容逻辑树。h1漏写、h2跳到h4、用CSS把h3压成小字——这些都会让AT用户迷失，也让GEO系统无法构建准确的内容地图。结构对了，剩下的才是样式和交互的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
