HTML文档结构中的语义化地标角色由原生标签隐式提供，而非role属性定义；<header>→banner（仅当为<body>直接子元素）、<nav>→navigation、<main>→main（全局唯一且不可嵌套）、<aside>→complementary、<footer>→contentinfo（仅当属<body>层级），显式role仅用于旧项目补救或区分同类型地标，且必须使用WAI-ARIA标准值。
直接说结论：HTML文档结构中的语义化地标角色，不是靠role属性“定义”出来的，而是由原生语义标签（如<header>、<nav>、<main>）隐式提供；显式写role仅用于补救场景，且必须严格匹配WAI-ARIA枚举值，否则无效。
哪些标签自带地标角色？
浏览器和辅助技术会自动把以下HTML5标签映射为对应地标角色，无需手动加role：
-
<header>→banner（注意：仅当作为<body>直接子元素时才被识别为页面级banner；嵌套在<article>里的<header>是局部标题，不构成地标） -
<nav>→navigation -
<main>→main（一个页面只能有一个，且不能嵌套在<article>或<section>里） -
<aside>→complementary -
<footer>→contentinfo（仅当属于<body>层级时）
常见错误：用<div class="nav">再加role="navigation"——这不如直接用<nav>简洁可靠，还多了一层出错可能。
什么时候必须显式写 role？
只有两种合理场景需要手写role：
立即学习“前端免费学习笔记（深入）”；
- 旧项目无法改结构，只能在
<div>上打补丁，比如<div role="main">（但必须确保该<div>确实是唯一主内容区） - 需要区分多个同类型地标，例如页面有顶部主导航和页脚次级导航：
<nav aria-label="主导航">和<nav aria-label="友情链接">；若用role="navigation"却没配aria-label，屏幕阅读器只会读“导航”，跳转时无法区分
硬编码非法role（如role="top-nav"）会被完全忽略——浏览器不报错，但辅助技术收不到任何信息。
main 和 article 的语义冲突怎么避？
<main>代表整个页面中对用户价值最高的那块内容，而<article>是可独立分发的自包含内容单元。两者定位不同，混用容易破坏地标逻辑：
- 不要把
<article>当<main>用：一个博客列表页，<main>应包裹整个文章列表+分页，而不是每个<article>都套一层<main> - 不要在
<main>里塞无关内容：广告、侧边推荐、版权声明都不该出现在<main>内部 -
<article>可以有自己的<header>和<footer>，但它们不生成新的地标角色，只是局部语义容器
真正容易被忽略的是：即使视觉上<main>用了position: absolute脱离文档流，也必须保证它在DOM顺序中仍处于逻辑主内容位置——否则屏幕阅读器会按源码顺序播报，而非视觉顺序。
