语义化标签就是尽量使用有相对应的结构的含义的Html的标签，以Table为例：
<table>
<tr>
<td>消费项目</td>
<td>消费金额</td>
</tr>
<tr>
<td>吃饭</td>
<td>20元</td>
</tr>
</table>
你看出了上面的Table有什么毛病吗？嘿嘿，那你看这个语义化的标签
<table>
<caption>花费记账</caption>
<thead>
<tr>
<th>消费项目</th>
<th>消费金额</th>
</tr>
</thead>
<tbody>
<td>吃饭</td>
<td>20元</td>
</tbody>
</table>
这两块代码的标签不一样，第二个表格的这些标签代码，无疑更符合Web标准.
<caption>:表格的标题
<thead>:一表格的表头
<th>:表的某一列的列头。
再说我们习以为常的
<title>博客园简介</title><body>博客园是一个软件开发的技术乐园，它于2004年创办，这里...</body>
你看，为什么我们看一篇文章，一下就知道标题在哪呢？在浏览器的顶端。那为什么搜索引擎能抓取呢？就是它知道这个语义化标签<title>里的就是文章标题，要是我们不遵守这个，而是：
<span>博客园简介</span><span>博客园是一个软件开发的技术乐园，它于2004年创办，这里...<span>
那搜索引擎怎么就知道谁是标题，谁是内容了呢？它又靠什么去抓取标题呢?其实语义化不仅可以是标签语义化,还可以延伸成结构语义化.举例:
#left{float:leftmargging-left:50px}
#right{float:rightmargin-top:100px}
<div id="left">content..</div>
<div id="right">content..</div>
这个例子里对id的命名稍微有点夸张,但是类似的情况却使有的,当我们想把#left这个div放到页面的右边,和#right调换位置时,难道你可以把样式改成这样?
#left{float:rightmargin-left:50px}
#right{float:leftmargin-top:100px}
那样看着多别扭,多误导人这两个div的布局啊.
应该写成这样.
<div id="main">content..</div>
<div id="sidebar">content..</div>
那样既一目了然这几个div里是什么内容也方便对其中的样式进行修改.
二：(理论)语义化标签怎么样？
1.结构更好，更利于搜索引擎的抓取（SEO的优化）和开发人员的维护(可维护性更高，因为结构清晰,so易于阅读)。
2.更有利于特殊终端的阅读(手机，个人助理等）。
三：(行动)语义化标签怎么办？
尽量用有结构含义的,少用无语义的，如<span>,<div>无意义，看不出是什么东西,可是<address>一看就知道这里面的是地址,em标签一看就知道这个是强调的内容,区分于不同内容。
那么，怎么判断你的页面是否符合Web标准之一：语义化标签呢？你可以把你的页面暂时去掉样式后看可读性怎么样，如果这个时候感觉你的页面很乱，那就说明的的页面的语义化标签不怎么样，而如果你的页面去掉样式了感觉依然不是杂乱无章的，那么，就说明你的页面结构清晰，语义化标签比较可以了。
在HTML5中新增了很多语义标签概念，使HTMl文档根据页面内容结构选择语义标签，是页面结构内容格式化。它有利于清楚的描述HTML文档的意义给浏览器和开发者。下面列举了一些我们常用到的语义标签：
section元素 表示页面中的一个内容区 块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用，表示文档结构。例：HTML5中<section>……</section>；HTML4 中<div>……</div>。
article元素 表示页面中一块与上下文不相关的独立内容。比如一篇文章。
aside元素 表示article元素内容之外的、与article元素内容相关的辅助信息。
header元素 表示页面中一个内容区块或真个页面的标题。
hgroup元素 表示对真个页面或页面中的一个内容区块的标题进行组合。
footer元素 表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。
nav元素 表示页面中导航链接的部分。
figure元素 表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用
figcaption元素为figure元素组添加标题。
到这里你可以能对如何对HTML页面语义化还是一直半解。下面我们就来通过一个具体的页面结构进行说明。
今天你的leader兴致冲冲地找到你，希望你可以帮他一个小忙，他现在急着要去开会。要帮什么忙呢？你很好奇。
他对你说，公司打算做一个公司主页，让你设计下这个页面的基本结构。
这个任务很简单嘛！你爽快的答应了，然后你就自己设计出来如下图所示的页面基本结构布局。
好了，完工！你自信满满。
你的leader过来看了下你的成果。总体来说，他还挺满意。但是他说从你设计的网页布局中我们视觉正常的人可以直观的看到页面的布局，并获取页面的内容信息。
但是屏幕阅读器或者搜索引擎无法获取准确获取页面的内容信息和内容相互之间的关系。
这样的设计是正确的但是还可以进行改进。
于是他百忙之中抽出一点时间对你的网页布局做了改进
• 在你的设计的布局中加入了一些HTML5中的语义元素，这样无论是人还是机器都可以很轻松的从设计布局中读取到相关信息了。这样的设计是不是更合理呢？这样做的好处有：
1、将构造HTML页面内容语义元素一起使用，可以将HTML内容分成明确的几个区域。
2、建立区域关系后的页面，对于人或者机器，都更具有可读性。而且，这也有利于搜索引擎访问页面。
3、建立区域关系后的页面，也有利于网页风格的一致性。
这些都是HTML5的基础知识，在教程网站秒秒学中有很多关于这些知识的讲解，推荐你可以去看看。
本题地址： https://github.com/YvetteLau/Step-By-Step/issues/8语义化意味着顾名思义，HTML5的语义化指的是合理使用语义化的标签来创建页面结构，如header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。
例如使用可视化标签，构建下面的页面结构：
对于早期不支持HTML5的浏览器，如IE8及更早之前的版本，我们可以引入 html5shiv 来支持。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）