第85天:HTML5语义化标签

一、语义标签

语义标签对于我们并不陌生,如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备理解HTML页面内容。

传统的做法我们或许通过增加类名如class="header"、class="footer",使HTML页面具有语义性,但是不具有通用性。

HTML5则是通过新增语义标签的形式来解决这个问题,例如<header></header>、<footer></footer>等,这样就可以使其具有通用性。

此学习目的为了解增加语义标签的目的,以及各语义标签所表达的意义,在网页布局中能够合理使用标签。

传统网页布局:

 <!-- 头部 --> <div class="header">     <ul class="nav"></ul> </div>       <!-- 主体部分 -->       <div class="main">          <!-- 文章 -->       <div class="article"></div>       <!-- 侧边栏 -->       <div class="aside"></div>       </div>        <!-- 底部 -->       <div class="footer"></div>

H5 经典网页布局:

<!-- 头部 -->   <header>        <ul class="nav"></ul>    </header> <!-- 主体部分 --> <div class="main">    <!-- 文章 -->  <article></article>    <!-- 侧边栏 -->    <aside></aside> </div> <!-- 底部 --> <footer></footer>

二、常用新语义标签

<nav> 表示导航

<header> 表示页眉

<footer> 表示页脚

<section> 表示区块

<article> 表示文章 如文章、评论、帖子、博客

<aside> 表示侧边栏 如文章的侧栏

<figure> 表示媒介内容分组 与 ul > li 做个比较

<mark> 表示标记 (带用“UI”,不怎么用)

<progress> 表示进度 (带用“UI”,不怎么用)

<time> 表示日期

本质上新语义标签与<div>、<span>没有区别,只是其具有表意性,使用时除了在HTML结构上需要注意外,其它和普通标签的使用无任何差别,可以理解成<div class="nav"> 相当于 <nav>。不要好奇,它只是一个标签!

尽量避免全局使用header、footer、aside等语义标签。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端那些事

理解标准盒模型和怪异模式&box-sizing属性

盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒...

28260
来自专栏walterlv - 吕毅的博客

WPF/UWP 的 Grid 布局竟然有 Bug,还不止一个!了解 Grid 中那些未定义的布局规则

发布于 2018-05-05 07:43 更新于 2018-08...

8110
来自专栏walterlv - 吕毅的博客

分享一个算法,计算能在任何背景色上清晰显示的前景色

发布于 2017-11-04 14:51 更新于 2018-02...

7910
来自专栏Coco的专栏

纯 CSS 实现波浪效果!

49740
来自专栏前端萌媛的成长之路

前端语义化

20040
来自专栏前端那些事

理解标准盒模型和怪异模式&box-sizing属性

盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题)

14000
来自专栏企鹅号快讯

为什么CSS Grid在创建布局上比Bootstrap更好

CSS Grid是一种在网络上创建布局的新方法。在我们第一次使用浏览器原生的CSS网格布局后,发现这种方式给我们带来太多好处了。 特别是如果将CSS Grid与...

30860
来自专栏技术总结

Swift3.1动画(一)

25750
来自专栏企鹅号快讯

技术干货:前端图形化技术简介(上)

Canvas与SVG 前端图形化技术,主要包括Canvas绘图和SVG绘图两类。 ? Canvas早在十几年前就被火狐浏览器引入。Canvas通过Canvas....

24370
来自专栏数据小魔方

R语言信息可视化——文字云

这一篇跟大家分享R语言信息可视化——文字云。 R语言可以轻松处理信息可视化,并且很早就有专用的信息可视化包——WordCloud。 可是这个第一版的文字云工具,...

41280

扫码关注云+社区

领取腾讯云代金券