本文将以菜鸟教程官方网站[www.runoob.com] 为例进行HTML语义化的案例分析。
一、前言
什么是HTML语义化？依我看来，HTML语义化就是合理利用HTML标签，在不知道HTML内容的情况下就可以知道某标签或者某部分的作用是什么。比如我使用<p>，那么这个标签里面很可能是文章的内容，我使用<h1>，这里面就会是这个网站的某个一级标题。因此我们在构建HTML页面时，应该避免滥用标签，避免使用很多无意义的标签。
对于HTML语义化的优点，我认为至少包含：第一，当页面因为某些原因丢失了样式，在纯HTML页面下，至少访客也能看得明白页面的内容。第二，方便程序员后续维护和更新。第三，当进行网络爬虫时，一个遵循语义化编程的网站往往能更有效的爬取数据。
二、案例分析
下图是菜鸟教程官网部分截图以及部分HTML源码。
- 我们可以从总体结构中看到该HTML代码非常工整、清楚、易懂。从
<html>到<head>再到<body>，以及body中的各个内容、<script>，结构清晰完整。几个主要部分都使用了<div>，但他们id的值或者class的值都表明了其中的含义，我们可以通过例如id、注释快速找到我们需要的东西。比如class为container navigation的标签可以容易的发现这是导航栏的代码 - 再看导航栏中的标签，使用了
<ul>创建一个无序列表，再使用了7个<li>表示7个导航内容（如图中“首页”、“菜鸟工具”、“菜鸟笔记”等等），清晰易懂。 - 在表示内容的
<div>标签中，我们可以找到几个<h2>标签，也符合语义化，也就是标题，在官网的图中即标题 HTML/CSS，图中整个“学习HTML”的区域都是可点击的，是定义的超链接区域，在源码中即用<a>来表示
但是还是有不少网站不遵循HTML语义化，也没有正确的使用HTML标签，反而导致一些问题，还影响到了SEO效果。这种情况最明显的就是<h1>标签的滥用。有些网站程序员为了方便，当重点突出某些文字的时候，会使用<h1>标签，这样看似在结果方面没什么问题，但如果从搜索引擎方面分析，这种网站是没有重点的，大概率被判断为垃圾网站。
