HTML语义化的案例分析：分析一些实际网站的HTML结构，对比非语义化标签的差异。 语义化，顾名思义，就是写的HTML结构时，是用相对应的有一定语义的英文字母（标签）表示的，标记的，使得网页具备更好的可读性、可访问性和SEO优化效果。（因为HTML本身就是标记语言）
- 一、网站HTML语义化的案例分析
B站
打开网站页面后，页面可以分为导航区、内容区，和侧边栏。
导航区又分为顶部导航和中间导航，顶部导航主要包括热门资源及类别，搜索栏，和用户的一些信息，方便用户快速找到自己喜爱的资源，并且可以随时看到一些用户自己的个人信息。
中间导航包括用户喜欢的UP主最近的动态，热门，频道，还有一些资源的分类选项。
内容区则是一个轮播图和根据用户喜好为用户推荐的视频，点击侧边栏的“换一换”按钮可以为用户重新推荐一组视频。
当我们把页面向下滑动到底的时候，会为我们再推荐一页的视频，并且，中间导航以一种“缩略”的样式“吸附”到顶部，内容区仍然是为我们推荐的视频，侧边栏里则变成了“刷新内容”、“新版反馈“、”客服“、”顶部”几个按钮。 其HTML结构:
<body>
<div>
<nav>顶部导航</nav>
<nav>中间导航</nav>
</div>
<main>
内容区
</main>
<aside>
侧边栏
</aside>
</body>
- 非语义化标签
非语义化标签例如：<div>、<span>等，它们的特点是没有特定的含义，本来这两个标签只是作为默认标签的补充，但现实是它们的使用频率却远超其它语义化标签。
- 语义化标签与非语义化标签的区别
语义化标签就非常的多了，只要是你看到后知道它表示的是什么内容的标签都是语义化标签，这是语义化标签与非语义化标签的最大不同之处，我们常常鼓励在页面中要多使用语义化标签，因为它可以提高页面的可读性，有利于SEO，更有利于有视觉障碍用其他设备阅读网页。
假如我把B站页面的HTML结构写成如下结构：
<body>
<div>
<div>顶部导航</div>
<div>中间导航</div>
</div>
<div>内容区</div>
<div>侧边栏</div>
</body>
从功能上来看，这段代码和上面的代码是一样的，都能实现同样的功能，不同的是，当你看到这段代码的时候，你只知道有几个div标签，而上面的代码不同，你大概能够想象出页面的大概样子，这就是大量使用非语义化标签的坏处，但是这也不是绝对的，我们也可以为这些div加上class类名来区分。但是就目前的形式而言，HTML5又新增了几个语义化标签（article、aside、details、figure、nav、mark等）如以满足用户的需求，所以，以后HTML编写的语义化必然是大趋势。
- 总结
语义化标签可以起到的作用主要有：
-
语义化标签可以让搜索引擎更快地抓取和索引网站的内容，因为它们可以减少网页的代码量，提高网页的加载速度，避免出现错误或者缺失等问题；
-
语义化标签可以让搜索引擎更准确地分析和评价网站的内容，因为它们可以表达出网页的不同部分和主题，突出网页的重点信息，区分网页的层级和优先级等；
-
语义化标签可以让搜索引擎更好地匹配和排序网站的内容，因为它们可以提供更多的语义和逻辑信息，帮助搜索引擎理解用户的意图和需求，提升网站的相关性和质量等
概括来说，代码的语义化带来的好处只是提到可读性，我们要养成语义化编程的习惯，我们可以从一个标签，甚至一个属性开始，逐步实现语义化，养成习惯后就要从结构上考虑页面的语义化了，非语义化最主要的问题就是div和span标签的滥用，完全不使用 div 和 span 并不现实，毕竟这两个标签被发明出来也是有使用价值的，所以可以首先找出一些容易被滥用的区域，这样就能大大增加页面语义化的程度，首先要考虑的就是减少不必要的 div 和 span 标签，然后才是考虑用合适的语义化标签来取代，即使是布局方面也可以使用一些结构性标签，如： main , section , footer ,aside , header 来取代 div，如上面所示。
