HTML5最主要的特点是添加了许多新的语义元素(虽然其本质还是div)。通过使用这些语义元素,可以为网页创建清晰,有逻辑的结构。下面对页面结构相关的元素做个总结。
1,<article>
表示一篇任何形式的文章,类似新闻报道、论坛帖子、博客文章(不包括评论或者作者简介)等能够独立的内容区块。<artile>应该包含所有相关内容、包括标题、作者署名、以及文章正文。
2,<aside>
表示独立于周围的一个完整的内容块。例如,可以用aside创建一个附注栏,其中包含与主文章相关的内容或者链接。
3,<figure>和<figcaption>
<figure>元素可以理解成是插图,但是与图片的概念还不完全一样,插图独立于文本内容,但也与文本内容相关。
<figcaption>元素可以理解成插图的说明,提个醒,<figcaption>不是只能包含文本,任何html元素都可以,比如链接、小图标。由于figcaption包含了对图片的完整说明,所以alt文本就显得多于了,这种情况下,可以把<img>元素中的alt属性删除。
4,<footer>
表示页面底部的页脚。包含小字号的版权声明,简单的链接等。
5,<header>
表示增强型的标题。可以包含HTML标题和其他内容。其他内容可以是标志、作者署名或一组指向后面内容的导航链接。
6,<nav>
表示页面中重要的一组链接。其中的链接可以指向当前页面的主题,也可以指向网站的其他页面。同时一个页面中可以包含多个<nav>
7,<section>
表示文档中的一个区块,或者表示一组文档。<section>的使用规则是:其中的内容必须开始于一个标题。同时在其他语义元素(如<article>,<aside>)不适用的情况下选用<section>
8,<main>
表示页面的主要内容。比如可以使用<main>包含<article>元素,隔离网站的页眉、页脚和侧边栏。