语义化标签的好处

1. 代码可读性：语义化标签使HTML代码更具有结构和意义，让开发人员更容易理解和阅读代码。通过标签的名称和语义，可以直观地了解每个标签的作用和内容。
2. 可维护性：语义化标签使代码更易于维护。当其他开发人员或你自己在未来回顾代码时，能够更快速地理解网页结构和内容，从而更容易进行修改和更新。
3. 可访问性：语义化标签对于使用辅助技术的用户，如视觉障碍用户和屏幕阅读器用户，非常重要。这些标签能够传达页面结构和内容的信息，帮助他们更好地理解网页，并提供更好的用户体验。
4. SEO优化：搜索引擎喜欢使用语义化标签，因为这些标签能够提供更清晰的页面结构和内容信息。通过使用正确的语义化标签，搜索引擎能更好地理解网页内容，从而提高网站在搜索结果中的排名。

包含

用的比较多的语义标签按类型分大致为：

1. 内容分区

将文档内容从逻辑上进行组织划分，为页面内容创建明确的大纲，以便区分各个章节的内容。包括header、article、main、aside、footer、h1、nav等

2. 文本内容

这些元素能标识内容的宗旨或结构，而这对于无障碍和搜索引擎优化很重要。 包括：div、dl、figure、ol、li等

3. 内联文本语义

用来定义单词、内容、或任意文字的语义、结构或样式。 例如：a、b、br、em、code等

4. 图片和多媒体

img、audio、video等

5. 表单、表格

案例分析

以新闻网站为例。

代码可读性

网站标题使用h1

使用header和footer

使用了main作为网站主体部分，使用section放feature部分内容，侧边栏用aside。文章标题使用h2

每篇文章+配图使用article，内部文章标题使用h3标签，配图使用figure标签

网页的可访问性优化

"sr-only" 表示 "screen reader only"，意思是仅对屏幕阅读器（Screen Reader）可见，对普通用户（视觉用户）则是隐藏的。