6、响应式网页设计：HTML5 标记与设计方法解析

响应式网页设计：HTML5 标记与设计方法解析

1. HTML5 内容标记与 ARIA 角色

在 HTML5 中，为内容添加合适的标记和角色对于提升网站的可访问性和兼容性至关重要。

1.1 互补角色（Complementary Role）

互补角色通常应用于 <aside> 元素，用于包含支持性内容。即使与主要内容分离，这些支持性内容自身仍具有意义，这也正是 <aside> 元素的特点。一个页面中可以有多个 role="complementary" 。示例如下：

<aside class="side-content" role="complementary">
    <h2>What Does "Semantic HTML" Mean?</h2>
    <p>Semantic markup basically means that we use HTML tags to describe what a specific piece of content is.</p>
</aside>

若想了解更多 ARIA 角色列表，可访问 Web Platform 网站 。