HTML5引入了新的语义元素，旨在提高网页的结构和可读性。语义化使得网页对搜索引擎更友好，方便其他开发者阅读，增强用户体验，并有利于SEO。文章介绍了HTML5的<header>, <footer>, <section>, <article>, <aside>, <details>, <summary>, <nav>, <datalist>, <mark>等语义元素及其用途，并提供了一个综合案例。"
89209137,7282992,ResNet深度解析：全局平均池化的角色与影响,"['深度学习', '卷积神经网络', '模型正则化', '计算机视觉', '神经网络架构']
HTML5语义化，你了解多少？
一、介绍
很多时候我们写HTML，为了方便都会直接使用div和span标签，再通过class来确定具体样式。网站哪—部分为标题，哪一部分为导航，哪—部分为头部和底部，都只能通过class进行确定。
但class命名规范却又没有一套统一的标准，因此导致很多时候无法确定整体网站的结构。
因此，在HTML5出现后，添加了关于页面布局结构的新标签。而在HTML书写过程中，根据不同的内容使用合适的标签进行开发，即为语义化。
在编程中，语义指的是一段代码的含义(这个HTML的元素有什么作用，扮演了什么样的角色)。HTML语义元素清楚地向浏览器和开发者描述其意义，例如<form> 、<table> 以及<img>等。
二、优点
对搜索引擎友好，有了良好的结构和语义，网页内容自然容易被搜索引擎抓取。
三、为什么要语义化
1、其他开发者便于阅读代码，通过不同标签明白每个模块的作用何区别;
2、结构明确、语义清晰的页面能有更好的用户体验，在样式(css）没有加载前也有较为明确的结构，更如img这一类的，在图片无法加载的情况下有alt标签告知用户此处图片的具体内容;
3、利于SEO，语义化便于搜索引擎爬虫理解，和搜索引擎建立良好的沟通，能让爬虫爬去更多关键有效的信息;
4、方便其他设备阅读(如屏幕阅读器，盲人设备和移动设备等)。
四、html5新增语义元素以及使用
1、header:标签定义“网页”或“section”的页眉。通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>
</body>
</html>
2、footer标签:代表“网页”或“section”的页脚。通常含有该节的一些基本信息，如:作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。
<!DOCTYPE html>
<html>
<body>
<footer>
作者：xxx<br>
Copyright©xxx.rights
</footer>
</body>
</html>
3、<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<!DOCTYPE html>
<html>
<body>
<section>
<h1>xxx</h1>
<p>
xxxxx
</p>
</section>
<section>
<h1>xxx</h1>
<p>
xxxxxx
</p>
</section>
</body>
</html>
4、article 定义文章。 标签规定独立的自包含内容。
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
article 元素的潜在来源：论坛帖子、报纸文章、博客条目、用户评论
<!DOCTYPE html>
<html>
<body>
<article>
<h1>xxx</h1>
<p>
最低0.47元/天 解锁文章
扫一扫
544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
