10、深入理解语义化 HTML 与网页可访问性

深入理解语义化 HTML 与网页可访问性

1. 语义化 HTML 标签

在构建网页时，合理使用语义化 HTML 标签至关重要，它不仅能让代码更具可读性和可维护性，还对网页的可访问性起着关键作用。

1.1 根布局

根布局主要由以下几个部分组成：
- header ：用于包含页面或章节的标题，也可包含补充信息，如徽标和导航辅助工具。
- footer ：包含页面或章节的相关信息，如作者、相关信息链接和版权声明。
- nav ：通常包含在 header 中，用于放置页面的主要导航链接。
- main ：标识文档的主要内容，每个页面只能有一个 main 元素。
- aside ：包含与周围内容相关但又能独立存在的信息，如侧边栏或引用语。

1.2 section 与 article 的区别

• section ：用于将主题相关的内容分组，其内容组合在一起具有明确的主题，且必须包含一个标题元素，通常紧跟在 section 标签的开始标签之后。
• article ：用于独立的内容，它比 section 更具体，内容应具有语义相关性，有自己的标题，并且能够从页面的其他部分分离出来仍具有意义。

以下是一个示例代码：