HTML5与CSS3基础教程:标记页面主要区域

摘要:大多数网页都有一些不同的区块,如页眉、页脚、包含额外信息的附注栏、指向其他网站的链接,等等。不过,一个页面只有一个部分代表其主要内容。可以将这样的内容包在main元素中,该元素在一个页面仅使用一次。

作者:图灵教育
来源:《HTML5与CSS3基础教程》(第八版)

第三章全部章节:
第一节:“基本HTML结构 开始编写网页”
第二节:创建页面标题
第三节:创建分级标题
第四、五节:普通页面构成和创建页眉
第六节:标记导航 通过nav指向任意页面内容

3.7 标记页面的主要区域

大多数网页都有一些不同的区块,如页眉、页脚、包含额外信息的附注栏、指向其他网站的链接,等等。不过,一个页面只有一个部分代表其主要内容。可以将这样的内容包在main元素中,该元素在一个页面仅使用一次(参见图3.7.1和图3.7.2)。

1.jpg

图3.7.1

这是本章反复使用的页面的完整代码的主体结构。你可能还不熟悉其中某些元素,不过随后就会讲到。main元素包围着代表页面主题的内容。最好在main开始标签中加上role="main"(参见最后一条提示)

main元素是HTML5新添加的元素。记住,在一个页面里仅使用一次。

2.jpg

图3.7.2

同p、header、footer等元素一样,main元素的内容显示在新的一行,除此之外不会影响页面的任何样式。(这里显示的布局并不是由main产生的,而是由CSS控制的。)这里为了方便你在应用了样式的完整页面中识别出main,特意为其添加了蓝色的边框

如果创建的是Web应用,则使用main包围其主要的功能。

不能将main放置在article、aside、footer、header或nav元素中。

如图3.7.1所示,role="main"可以帮助屏幕阅读器定位页面的主要区域。要进一步了解这样的ARIA地标,参见3.13节。