标题和版块

在上一部分中,您了解了即使您不知道页面上字词的含义,当语义元素为文档提供有意义的结构时,其他元素(搜索引擎、辅助技术、未来的维护人员、新的团队成员)也能理解文档的大纲。

在本部分中,您将了解文档结构:您将回顾上一部分中的版块元素;并标记应用的大纲

在编写代码时,为作业选择正确的元素意味着您不必重构或注释掉 HTML。如果您打算为作业使用正确的元素,通常就是为作业选择合适的元素。否则可能不会。

至此您已经了解了标记语义,也知道了为什么选择正确的元素非常重要,在了解了所有不同的元素后,您通常无需花费太多精力(如果有)就能找到正确的元素。

我们来构建一个网站标头。您将从非语义标记开始,并找出一个很好的解决方案,以便在此过程中了解 HTML 部分和标题元素的优势。

如果您几乎不考虑标头的语义,可以使用如下代码:

<!-- start header -->
<div id="pageHeader">
 
<div id="title">Machine Learning Workshop</div>
 
<!-- navigation -->
 
<div id="navigation">
   
<a href="#reg">Register</a>
   
<a href="#about">About</a>
   
<a href="#teachers">Instructors</a>
   
<a href="#feedback">Testimonials</a>
 
</div>
 
<!-- end navigation bar -->
</div>
<!-- end of header -->

CSS 几乎可以确保任何标记看起来都很正确。但是,对所有内容使用非语义 <div> 实际上会产生额外的工作。如需使用 CSS 定位多个 <div>,您最终需要使用 ID 或类来标识内容。该代码还包含每个结束 </div> 的注释,以指明每个 </div> 关闭的是哪个开始标记。

虽然 idclass 属性为样式设置和 JavaScript 提供了钩子,但它们不会为屏幕阅读器和(在大多数情况下)搜索引擎添加语义值。

您可以添加 role 属性来提供语义,以便为屏幕阅读器创建良好的无障碍对象模型 (AOM):

<!-- start header -->
<div role="banner">
 
<div role="heading" aria-level="1">Machine Learning Workshop</div>
 
<div role="navigation">
   
<a href="#reg">Register</a>
   
<a href="#about">About</a>
   
<a href="#teachers">Instructors</a>
   
<a href="#feedback">Testimonials</a>
 
</div>
 
<!-- end navigation bar -->
<div>
<!-- end of header -->

这至少提供了语义,并支持在 CSS 中使用属性选择器,但它仍会添加注释,以标识每个 </div> 关闭的 <div>

如果您了解 HTML,只需考虑内容的用途即可。然后,您可以在不使用 role 的情况下从语义上编写此代码,也无需为结束标记添加注释:

<header>
 
<h1>Machine Learning Workshop</h1>
 
<nav>
   
<a href="#reg">Register</a>
   
<a href="#about">About</a>
   
<a href="#teachers">Instructors</a>
   
<a href="#feedback">Testimonials</a>
 
</nav>
</header>

此代码使用两个语义特征点:<header><nav>

这是主标题。<header> 元素不一定是地标。它具有不同的语义,具体取决于其嵌套位置。如果 <header> 是顶级,则代表网站 banner,这是一个地标角色,您可能已经在 role 代码块中记下了。当 <header> 嵌套在 <main><article><section> 中时,只会将其标识为相应部分的标题,而不是地标。

<nav> 元素将内容标识为导航。由于此 <nav> 嵌套在网站标题中,因此它是网站的主导航栏。如果嵌套在 <article><section> 中,则只会是相应部分的内部导航。通过使用语义元素,您构建了一个有意义的无障碍对象模型 (AOM)。AOM 让屏幕阅读器可以告知用户,此部分由主要导航块组成,用户可以浏览或跳过该版块。

使用 </nav></header> 结束标记时,无需注释来确定每个结束标记结束的是哪个元素。此外,如果为不同元素使用不同的标记,则无需使用 idclass 钩子。CSS 选择器的特异性可能较低;那么您可以使用 header nav a 定位链接,而不必担心发生冲突。

您编写的标头只包含非常少的 HTML 且没有任何类或 ID。使用语义 HTML 时,您无需这样做。

让我们对网站页脚进行编码。

<footer>
 
<p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

<header> 类似,页脚是否为地标取决于页脚的嵌套位置。如果是网站页脚,它就是一种地标,应包含您希望在每个页面上添加的网站页脚信息,例如版权声明、联系信息以及指向您的隐私权和 Cookie 政策的链接。网站页脚的隐式 rolecontentinfo。否则,页脚没有隐式角色,也不是地标,如以下 Chrome 中 AOM 的屏幕截图所示(该 AOM 的 <article><header><footer> 之间有 <header><footer>)。

Chrome 中的无障碍对象模型。

此屏幕截图中有两个页脚:一个位于 <article> 中,另一个位于顶层。顶层页脚是具有 contentinfo 隐式角色的地标。另一个页脚不是地标。Chrome 将其显示为 FooterAsNonLandmark;Firefox 显示为 section

这并不意味着您不应使用 <footer>。假设您有一个博客。该博客具有隐式 contentinfo 角色的网站页脚。每篇博文还可以包含一个 <footer>。在博客的主着陆页上,浏览器、搜索引擎和屏幕阅读器会知道主页脚是顶级页脚,并且所有其他页脚都与它们所嵌套的博文相关。

<footer><article><aside><main><nav><section> 的后代时,它不是地标。如果帖子单独显示,则该页脚可能会提升,具体取决于标记。

页脚中通常包含联系信息,这些信息封装在联系人地址元素 <address> 中。这个元素的名称不太准确;用于包含个人或组织的联系信息,而不是实际邮寄地址。

