应使用<header>标签标识页面顶部区域，内含<h1>网站标题和嵌套<nav>主导航，并辅以aria-label提升可访问性，避免用div或section替代。
如果您在编写HTML5页面时需要标识页面的顶部区域，例如网站标题、Logo或主导航栏，则应使用语义化标签来明确该区域的功能。以下是实现此目的的具体方法：
一、使用 <header> 标签定义页面顶部区域
<header> 是HTML5引入的语义化元素，专用于包裹页面或章节的头部内容，如标题、标志、导航链接等。它不具有默认样式，但能提升文档结构清晰度与可访问性。
1、在HTML文档的主体部分（<body>内）插入 <header> 开始标签。
2、在 <header> 内部添加页面标题，例如使用 <h1> 标签书写网站名称。
立即学习“前端免费学习笔记（深入）”；
3、在 <header> 内添加导航菜单，可嵌套 <nav> 元素并配合无序列表 <ul> 和链接 <a> 实现。
4、关闭 <header> 标签，确保所有内容均位于其起始与结束标签之间。
二、嵌套 <nav> 标签强化导航语义
当顶部区域包含主要导航功能时，将导航结构置于 <header> 内的 <nav> 标签中，可进一步明确其用途，有助于屏幕阅读器识别和SEO优化。
1、在 <header> 标签内部，插入 <nav> 开始标签。
2、在 <nav> 中使用 <ul> 列表结构组织导航项。
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
3、每个导航链接用 <li> 包裹 <a>，并设置 href 属性指向对应页面路径。
4、确保 </nav> 标签正确闭合，且不超出 <header> 范围。
三、结合 <h1> 与 aria-label 提升可访问性
页面顶部通常承载主标题信息，使用 <h1> 可确立内容层级；添加 aria-label 属性则能为辅助技术提供额外说明，避免歧义。
1、在 <header> 内第一位置放置 <h1> 标签，并写入网站唯一主标题（不可重复使用多个 <h1>）。
2、若 <header> 包含复杂结构（如多行文字或图标），为其添加 aria-label 属性，值为简洁描述性文本。
3、确保 aria-label 的内容不与可见文本完全重复，而是补充上下文，例如“首页导航区”。
四、避免常见误用方式
某些开发者会误用 <div id="header"> 或 <section> 替代 <header>，这将削弱语义表达力，并可能影响搜索引擎解析和无障碍支持。
1、禁止使用纯CSS类名（如 class="top-bar"）替代 <header> 标签。
2、禁止将 <header> 用于页面中非顶部的内容区块，例如文章内部副标题区应使用 <h2>–<h6> 或 <header> 仅限章节级头部。
3、禁止在 <header> 内放置与顶部功能无关的内容，例如正文段落或侧边广告模块。
