HTML语义化
使用HTML标签的正确语义来构建网页结构，使网页内容清晰、易于理解和维护。语义化HTML不仅有助于开发者修改维护页面，提升网页可访问性，还能提高开发效率，减少后期维护成本，同时也方便搜索引擎提取关键词、排序等，更能保障无障碍。
语义化标签
<header>、<footer>、<article>等具有特定意义的标签
非语义化标签
通常是<div>、<span>，没有任何语义的标签
语义化标签常见应用
-
<header>：定义文档的头部区域，通常包含网站Logo、导航菜单等。 -
<nav>：定义网站的导航区域。 -
<main>：定义网页的主体内容区域，通常只有一个。 -
<section>：定义文档中的区域或部分，通常包含一个主题。 -
<article>：定义独立的、完整的内容块，可以是文章、评论等。 -
<aside>：定义附加的、与主要内容相关的部分，通常用于侧边栏。 -
<footer>：定义文档的页脚区域，通常包含版权声明、联系方式等。
实际网站HTML分析
以稀土掘金网站（ juejin.cn ）为例
网站头部：包含<header>、<nav>标签
网页主体：包含<main>标签
内容区块：未使用<section>、<article>这两个常用标签，使用class定义各部分
其余元素：侧边区域使用<aside>标签
非语义化代码与语义化代码比较
非语义化标签的HTML结构
<div id="header">
<div class="main-header">
<p>Hello world.</p>
</div>
</div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
语义化标签的HTML结构
<header>
<div class="main-header">
<p>Hello world.</p>
</div>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
对比分析
非语义化标签结构中使用<div>标签，语义化标签结构中用<header><nav>标签表示，虽然两段代码运行产生的效果完全相同，但其根本上存在差异。
- 使用
<div>标签时，辅助工具无法直接理解页面的结构和内容，虽然能够读取到HTML元素，但无法识别到元素的角色或含义。<div id="header">无法向用户传达“这是页面的头部区域”这一信息<div id="nav">无法向用户传达“这是页面的导航区域”这一信息
- 使用
<header>和<nav>等标签时，辅助工具可以直接理解页面的结构，可以根据这些标签为用户提供更多有用的信息。<header>标签告诉工具这是页面的头部<nav>标签告诉工具这是页面的导航区域
对比总结
- 非语义化标签（如
<div>和<span>）是通用的、没有明确含义的标签，适用于布局结构，但对于可访问性、搜索引擎优化和代码可维护性不太友好。 - 语义化标签（如
<header>、<nav>）具有明确的含义，能够帮助搜索引擎理解页面内容，提升可访问性，并且提高代码的可读性和可维护性。
