3.6 HTML 结构性元素(Structure)

结构性元素用来组织文档的各个部分

为了让文档层次分明,我们可以把文档中的元素按其内容的作用进行组合,这就需要使用到一些HTML结构性元素。 共有4种HTML结构性元素(structural HTML elements)可以使用。

Header

header 通常是HTML文档内容中的第一个元素,用来组织页面头部的内容,是对网站的介绍以及页面导航,一般性包括标识(Logo)标语(Slogan)菜单(Menu)

header 也可以被用作某篇文章(article)或某个区块(section)部分的头部内容。

footer 通常是HTML文档内容中的最后一个元素,包含网站一些次要的但是公共的(多个页面共享)信息,比如常用快捷链接、网站版权声明和备案信息等。

Main

main 元素包含当前页面的主体内容,网站各个页面可以共享header和footer这些通用元素,但main元素应该是彼此不同的。

Aside

aside 元素通常用来包含一些和当前页面内容有关的额外信息,比如博客文章页面的关联评论、推荐文章列表等,一般以左右边栏的形式呈现在页面两边。

Article

article 元素通常用于组织图文博客、论文和文章。

Section

section 元素的结构粒度要小一些,自身并不需要特别的语义,通常用来把一些相关的元素组合在一起。

下面是一个完整的示例(为了便于理解页面结构的布局,里面包含了CSS样式,可暂时忽略):