HTML语义化 ｜ 青训营

1. HTML的语义化是什么

• HTML语义化是指在编写HTML代码时，见名知意的标签元素。
• 合理使用标签和属性，可以使得网页的结构和内容具有清晰的含义和层次关系。
• 语义化强调使用具有语义的标签来描述页面的结构和内容，而不仅仅是通过样式来实现视觉效果。

2. 用语义化标签有什么好处

• 提⾼代码的阅读性和可维护性。
• 方便工作的交接，减少沟通成本。
• 能让语⾳合成⼯具(无障碍)正确识别⽹⻚元素的⽤途。
• 有利于SEO。

3. 常用语义化标签

1. <header>：定义文档或区块的头部，通常包含标题、导航等内容。
2. <nav>：定义导航链接的容器，用于包裹网站的主要导航菜单。
3. <main>：定义文档的主要内容，每个页面应该只有一个<main>元素。
4. <article>：定义独立的、完整的文章或内容块，如博客文章、新闻报道等。
5. <section>：定义文档中的一个区块或章节，表示一组相关的内容。
6. <aside>：定义页面的侧边栏或附属信息，通常显示在主要内容旁边。
7. <footer>：定义文档或区块的底部，通常包含版权信息、联系方式等内容。
8. <figure>：定义独立的媒体内容，如图片、图表、音频或视频等，并可使用<figcaption>为其添加标题或说明。
9. <time>：定义日期或时间，可以用于标记发布时间、活动时间等。
10. <cite>：定义引用的标题或作品名称，如书籍、文章、片段等。
11. <mark>：用于标记文本中的高亮或重点内容。

4. 开发中如何选择

• 在选择正确的语义化标签时，可以考虑以下几个方面：

1. 标签的含义：了解每个标签的含义和用途，选择能够准确描述内容的标签。例如，使用<header>标签来定义网页的头部信息，而不是简单地使用<div>。
2. 内容的结构：根据内容的层次关系和结构，选择合适的语义化标签。例如，使用<article>来包裹独立的文章块，使用<nav>来定义导航菜单等。
3. 在body区域做SEO优化时标签是否有益。

• 需要注意的是，并不是所有的代码都必须使用语义化标签。有些情况下，如果没有特定的语义需求，可以根据实际情况选择更简洁、更灵活的标签。例如，对于一些纯样式的区块，可以使用<div>或<span>等通用的容器标签。