在学习HTML阶段的最后，我们会涉及到学习语义化标签，明明用div等标签就可以构成页面，那么为什么还会有语义化标签的存在？语义化标签到底是什么？接下来会从上面几个方面说一下我的理解。
一、语义化标签是什么
HTML语义化是指在编写网页时使用合适的HTML标签，以增强文档结构、内容和表现的针对性和可维护性。通过正确使用语义化标签，可以帮助浏览器、搜索引擎和开发者更多很好地理解页面的内容和结构，从而提升用户体验、搜索引擎优化和代码可维护性。
常见的语义化标签及其用途：
<header>：表示页面的头部，通常包含网站的标题、标志、导航等内容。<nav>：用于定义导航部分，包含页面的主要导航链接。<main>：表示页面的内容主要区域，每个页面应该只有一个<main>标签。<article>：表示独立的内容单元，如新闻文章、博客帖子等。<section>：表示页面中的一个独立区块，具有相关的内容主题。可以用于组织页面的章节。<aside>：表示页面的附加内容，通常在主内容旁边显示，如侧边栏或广告。<footer>：表示页面的底部，包含版权信息、联系方式等内容。<figure>：用于全球媒体内容（如图片、视频），通常包含一个可选的<figcaption>元素，用于描述媒体内容。<figcaption>：用于为<figure>元素提供标题或描述。<time>：用于表示日期和时间，有助于机器和搜索引擎更好地理解日期信息。<mark>：用于标记需要突出显示的文本，类似于荧光笔效果。<strong>：表示强调显示的文本，通常以粗体。<em>：表示强调显示的文本，通常以斜体。<abbr>：用于表示缩写或首字母缩写，并提供全称的解释。<blockquote>：用于表示长引用块，通常具有缩进样式。<cite>：用于表示引用的来源，通常用斜体或其他样式分隔。<q>：用于表示短引用，通常以双引号包围。<address>：用于表示联系信息，如邮件地址、电话号码等。<pre>：用于显示预格式化的文本，保留空格和换行。<code>：用于表示计算机代码，通常以等宽字体显示。
二、为什么会用语义化标签
平时，我们都会采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于浏览器对页面的读取。所以HTML5新增了很多新的语义化标签。并且，在我们未给页面添加css样式时，用户体验并不好。语义化标签也能让浏览器更好的读取页面结构。再就是便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
三、语义化标签案例分析
以前制作网页布局，我们基本用div来做。div就是一个普通的块级标签，对于搜索引擎来说，是没有语义的。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<!-- 头部部分 -->
<div class="header"></div>
<!-- 导航部分 -->
<div class="nav"></div>
<!-- 内容部分 -->
<div class="content"></div>
<!-- 底部部分 -->
<div class="footer"></div>
</body>
</html>
我们使用H5新增的语义化标签更能利于SEO优化，提高我们的搜索排名靠前的优势。
如下案例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
/*这样书写的目的是为了节省性能，性能优化，比使用*号性能更加好*/
body,header,nav,main,article,aside,footer{
margin: 0;
padding: 0;
}
/*将H5标签转换成块级元素，作用是兼容IE9+浏览器*/
header,nav,main,article,aside,footer{
display: block;
}
header{
width: 1000px;
height: 100px;
margin: 10px auto;
background-color: #ff0000;
}
nav{
width: 1000px;
height: 60px;
margin: 10px auto;
background-color: #00ff00;
}
main{
width: 1000px;
height: 400px;
margin: 10px auto;
background-color: #0000ff;
overflow: hidden;
}
main aside:first-child{
float: left;
width: 200px;
height: 300px;
margin-right: 10px;
background-color: pink;
}
main article{
float: left;
width: 580px;
height: 400px;
margin-right: 10px;
background-color: brown;
}
main aside:last-child{
float: left;
width: 200px;
height: 300px;
background-color: goldenrod;
}
</style>
</head>
<body>
<header>头部部分</header>
<nav>导航栏</nav>
<main>
<aside>左侧边栏</aside>
<article>中间主体部分</article>
<aside>右侧边栏</aside>
</main>
</body>
</html>
案例运行结果
四、语义化标签的作用
- 更好的吸引力和可维护性：使用语义化标签可以使你的代码更具有结构和逻辑性，结果更容易理解和维护。开发者可以更快速地理解页面的结构，从而更容易进行修改、扩展和维护。
- 提升搜索引擎优化（SEO） ：搜索引擎更容易理解语义化标签，从而更好地索引和分析页面内容。适当使用标题、段落、列表等语义化标签可以为页面的SEO效果带来积极影响。
- 增强无障碍性（Accessibility） ：语义化标签可以帮助屏幕阅读器等辅助技术更好地解释页面内容，使网站对于视觉障碍用户更加友好。例如，使用语义化的可以使屏幕阅读器能够正确标题书写页面结构。
- 跨平台和跨设备的一致性：不同的设备和平台（如移动设备、桌面浏览器等）可以更好地理解和解释语义化标签，从而在不同的环境下呈现一致的体验。
- 代码维护性：语义化标签有助于将内容和样式分离，使CSS和JavaScript的开发更加灵活。这样，你就可以更容易地更新样式或逻辑，而无需修改HTML标签结构。
- 文档结构清晰：使用语义化标签能够清晰地表达页面结构。比如，使用
<nav>标签来定义导航菜单，使用<header>标签来表示页面顶部，使用<footer>标签来表示页面底部等。 - 未来兼容：随着技术的不断发展，浏览器会不断支持新的HTML标签。使用语义化标签可以更好地适应未来的Web标准，减少后续升级的工作量。
五、注意事项
- 这种语义化标准主要针对搜索引擎的
- 这些新标签页面中可以使用多次的
- 在IE9中，需要把这些元素转换为块级元素
- 其实，我们移动端更喜欢使用这些标签
六、学习心得
语义化标签的学习让我明白了它对数据和信息进行处理，使得机器可以理解。语义化的HTML文档有助于提升网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。语义化标签的关注有助于可访问性、可检索性、国际化和互用性。常用的语义化标签包括h1~h6、i、b、strong等。而在HTML5中，也引入了更多的语义化标签。
综上所述，HTML语义化标签对于开发具有可执行性、可维护性、搜索引擎优化、无障碍性等方面都有积极的影响。在编写网页时，首先考虑如何选择合适的标签来表达内容的结构和意义，这将有助于提升网站的质量和用户体验。
