首先，人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签语义化。
以前以我觉得写一个好的符合标准的页面只需要把结构和表现分离，然后不要使用table，p等标签就行了，至于通篇都是div我也不会觉得有什么问题，因为CSS很强大。但是，所有的标签都是有自己的语义的，下面给出一部分标签的语义： div 语义：Division(分隔) span 语义：Span(范围) ol 语义：Ordered List(排序列表) ul 语义：Unordered List(不排序列表) li 语义：List Item(列表项目) ………… 如果无视标签语义和默认样式，所有标签都用div，其实也是可以写出来视觉效果很好的页面，只要你灵活运用CSS。但是那样的话虽然视觉上达到了要求，但是整个页面一点语义都没有，搜索引擎还是看不懂。所以，要记住： 结构(html)才是重点，样式(css)是用来修饰结构的。所以，要先确定html，确定标签，再来选用合适的css 其次，SEO的时候我们经常用h1来突出标题，用strong来突出关键字，这确实就是语义化的体现。就目前的搜索引擎来说并不能想访客那样很直观的去查看网页，它只有分析源码来体现或猜测网站要表达的内容。比如我们想表达某篇文章的标题， 我们或许会这样写： <div id=”title”>文章的标题</div> 访客或许能理解我们的意思，但搜索引擎就要反复揣摩了，更好的讨好搜索引擎我们可以这样来写： <h1>这是标题</h1> 小提示：h1拥有最高的权值，在一个页面中最好指使用1个h1来突出你的内容，太多的h1会分散其整个页面的权重，对搜索引擎也是非常的不友好。 当然语义化还有其他优势： 正如上面那个例子，语义化的代码更小，下载也就更快了。另外语义化代码也能够更加快速的帮助新的前端工程师理解我们的代码。语义化代码也更能帮助视障的人通过设备来理解我们的内容等等。当然语义化代码也是我们能力的体现。 怎样进行web语义化？ 1、html语义化 一个 html元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让css使一个html元素看起来就像另一个html元素，比如用<div>来代替<p>标记标题。简而言之，就是你在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong> ,<em> 用来区别于其他文字，起到了强调的作用。至于列表<ul>、<ol>等和表格<table>很明显的告诉你他们是做什么的。如： <Hx> <h1>、<h2> 、、<h5> 、<h6>，作为标题使用，并且依据重要性递减。<h1>是最高的等级。 <p> 段落标记，知道了<p> 作为段落，我们就不会再使用 <br/> 来换行了，而且不要 <br/> <br/> 来区分段落与段落。<p> 中的文字会自动换行，而且换行的效果优于 <br> 。段落与段落之间的空隙也可以利用css来控制，很容易而且清晰的区分出段落与段落。在利用行高 (line-height) 很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。 2、css命名语义化 一般而言，CSS类名的语义化声明方式应当考虑页面中某个相对元素的”用意”，独立于它的“定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。 让我们看看下面这个例子：
现在我们想把页面中的元素调换一下位置，如果我们使用的是结构化方式(1)，那么我们就要把所有css类名重新进行定义，因为它们的位置变了。在布局(3)中，我们看到元素都倒转了: right-bar 现在成了 “left-bar”，而 left-content 成了 “right-content”。如果你使用语义化方式则避免了此类问题。
换句话说，使用语义化方式的话，我们在修改网站布局的时候可以仅仅修改相关CSS类的属性即可，而不用修改它们的类名了，如果网站的代码很庞大，这将节省大量的时间。