HTML 语义化

理解：

用正确的标签做正确的事情

优点：

1. 提升可读性，代码结构更清晰
2. 有助于 SEO，搜索引擎更好地理解网页内容，提升页面排名和可见性
3. 增强可访问性，辅助技术（如屏幕阅读器）可以更准确地解读网页内容，提升用户体验，特别是对有特殊需求的用户
4. 提升无样式时的表现力，在样式丢失的情况下，语义化标签可以保持页面内容的逻辑结构，使信息依然清晰可读
5. 促进标准化，使用语义化标签符合Web标准，保证页面在不同浏览器和设备上的一致性表现

语义化标签

<header>

• 语义：定义页面或部分内容的头部，通常包含导航、标题、标志等内容。
• 用途：用于表示网页或文章的头部信息。

<nav>

• 语义：定义导航链接的部分。
• 用途：用于包含主要导航链接，如菜单、目录等。

<aside>

• 语义：表示与页面主要内容相关的附加信息，通常是侧边栏内容。
• 用途：用于展示广告、作者简介、相关文章等次要内容。

<main>

• 语义：表示页面中主要内容的部分，内容应与页面的核心主题直接相关。
• 用途：用于包裹网页的主内容，确保搜索引擎和屏幕阅读器能优先处理。

<footer>

• 语义：定义页面或部分内容的底部，通常包含版权信息、社交链接等。
• 用途：用于标识页面、章节的结束部分。

<article>

• 语义：表示一篇独立的内容，通常包含标题、文章内容等，适用于博客文章、新闻报道等。
• 用途：标识可独立分发或引用的内容块。

<section>

• 语义：定义文档中的章节或内容部分，通常包含标题。
• 用途：用于分隔网页的逻辑部分，通常按主题或内容分类。