【HTML】语义化
2、语义化
在HTML5出来之前,我们习惯于用div来表示页面的章节或者不同模块,但是div`本身是没有语义的。但是现在,HTML5中加入了一些语义化标签,来更清晰的表达文档结构。
如上图,这个页面结构中摒弃了所有div元素,取而代之的是HTML5语义化标签(用哪些标签取决于你的设计目的)。
同样,W3C制定了这些语义化标签,不可能完全符合我们的设计目标。我们的目标是为了能够让开发者或是爬虫读懂各个模块的语义化内容,因此,div作为一个没有任何语义,仅仅是用来构建结构的元素,是最适合做容器的标签。
一些常见的语义化标签:
下面就让我们把HTML5语义化标签过一遍:<header>
- 定义文章的介绍信息:标题,
logo,slogan
; - 包裹目录部分,搜索框,一个nav或者任何相关的logo;
- 一个页面中
<header>
的个数没有限制,可以为每个内容块添加一个header
;
<nav>
- 定义文章导航栏,链接等;
- nav一般和u、li配合做导航栏;
<main>
- 定义文章的主要内容 main标签在一份文档中是唯一的,其后代元素常常包括
<article>
;
<article>
- 定义文档中可以脱离其他部分,一份独立的内容,通常带有标题,当
article
内嵌article
时,里外层的内容应该是相关的,比如一篇微博和它的评论;
<section>
- 与article的差别在于,它是整体的一部分,或者是文章的一节,一般来说
section
也会带有标题;
<aside>
- 侧边栏(与article并列存在)或者嵌入内容(在article内),通常认为是独立拆分出来而不受整体影响的一部分,作为主要内容的附属信息,如索引,词条列表,或者页面及站点的附属信息,如广告,作者资料介绍等;
<footer>
- 页脚,通常包含作者、版权信息或者相关链接等;