首页 > 代码库 > HTML5语义化
HTML5语义化
什么是HTML语义化?
语义化(semantic)就是你看到某个标签就知道它是干什么的。语义化让“显示”与“语义”分离,HTML代码负责页面干什么,而显示效果则由CSS完成。让正确的标签做正确的事情。
比如:当我们看到下面的<h1>标签时,就知道它的功能就是在页面中显示一个顶级标题。
<h1>this is a top level heading</h1>
为什么要语义化?
在HTML5出来之前,我们习惯用<div>表示页面章节,但是<div>没有任何语义,也就是说他要干的事情全凭开发者说了算。页面的导航栏是<div>,页面的边栏也是<div>,唯一的区别就是他们的id。这样不方便开发者阅读代码,也不利于浏览器和搜索引擎的解析。HTML5的核心理念就是“语义”与“显示”分离,那些没有“意义”的标签已经被放弃,如:font。总的来说,语义化有以下作用:
- 易于用户阅读:在没有CSS的情况下,页面也能呈现很好地内容结构、代码结构。
- 提高用户体验:例如title、alt用于解释名词或者解释图片信息。
- 有利于SEO:搜索引擎爬虫依赖于标签来确定上下文和各个关键字的权重。
- 方便其他设备解析:如盲人阅读器根据语义渲染网页。
- 有利于开发和维护:语义化更具可读性。代码更好维护,与CSS3关系更和谐。
理解几个标签
如下图所示,HTML引入<header>、<nav>、<article>、<section> 、<aside>、
这些语义化标签之后,我们在构建页面布局时,完全可以不用<div>。
HTML5 <header> Element
-
header 元素代表“网页”或“section”的页眉。
-
通常包含h1-h6元素或hgroup,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo。
-
整个页面没有限制header元素的个数,可以拥有多个,可以为每个内容块增加一个header元素
header样例:
<header>
<hgroup>
<h1>网站标题</h1>
<h1>网站副标题</h1>
</hgroup>
</header>
HTML5 <footer> Element
- footer与header对应,元素代表页脚,通常含有:作者,相关文档链接,版权信息等。
footer样例:
<footer>
COPYRIGHT @ plusye
</footer>
HTML5 <nav> Element
- nav用在导航上,nav通常结合<ul>使用做成导航栏。
nav样例:
<nav>
<ul>
<li>HTML 5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</nav>
HTML5 <aside> Element
1.aside在article内表示主要内容的附属信息;
2.在article之外则可做侧边栏,没有article与之对应,最好不用
3.如果是广告,其他日志链接或者其他分类导航也可以用
HTML5 <section> Element
1.section元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。
2.section通常还带标题,虽然html5中section会自动给标题h1-h6降级,但是最好手动给他们降级
HTML5 <article> Element
1.article元素最容易跟section和div容易混淆,其实article代表一个在文档,页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的widget小工具。(特殊的section)
HTML5语义化