需避免滥用div，依据功能选用header、nav、main、article等语义标签构建结构清晰、可复用的HTML5模板，并通过ARIA属性、变量占位与多维度验证确保可访问性与合规性。
如果您希望使用 HTML5 语义化标签构建结构清晰、可复用的页面模板，则需避免滥用 div，转而依据内容功能选择恰当的语义元素。以下是编写此类模板的具体步骤：
一、确定页面基础结构层级
HTML5 提供了 header、nav、main、article、section、aside 和 footer 等语义容器，它们共同构成逻辑明确的骨架，便于样式复用与无障碍访问。
1、以 <!DOCTYPE html> 开头声明文档类型。
2、在 <html> 标签下嵌套 <head> 与 <body> 元素。
立即学习“前端免费学习笔记（深入）”；
3、将全局头部区域包裹于 <header> 标签内，包含站点标识与主导航入口。
4、主导航菜单使用 <nav> 包裹无序列表 <ul>，每个导航项为 <li> 下的 <a>。
5、主内容区统一置于 <main> 中，并根据内容类型决定是否嵌套 <article> 或 <section>。
二、定义可复用的内容区块模板
通过组合 <section> 与 <article> 可形成模块化结构，每个区块具备独立语义与样式作用域，支持跨页面调用。
1、为轮播图区域创建 <section class="hero">，内部包含 <picture> 与 <h1>。
2、为资讯列表定义 <section class="news-list">，其子元素为多个 <article class="news-item">。
3、每个 <article> 内部必须包含至少一个 <header>（含标题与元信息）和一个 <div class="content"> 作为正文承载区。
4、侧边栏内容统一放入 <aside>，并添加 aria-label="related content" 提升可访问性。
5、页脚区域使用 <footer>，内部按功能划分为 <section>，如版权信息、联系方式、友情链接等。
三、引入角色属性增强语义表达
仅靠标签名不足以完整传达组件用途，需配合 ARIA 属性明确交互意图与结构关系，确保模板在屏幕阅读器中正确解析。
1、在 <nav> 上添加 aria-label="primary navigation"。
2、为 <main> 添加 role="main"（HTML5 中可省略，但保留可提升兼容性）。
3、在 <section class="search-form"> 上设置 role="search"。
4、所有自定义折叠面板需标注 role="region" 并配以 aria-labelledby 指向控制按钮。
5、表单容器使用 <form> 标签并设置 aria-labelledby 关联标题，禁用纯 div 模拟表单结构。
四、标准化模板变量占位方式
为实现跨项目复用，需约定内容替换机制，避免硬编码文本或路径，使模板具备参数注入能力。
1、使用双大括号语法标记可替换字段，例如 {{ site_title }} 表示页面标题占位符。
2、导航项列表以 {{ nav_items }} 为数组型占位符，渲染时展开为 <li><a href="{{ url }}">{{ label }}</a></li>。
3、文章摘要区块采用 {{ article_snippet }} 占位，支持 HTML 片段传入。
4、图片资源路径统一用 {{ image_src }}，并附加 alt="{{ image_alt }}" 属性。
5、页脚备案号区域设为 {{ icp_number }}，确保合规信息可配置化更新。
五、验证语义结构有效性
模板完成前必须通过机器可读性校验，确认标签嵌套合法、角色属性准确、无冗余 div，保障复用后的页面仍符合 WCAG 2.1 AA 标准。
1、使用 W3C Markup Validation Service 提交 HTML 片段，检查是否存在 obsolete element 或 missing required attribute 错误。
2、运行 axe DevTools 浏览器插件扫描，重点验证 landmark-roles 是否完整覆盖页面主要区域。
3、手动关闭 CSS 查看原始结构，确认内容顺序符合逻辑流，无因浮动或绝对定位导致语义断裂。
4、使用 NVDA 或 VoiceOver 朗读整页，核实 <header>、<nav>、<main>、<footer> 能被准确识别为独立地标区域。
5、检查所有 <a> 与 <button> 是否具备可访问名称，禁止出现仅含图标无文字说明的控件。
