应使用<header>标签定义页面顶部导航标题区，内部嵌套<h1>主标题和<nav>导航菜单，并添加role="banner"增强可访问性。
如果您希望在HTML5中为页面顶部区域定义导航标题区，则需要使用语义化标签来明确标识该区域的功能和结构。以下是实现此目标的具体方法：
一、使用<header>标签定义页面顶部导航标题区
<header>是HTML5引入的语义化元素，专用于表示页面或章节的页眉部分，通常包含网站标志、主导航链接、搜索框及主标题等内容。它能清晰传达该区域在文档结构中的作用，并提升可访问性与SEO效果。
1、在HTML文档的主体内容开始处插入<header>标签对，即<header></header>。
2、在<header>内部添加<h1>标签用于放置页面主标题，例如<h1>我的网站</h1>。
立即学习“前端免费学习笔记（深入）”；
3、在<header>内嵌入<nav>标签以包裹主导航菜单，例如<nav><ul><li><a href="#">首页</a></li></ul></nav>。
4、可选：在<header>中加入<img>标签显示网站Logo，或<form>标签添加搜索功能模块。
二、结合<nav>与<h1>嵌套于<header>中强化语义结构
单独使用<header>可能不足以表达“导航+标题”的复合意图，因此推荐将<nav>与标题级元素（如<h1>）共同置于<header>内，使结构更精确。浏览器和辅助技术能据此识别出该区域同时承担导航与标识页面主题的双重职责。
1、编写<header>标签作为最外层容器。
2、在<header>首行放入<h1>标签并写入页面核心标题文本。
3、紧随<h1>之后插入<nav>标签，并在其内部构建无序列表<ul>及列表项<li>组成的导航链接。
4、确保每个<a>链接的href属性指向有效URL或页面锚点，避免空值或"javascript:void(0)"等非语义化写法。
三、使用ARIA属性增强<header>的可访问性标识
尽管<header>本身具备语义，但在某些旧版辅助技术中识别度有限。通过添加role="banner"属性，可进一步明确该区域为页面横幅式头部，符合WAI-ARIA规范要求，提高屏幕阅读器的理解准确率。
1、在<header>起始标签中加入role="banner"属性，写作<header role="banner">。
2、确认该<header>位于<body>直接子元素层级，不被其他sectioning元素（如<article>或<aside>）包裹。
3、检查页面中仅存在一个顶级<header>使用role="banner"，避免多个banner导致语义混淆。
4、验证该<header>内至少包含一个标题元素（如<h1>至<h6>），以满足无障碍内容结构要求。
