与文本编辑器提供 <h1> 到 <h6> 标题以及多种以有意义且直观的方式设置文本段落格式的方法类似,HTML 提供了一组非常相似的语义和非语义元素,用于赋予散文意义。
本部分将介绍标记文本的主要方式,即文本基础知识。然后,我们将讨论属性,之后再探讨标记文本的其他方式,例如列表、表格和表单。
标题,再次探讨
有六个部分标题元素:<h1>、<h2>、<h3>、<h4>、<h5> 和 <h6>,其中 <h1> 最重要,<h6> 最不重要。多年来,开发者一直被告知浏览器使用标题来概述文档。这最初是一个目标,但浏览器从未实现文档大纲功能,并且提议的大纲算法已正式从 HTML 规范中移除。不过,屏幕阅读器用户非常依赖标题作为探索策略来了解页面的内容,他们可以使用 h 键在标题之间切换。确保标题级别以逻辑方式实现(就像您为文档创建大纲一样),这样可让内容更易于访问,强烈建议您这样做。
默认情况下,浏览器会将 <h1> 设置为最大,<h2> 略小,后续每个标题级别的字号都会比上一个级别小。从历史上看,用户代理样式表还会减小嵌套在 <article>、<aside>、<nav> 或 <section> 等分段元素内的 <h1> 元素的字号。
某些用户代理样式表包含以下选择器(或类似选择器),用于将嵌套的 <h1> 元素设置为较低的标题级别:
/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}
不过,无障碍对象模型 (AOM) 和屏幕阅读器从不根据嵌套情况修改标题级别;嵌套的 <h1> 始终报告为“标题,级别 1”。这导致了不一致的情况,即嵌套标题在视觉上显得较小,但对于辅助技术而言仍是顶级标题。
由于 HTML 规范移除了文档轮廓算法,因此浏览器也移除了这些旧版用户代理样式表规则。因此,嵌套的 <h1> 元素会保留其标准的 <h1> 字号,而不会自动缩小。
请勿依赖于将 <h1> 元素嵌套在分段元素内来实现视觉样式或结构层次。请始终根据文档结构,使用连续的标题元素(<h1> 到 <h6>)标记内容。这样可确保搜索引擎、屏幕阅读器和未来的维护人员能够清晰地了解您的内容。
除了标题之外,大多数结构化文本都由一系列段落组成。在 HTML 中,段落使用 <p> 标记进行标记;结束标记是可选的,但始终建议使用。
#about 部分包含一个标题和几个段落:
此部分不是地标,因为它没有无障碍名称。如需将此元素转换为地标角色 region,您可以使用 aria-labelledby 提供无障碍名称:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
仅在适当的时候创建地标。如果地标过多,屏幕阅读器用户很快就会迷失方向。
引用和引文
在标记文章或博文时,您可能需要添加引用或摘录,并可选择是否显示引用信息。
这三个组件对应的元素如下:<blockquote>、<q> 和 <cite>(用于显示引用),或 cite 属性(用于提供更多搜索信息)。
#feedback 部分包含一个标题和三条评价;这些评价是块引用,其中一些包含引用,后面跟着一个包含引用出处的段落。为了节省空间,我们省略了第三条评价,标记如下:
有关引用作者或引用的信息不属于引用内容,因此不在 <blockquote> 中,而是在引用内容之后。
虽然这些是通俗意义上的引用,但实际上并未引用特定资源,因此封装在 <p> 段落元素中。
引述内容显示在三行中,包括作者姓名、之前担任的职位和职业抱负。<br> 换行符用于在文本块中创建换行符。它可用于实际地址、诗歌和签名块。不应使用换行符作为回车符来分隔段落。请关闭上一个段落,然后打开一个新段落。使用段落标记来表示段落不仅有利于无障碍功能,还支持样式设置。<br> 元素只是一个换行符,受极少数 CSS 属性的影响。
虽然我们在每个引用块后的段落中提供了引用信息,但之前显示的引用之所以采用这种编码方式,是因为它们并非来自外部来源。如果确实如此,则应引用来源。
如果评价是从评价网站、图书或其他作品中提取的,则 <cite> 元素可用于来源的标题。<cite> 的内容可以是书名、网站名称或电视节目名称,甚至是计算机程序的名称。无论来源是顺带提及,还是被引用或参考,都可以使用 <cite> 封装。<cite> 的内容是作品,而不是作者。
如果 Blendan Smooth 的引言摘自她的线下杂志,您应按如下方式编写 blockquote:
引用元素 <cite> 没有隐式角色,应从其内容中获取无障碍名称;请勿包含 aria-label。
如果您无法显示内容,但仍需注明出处,可以使用 cite 属性,该属性的值为所引用信息的源文档或消息的网址。此属性对