HTML语义化

以前我一直没有重视过HTML语义化，以为<div>+<span>，再用上一些基本的语义化标签，好比<p>,<h1>等等，写一些比较普通的页面足够了。可是，咱们应当追求把语义化标签用对，而不是仅仅完成一个页面就行。

那么，为何要使用HTML语义化呢？
1.为了在没有CSS的状况下，页面也能呈现出很好地内容结构、代码结构（为了裸奔时好看）。
2.加强用户体验，例如title、alt属性用于解释名词或解释图片信息（如图，左边为title的效果，右边为alt的效果)。

3.有利于SEO(Search Engine Optimization,搜索引擎优化)，和搜索引擎（如百度、谷歌等）创建良好沟通，有助于爬虫抓取更多的有效信息。爬虫依赖于标签来肯定上下文和各个关键字的权重。
4.方便其余设备解析（如屏幕阅读器、盲人阅读器、移动设备）以其意义来渲染网页。
5.便于团队开发和维护，语义化更具可读性，能够减小差别化。

 

写HTML代码时应注意什么？
1.尽量少的使用无语义的标签div和span；
2.在语义不明显时，既可使用div或者p时，尽可能用p, 由于p在默认状况下有上下间距，对兼容特殊终端有利；
3.不要使用纯样式标签，如：<b>、<font>等，改用css设置。
4.须要强调的文本，能够包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
5.使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和通常单元格要区分开，表头用th，单元格用td；
6.表单域要用fieldset标签包起来，并用legend标签说明表单的用途；

 

HTML5新增了不少语义化标签，咱们来学习下经常使用的标签。

1.<header>是头部，里面可使用<hgroup>存放多个标题，与之相对，<footer>表示页脚。

 <header>
    <hgroup>
        <h1>网站标题</h1>
        <h1>网站副标题</h1>
    </hgroup>
</header>

2.<nav>为导航部分。

<nav>
    <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>

3.<article>为文章，<section>为段落，<aside>为侧边栏。

 

此外，还有不少语义化的标签，如：

1.<time>定义时间和日期，以机器可读的方式对日期或时间进行编码，这样一些软件能够把用户生日或者时间自动添加到日程表中，标签不会在浏览器中呈现任何效果。

2.<audio> 定义一个音频，<video> 定义一个视频。

3.<small> 被包含的内容呈现小号字体。

4.<main> 规定文章的主要内容，标签中的内容在文章中应当是惟一的，不包含在文档中重复出现的内容。（一个文档中只能有一个<main>，而且其不能是<article>,<aside>,<footer>,<header>,<nav>的后代）

5.<q> 标记一个短的引用，<blockquote> 用来标记长的引用，定义引用块。被引用的部分先后会添加换行，而且增长外边距。

还有不少语义化的标签，平常须要多加积累。