什么是语义化标签？
非语义化标签
使用语义化前都用div标签，只能通过class来理解标签作用，不太好读~~
语义化标签
通过标签就可以理解该部分内容，方便浏览器解析，节省代码。
为什么要有语义化标签？
- 根据内容的结构，选择合适的标签构建出便于开发者阅读的可维护性更⾼的代码结构，同时能够让机器更好地解析。
- html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
- 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
- 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
- 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解;
- 使用语义化标签提升过网页可访问性后 听觉障碍、视觉障碍者将可以通过辅助设备获取页面的信息！
例子
掘金官网是用Vue的SSR框架Nuxt.js构造的，好处就是利于SEO
由于采用SSR构造，搜索引擎爬虫通常只能爬取HTML等静态资源，传统的SPA采用客户端渲染会导致搜索引擎难以理解和抓取页面内容，而SSR能够生成已经渲染好的HTML，使得搜索引擎更容易理解和索引网页内容。
今日头条是一家知名的新闻资讯网站，我们可以通过分析它的HTML结构来对比语义化标签与非语义化标签的差异。
- 语义化标签的使用：
在今日头条的网站中，我们可以看到大量使用了语义化标签来表示页面的结构和内容。例如，在头部部分，使用了<header>标签来包含站点的标题和导航栏。在导航栏中，使用了<nav>标签来表示导航菜单。
在内容部分，每个新闻文章使用了<article>标签来表示，这样可以将每篇文章都视为独立的内容单位。而每篇文章中的不同章节，如标题、正文、图片等，使用了适当的语义化标签，如<h1>、<p>、<img>等，来表示内容的层级和类型。
- 非语义化标签的使用：
虽然今日头条大部分的HTML结构都使用了语义化标签，但仍然存在一些非语义化标签的使用。
例如，在一些广告部分，使用了<div>标签来包含广告内容。这样的标签缺乏明确的语义，不利于搜索引擎的理解和网页的可访问性。
此外，在一些页面布局中，也使用了<div>标签来表示各种容器，如侧边栏、底部栏等。这种用法属于典型的非语义化标签使用，没有提供额外的结构信息。
通过对比今日头条的HTML结构，我们可以看到语义化标签能够更好地表达页面的结构和含义，提高可读性、可访问性和SEO。使用语义化标签能够让开发者和搜索引擎更好地理解网页的结构，提升用户体验，在浏览器查找相关信息时，会准确提供信息。
常用的HTML语义化标签
<title>:标题<h1-6>:h1~h6，分级标题，<h1>与<title>协调有利于搜索引擎优化。<hearder>: 页眉通常包括网站标志、主导航、全站链接以及搜索框。<nav>:标记导航，仅对文档中重要的链接群使用。<main>:页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。<article>:定义外部的内容，其中的内容独立于文档的其余部分。<section>:定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。<aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。<footer>:页脚，只有当父级是body时，才是整个页面的页脚。<figure>:规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。<cite>:表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
