使用 HTML5 语义化标签编写高质量的可访问页面-H5教程-PHP中文网

html5语义化标签是可访问性、seo和维护性的基础，需用等标签准确表达内容结构与关系，并配合标题层级、表单标签、aria属性及工具验证确保实效。

使用 html5 语义化标签编写高质量的可访问页面

用 HTML5 语义化标签构建页面，不只是让代码更“好看”，更是为屏幕阅读器、搜索引擎和开发者提供清晰的结构线索。可访问性（a11y）不是附加功能，而是基础要求——语义化是它的第一道门槛。

用对核心语义标签，替代 div 堆砌

避免通篇 <div> 和 <code><span></span>，优先选用有明确含义的元素：

<header></header> 表示页眉区域（含 logo、主导航等），一个页面可有多个，但主标题区建议只用一次
<nav></nav> 专用于导航链接集合，屏幕阅读器会将其识别为“导航栏”，方便用户快速跳转
<main></main> 标识页面主体内容，必须唯一，且不应嵌套在 <article></article> 或 <aside></aside> 内
<article></article> 用于独立、可分发的内容单元（如博客文章、新闻条目），支持嵌套（如评论）
<section></section> 表示主题相关的分组，需有标题（<h2>–<h6></h6> </h2>），不能仅靠视觉样式区分
<aside></aside> 包含与主内容相关但可独立存在的内容（如侧边栏推荐、术语注释）
<footer></footer> 表示页脚，可出现在或 <article></article> 等内部，不强制放在最底部

标题层级必须真实反映内容逻辑

仅靠 CSS 改变字号不算语义化标题。使用 <h1></h1> 到 <h6></h6> 时要遵循嵌套逻辑：

每个页面有且仅有一个 <h1></h1>（通常是主标题或站点名）
<h2></h2> 是一级子主题，<h3></h3> 是其下级，依此类推；不可跳跃（如 <h2></h2> 后直接 <h4></h4>）
在 <article></article> 或 <section></section> 内部，可重新开始层级（例如用 <h2></h2> 作为该区块标题），但整体仍需连贯
避免用标题标签仅做样式控制；需要强调文字但无层级意义时，用 <strong></strong> 或 CSS

为交互元素补全可访问性基础

语义标签只是起点，还需配合必要属性确保行为可感知：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

所有 <button></button> 必须有可见文本或 aria-label，禁用空按钮（<button></button>）
表单控件必须关联 <label></label>（显式用 for/id，或隐式包裹）；占位符（placeholder）不能替代标签
图标按钮（如放大镜、菜单）需添加 aria-label 或隐藏文本（<span class="visually-hidden">搜索</span>）
自定义组件（如手写的下拉菜单、选项卡）必须用 ARIA 属性标明角色（role）、状态（aria-expanded）和关系（aria-controls）