IFE-NOTE:页面结构语义化

百度 IFE 任务一要求构建一个页面结构,看似简单,但需充分考虑到语义化。这篇文章简单谈谈 HTML5 语义化中的页面结构语义化的一些经验和理解。

为什么需要语义化

  • 易修改、易维护。
  • 无障碍阅读支持。
  • 搜索引擎友好,利于 SEO。
  • 面向未来的 HTML,浏览器在未来可能提供更丰富的支持。

结构语义化

语义元素均有一个共同特点——他们均不做任何事情。换句话说,语义元素仅仅是页面结构的规范化,并不会对内容有本质的影响。

下图展示了一个典型的页面结构。

典型的文档结构

头部

<header>元素有两种用法,第一是标注内容的标题,第二是标注网页的页眉,如上图你看到的那样。除非必要(内容标题附带其它信息的情况下:发布时间、作者等),一般不在内容中使用<header>。因而,网页中可以包含多个<header>元素。按照 HTML5 的规定,<header>都应包含某个级别的标题,所以应隐式或显式地包含标题,通常将不希望显示的标题设置为display: none;,一方面遵守规范,另一方面则提供了无障碍阅读而不至于影响到页面设计。

导航栏

导航栏使用<nav>看起来是理所当然的,进一步,它也用于一组文章的链接。一个页面可以包含多个<nav>元素,但通常仅仅在页面的主要导航部分使用它。
《HTML5:The Missing Manual》中指出了在侧栏使用<nav>标签的两个案例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 案例一 -->
<nav>
<!-- 此处是链接 -->
<aside></aside>
<aside></aside>
</nav>

<!-- 案例二 -->
<aside>
<nav>
<!-- 此处是链接 -->
</nav>
<section></section>
<div></div>
</aside>

如果侧栏中包含其它不同于链接的其它区块,那么,使用第二种方案显然更为合适。

导航通常包含一组链接,普遍认为,链接使用列表来组织。

1
2
3
4
5
6
7
<nav>
<ul>
<li><a href="#" title="链接">链接</a></li>
<li><a href="#" title="链接">链接</a></li>
<li><a href="#" title="链接">链接</a></li>
</ul>
</nav>

附注

<aside>元素并不仅仅是侧栏,它表示与它周围文本没有密切关系的内容。文章中同样可以使用<aside>元素,来说明文章的附加内容、解释说明某个观点、相关内容链接等等。

<aside>用于侧栏时,其表示整个网页的附加内容。通常的广告区域、搜索、分享链接则位于侧栏。侧栏中的<section>元素规定了一个区域,通常是带有标题的内容。

<section>标签适合标记的内容区块:

  • 与页面主体并列显示的小内容块。
  • 独立性内容,清单、表单等。
  • 分组内容,如 CMS 系统中的文章分类区块。
  • 比较长文档的一部分,可能仅仅是为了正确规定页面大纲。

<div>标签依然是可用的,当你觉得使用其它标签都不太合适的时候。新的语义元素出现之前,我们总是这么干的!

页脚

同可“包罗万象”的<header>元素不同,标准规定<footer>标签仅仅可以包含版权、来源信息、法律限制等等之类的文本或链接信息。如果想要在页脚中包含其它内容,可以使用熟悉的<div>来帮忙。

1
2
3
4
5
6
7
8
9
<div>
<aside>
<!-- 其它内容 -->
</aside>

<footer>
<!-- 法律、版权、来源、联系信息等 -->
</footer>
</div>

主要内容

在早先的 HTML5 版本中并没有规定页面主体的标签,相关的书中经常会说:除去头部、尾部、侧栏等其它部分,剩下的自然是主体部分。

然而,HTML5.1 中规定了一个<main>标签来标识主体内容。<main>标签不能包含在页面其它区块元素中,通常是<body>的子标签,或者是全局<div>的子标签。<main>标签可以帮助屏幕阅读工具识别页面的主体部分,从而让访问者迅速得到有用的信息。

文章

<article>表示一个完整的、自成一体的内容块。如文章或新闻报道。<article>应包含完整的标题、文章署名、发布时间、正文。当语义与表现发生冲突,例如有时需要将文章分多个页面显示,那么需要把每个页面的文章区域都用<article>标记。

文章中包含插图时,使用新的语义元素<figure>标签。

1
2
3
4
5
6
7
8
9
10
<article>
<h1>标题</h1>
<p>
<!-- 内容 -->
</p>
<figure>
<img src="#" alt="插图">
<figcaption>这是一个插图</figcaption>
</figure>
</article>

上述情况下,<figcaption>包含了关于插图的详细解释,则<img>alt属性可以略去。

IFE 任务

任务描述

参考示例图(点击查看),完成一个HTML页面代码编写(不写CSS,不需要关注样式,只关注文档结构)。

范例

用语义化来构建该页面的结构:点击查看

参考

  1. 《HTML5:The Missing Manual》
  2. HTML5 元素参考
本博客所有文章除特别声明外,均采用 CC BY-NC-ND 4.0 许可协议。转载请注明出处! © 雨落
  1. 1. 为什么需要语义化
  2. 2. 结构语义化
    1. 2.1. 头部
    2. 2.2. 导航栏
    3. 2.3. 附注
    4. 2.4. 页脚
    5. 2.5. 主要内容
    6. 2.6. 文章
  3. 3. IFE 任务
    1. 3.1. 任务描述
    2. 3.2. 范例
  4. 4. 参考