<footer>
 
<p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
 
<address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

文档结构

此模块以 <header><footer> 开头,因为它们仅在有时是地标元素(或“部分”)是唯一的。让我们来看一下讨论最常见的页面布局:

包含页眉、三列和页脚的布局。

包含一个页眉、两个边栏和一个页脚的布局称为“圣杯布局”。您可以通过多种方式标记此类内容,包括:

<body>
 
<header>Header</header>
 
<nav>Nav</nav>
 
<main>Content</main>
 
<aside>Aside</aside>
 
<footer>Footer</footer>
</body>

如果您要创建博客,则可能有 <main> 系列文章:

<body>
 
<header>Header</header>
 
<nav>Nav</nav>
 
<main>
   
<article>First post</article>
   
<article>Second post</article>
 
</main>
 
<aside>Aside</aside>
 
<footer>Footer</footer>
</body>

采用语义元素时,浏览器能够创建有意义的无障碍树,使屏幕阅读器用户能够更轻松地进行导航。在这里,bannercontentinfo 通过网站 <header><footer> 提供。此处添加的新元素包括 <main><aside><article>;还有之前使用的 <h1><nav>,以及您尚未使用过的 <section>

<main>

只有一个 <main> 地标元素。<main> 元素标识文档的主要内容。每页应该只有 1 个 <main>

<aside>

<aside> 适用于与文档的主要内容间接或间接相关的内容。例如,本文介绍的是 HTML。关于三个网站标题示例(div、角色和语义)的 CSS 选择器特异性部分,可以在 <aside> 中包含切割相关内容;和大多数情况一样,<aside> 很可能会在边栏或标注框中显示。<aside> 也是一个地标,具有 complementary 的隐式角色。

<article>

<main> 中,我们添加了两个 <article> 元素。在第一个示例中,主要内容只有一个字词,在现实世界中,则只是包含单个部分的内容,这种情况下就没有必要这样做。但是,如果您要编写博客(如第二个示例所示),则每篇博文都应位于嵌套在 <main> 中的 <article> 中。

<article> 表示一段完整或独立的内容部分,原则上可以独立重复使用。您可以将文章想象成报纸中的文章。在印刷资料中,关于新西兰总理杰辛达·阿登的新闻报道可能只会出现在某个版块中,甚至可能是国际新闻。在该报纸的网站上,同一篇新闻报道可能会出现在主页、政治版块、大洋洲或亚太地区新闻版块,也可能出现在体育、生活方式或科技版块,具体取决于新闻主题。报道也可能会出现在其他网站上,例如 Pocket 或 Yahoo News!

<section>

当没有更具体的语义元素可供使用时,<section> 元素用于包含文档的通用独立部分。各部分应有标题,但极少数例外情况。

回到 Jacinda Ardern 的例子,报纸首页上的横幅中会包含报纸的名称,后跟一个 <main>,它分为多个 <section>,每个 <section> 都有一个标题,例如“World news”和“政治”;在每个部分中,您都会看到一系列 <article>。在每个 <article> 中,您还可以找到一个或多个 <section> 元素。这个网页会发现整个“标题和部分”部分是 <article>。然后,此 <article> 会拆分为几个 <section>,包括 site headersite footer 和文档结构。报道本身和各个版块也是如此。

除非 <section> 具有无障碍名称,否则它不是地标;如果具有可访问的名称,则隐式角色为 region。应谨慎使用地标角色,用于标识文档的整个部分。使用过多的地标角色可能会产生“噪声”如果您的 <main> 包含两个或三个重要的子部分(包括每个 <section> 的无障碍名称),将使您难以理解页面的整体布局。

标题:<h1>-<h6>

版块标题元素有六个:<h1><h2><h3><h4><h5><h6>。每个版块代表六个版块标题级别之一,<h1> 是最高或最重要的版块级别,<h6> 是最低的版块级别。

当标题嵌套在文档横幅 <header> 中时,它是应用或网站的标题。当嵌套在 <main> 中时,无论它是否嵌套在 <main> 中的 <header> 内,它都是该网页的标题,而不是整个网站的标头。嵌套在 <article><section> 中时,它是页面该子部分的标头。

建议使用与文本编辑器中的标题级别类似的方式使用标题级别:以 <h1> 作为主标题,以 <h2> 作为子部分的标题,如果这些子部分包含部分,则使用 <h3>;请避免跳过标题级别这里有一篇不错的关于版块标题的文章

有些屏幕阅读器用户确实可以通过访问标题来了解网页内容。起初,标题应用来勾勒文档概览,就像 MS Word 或 Google 文档可以根据标题生成大纲,但浏览器从未实施过这种结构。虽然浏览器确实会以越来越小的字体大小显示嵌套标题(如下例所示),但它们实际上并不支持轮廓。

您现在已经掌握了足够的知识来概述 MachineLearningWorkshop.com:

MLW.com <body>概述

以下是机器学习研讨会网站的可见内容的大纲:

由于任何一项内容都不是独立的完整内容,因此 <section><article> 更合适;虽然每个元素都有标题,但每个部分都不适合使用 <footer>

至此,文字内容应不加说明,但不要使用标题加粗或加粗文字;请改用 CSS如果您想强调文本,也可以用语义元素来强调。在讨论文本基础知识时,我们将介绍这些内容并填写页面上的大部分内容;然后再深入介绍属性

检查您的理解情况

测试您对标题和章节的掌握情况。

用于包含网站区域(包括网站徽标或标题以及主导航栏)的元素是什么?

<title>
<heading>
<header>

一个网页上允许有多少个 <main> 元素?

无。这不是有效的元素。
仅一次。
任意数量,只要它们具有无障碍名称即可。