「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」。
什么是语义标签，为什么要写语义标签，什么样的语义标签才是合格的？
就我自己当下的理解，语义标签就是一个有着自己含义的标签。 那么在编写html结构的过程当中，为什么要采用语义标签。现在很多人编写网页就是一堆的div串联在一起比如说：
<div>
<img src="" alt="">
<div>
<div></div>
<div></div>
</div>
<input type="" value="">
</div>
这是我最近写的网页的一部分结构，还没有算上外面还有几层大的包裹，一个不好的html结构很容易让人看着头痛，虽然说通过特定的类名可能可以知道每个div的作用，但是一个好的标签，可以让人更快的知道每一块标签所表示的页面结构。
那为什么要进行语义化，结合上面的分享，大体上就是可以让其他人更了解你的网页结构 ，减少后面维护或者是修改所花费的时间。
对于浏览器来说，一个好的语义化页面也更有利于搜索引擎的建立索引、抓取内容。简单来说，就是浏览器比起放在div里面的内容，会更加关注h1里面的内容。
那什么样的语义标签才算是合格的呢？ 之前看过一段话，在你的html文件去掉js和css的渲染之后，如果剩下的内容也还是能够呈现出很好地内容结构，让人能够看得懂，那么你的网页语义结构就是合格的。
常用的语义标签布局
借用网上的一张图，这张图我也觉得新生来看对于一个页面的布局帮助是非常大的，从这张图上面就能大概了解到一个网页的布局，每一块应该用一个什么样的大标签，至于之后的每个模块内部的小标签，其实也能够将这个小的模块细分化，比如说<aside>标签当中的内容也还能够分为头身尾几个部分，那么这几个部分也还能够用上合适的语义标签
<header>元素代表网页的头部，通常用于放置整个网页的内容介绍区域，就拿掘金的网页来做个例子，那他的顶部一些Logo、主要的导航、全站链接、搜索框以及个人中心，这些的一个整合就可以作为一个<header>. 然后比如头部当中这些细分的内容就可以用一个<nav>包裹，内部在采用<ul>``<li>标签进行一个分块，分层，让人看着更加的一目了然<nav>标签就如上面所说, 用来定义一些导航的连接, 当然未必是导航栏才会用到<nav>如果之后有用到一些小目录之类结构, 那么整体外部也可以通过一个<nav>包裹<main>标签, 为什么跳过了上图中的标签冒出来一个<main>标签呢, 因为在我看来,<main>标签是接下去的部分标签的大哥,<main>标签用来规定文档的主要内容, 在一个页面当中只能有一个<main>标签, 那么其中当然要放置整个网页的主要内容, 当然在<main>的里面也还可以去分块做一些结构划分， 比如<article>,<header>，<body>，<footer><article>标签相对于<section>标签来说更加的独立,就像图片中的那样，<article>用来表示整个页面独立的一个区域的内容，当然你也可以多个<article>来组成整个页面，但是要注意的是，不能无脑的在每个小块都使用<article>，一般<article>内部就不再使用<article>了，可以用<section>代替<aside>标签，用于描写侧边栏的内容，比如说一个网页布局会有一个主体部分，往往身边还会悬浮着侧边栏，这时候这个侧边栏的标签就可以使用<aside><footer>编写整个页面的底部，一般用来放一些网址，作者，或者引用部分
总结
上面例举的标签没有特别的多，更多的还是在需要使用的时候再去进行一个查询，使用的次数多了，自然而然就会用了
在使用标签语义化的过程当中，他还有一个很大的作用。就是当你在编写一个页面的时候，在合适的单位上使用不同的语义标签能减少整个页面使用的 class 命名的数量，尽量减少页面每一个标签上都需要给它赋值 class ，偶尔可以尝试用语义标签去代替，就比如在一个最小单位的框框里面，图片可以用 <img> 标签，文字可以用 <p> ，<i> ，<em> 标签区分开来，这样就可以有效的减少页面使用的 class
引用部分外部文章内容链接：
[html5中section与article元素的区别 - jiaojiao085 - 博客园 (cnblogs.com)] (www.cnblogs.com/jiaojiaome/…)
[HTML5的article和section的区别 - 发福大叔 - 博客园 (cnblogs.com)](www.cnblogs.com/ms- grf/p/6855135.html)
html语义化标签 (blog.csdn.net/qq_38128179…)
