HTML5 语义化

以往的开发方式

1
2
3
4
5
6
7
<div class="">
<div class="">
<div class="">
.....
</div>
</div>
</div>

我们在使用HTML4.1或是XHTML的开发的时候,基本上每个页面上都只有 divspan 标签, 浏览器并不知道每一个元素属于页面的那个部分。

为什么要语义化

在W3C标准中,行为、表写、结构要分离,而HTML则负责网页的结构,更为语义化的标签可以让代码的结构更为清晰

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<header>
<nav>
</nav>
</header>
<section>
<article class="">
<header>
</header>
<section>
</section>
<footer>
</footer>
</article>
</section>
<footer>
</footer>

这样写出的代码可以一眼看出每一块代表的什么意思,当然语义化的好处还不只这些

1.有利于SEO优化

页面上元素更为清晰,当小蜘蛛(搜索引擎爬数据的)访问页面的时候,可以更加快捷清楚的抓取到当前的网页的重要信息,更为语义化的代码可以是你的网站在搜索引擎中排名靠前。

2.无障碍阅读

如果访客有视障,那么他只能通过屏幕阅读器来讲网页的信息读取出来播放给访客,更为语义化的代码可以让屏幕阅读器更容易理解。

3.有些设备可能性能比较荣,想pc上浏览器一样渲染页面

这些设备对于css的支持比较弱,语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况(包括现有的或者将来新的设备)。例如,一部手机可以选择使一段标记了标题的文字以粗体显示,而掌上电脑可能会以比较大的字体来显示,无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面。

HTML5的语义化标签

HTML5新增了许多的语义化标签,像之前代码中有用到的 header footer nav等等

用于描述定义每一块或者页面的头信息(页眉);

用于描述定义每一块或者页面的页脚信息;

定义导航链接。

aside

定义页面内容之外的内容,侧边栏等等.

article

定义文章。

section

定义某个部分。

abbr

定义缩写。

cite

定义小段引用

dfn

被定义的词汇 <dfn>organic food</dfn>, 表明这一个关键词

code

定义代码块

kbd

表示提示键盘输入

samp

表示计算机输出。

time

<time datetime="2011-11-18">November 18th</time> 标记一个时间,让计算机识别

mark

定义有记号的文本。

wbr

用于定义长单词的换行点,当一行字超出容器范围时,定义这个标签的单词会从这里折到第二行

q

定义引用,会默认在前后加上引号

更加语义的表单

1
2
3
4
5
<input type="number" name="name" value=""> <!--数字框-->
<input type="email" name="name" value=""> <!--邮件地址-->
<input type="date" name="name" value=""> <!--日期-->
<input type="datetime" name="name" value=""> <!--时间-->
<input type="range" name="name" value=""> <!--范围-->

新增的表单在mobile端效果更为明显,例如 如果设置为 numberemail 输入时会弹出相应的键盘。

文章目录
  1. 1. 以往的开发方式
  2. 2. 为什么要语义化
    1. 2.1. 1.有利于SEO优化
    2. 2.2. 2.无障碍阅读
    3. 2.3. 3.有些设备可能性能比较荣,想pc上浏览器一样渲染页面
  3. 3. HTML5的语义化标签
    1. 3.1. header
    2. 3.2. footer
    3. 3.3. nav
    4. 3.4. aside
    5. 3.5. article
    6. 3.6. section
    7. 3.7. abbr
    8. 3.8. cite
    9. 3.9. dfn
    10. 3.10. code
    11. 3.11. kbd
    12. 3.12. samp
    13. 3.13. time
    14. 3.14. mark
    15. 3.15. wbr
    16. 3.16. q
    17. 3.17. 更加语义的表单
,