HTML语义化

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

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

HTML语义化

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标签说明表单的用途;

HTML语义化

HTML5新增了很多语义化标签,我们来学习下常用的标签。

HTML语义化

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> 用来标记长的引用,定义引用块。被引用的部分前后会添加换行,并且增加外边距。

还有很多语义化的标签,日常需要多加积累。 

相关推荐