HTML5与CSS3基础教程:构建有利于搜索引擎索引的页面

摘要:恰当地使用article、aside、nav、section、header、footer和div等元素将页面划分成不同的逻辑区块。根据需要,对它们应用ARIA地标角色。
作者:图灵教育
来源:《HTML5与CSS3基础教程》(第八版)
第十一章全部章节:
第一节:用CSS布局及注意事项

11.2 构建页面

CSS让页面内容富有活力,开发人员或者设计人员的设计技巧大部分都要靠它来体现。可以将CSS应用于第3章讲到的表现页面主体结构元素的内容容器,以及其中的内容(第4章、第5章、第15~18章)。但首先我们应该知道,高效网页的核心是结构良好、语义化的HTML,参见图11.2.1。

构建页面

(1) 恰当地使用article、aside、nav、section、header、footer和div等元素将页面划分成不同的逻辑区块。根据需要,对它们应用ARIA地标角色。上述两点的详细说明见第3章。图11.2.1创建了一个名为Le Journal的虚构博客,它的页面结构如下所示。

 三个div,其中一个将整个页面包起来,另外两个将两部分主体内容区域包起来以便应用样式设计。

 用作报头的header,包括标识、社交媒体网站链接和主导航。

 划分为多个博客条目section元素的main元素,其中每个section元素都有自己的页脚。

 附注栏div(同时使用了article和aside),提供关于博客作者和右栏(应用CSS之后就有了)博客条目的

链接。

 页面级footer元素,包含版权信息等内容。

(2) 按照一定的顺序放置内容,确保页面在不使用CSS的情况下也是合理的(参见图11.2.2)。例如,首先是报头,接着是主体内容,接着是一个或多个附注栏,最后是页面级的页脚。将最重要的内容放在最上面,对于智能手机和平板电脑等小屏幕用户来说,不用滚动太远就能获取主体内容。此外,搜索引擎“看到”的页面也类似于未应用CSS的页面,因此,如果将主体内容提前,搜索引擎就能更好地对网站进行索引。这同样也会让屏幕阅读器用户受益。

(3) 以一致的方式使用标题元素(h1~h6),从而明确地标识页面上这些区块的信息,并对它们按优先级排序。

(4) 使用合适的语义标记剩余的内容,如段落、图和列表。

(5) 如果有必要,使用注释来标识页面上不同的区域及其内容,如图11.2.1所示。从代码中可以看出,笔者喜欢使用一种不同的注释格式标记区块的开始(而非结束)。

不一定要在应用CSS之前就标记好整个页面。实践中,很少先将一个区块的HTML写好,再为其编写一些或全部的CSS,然后再对下一个区块重复这一过程,等等。处理方式取决于个人习惯。

blob.png blob.png

图11.2.1:这是贯穿本章和下一章的HTML页面,这个页面中有四个主要区块(masthead、main、sidebar和页面footer)。主体内容和附注栏区域包含在class="container"的div中。整个页面包含在class="page"的div中。完整的页面内容请参见www.htmlcssvqs.com/8ed/11/finished-page,默认情况下页面很普通,但功能完整,参见图11.2.2

blob.png

图11.2.2:这是示例在浏览器中显示的样子,除了浏览器默认样式以外并没有设置其他样式。这个页面是一栏的。由于它的语义结构非常好,页面是完全可用且可理解的,只是有一点朴素。

blob.png