使用结构正确的 HTML 标题而不是粗体段落非常重要 或单行全大写文本,在组织网页内容时。想想网页 标题作为一本书的目录。视力正常的人可以快速 通过仅阅读标题来扫描您的网站以了解内容。 他们可以专注于标题或副标题。
没有视力的用户可以通过适当的结构获得相同的好处 标题。辅助技术可以浏览各种标题和副标题 对于他们来说。任何用户,无论其能力或残疾如何,都无法 如果标题不存在或顺序混乱,请关注网站的故事。
标题不是必需在网页上。然而,它们有助于分解和组织冗长的信息网页,从而提高 可读性。正确的标题使用也有搜索引擎优化的好处, 可以帮助您的网页在 Google 搜索结果中排名更高。
标题顺序
标题必须遵循 a逻辑顺序符合网络无障碍要求。一个网页应该只有一个 标题级别 1<h1>。这通常是页面标题。
正文中使用的任何标题(在页面标题之后)都可以是<h2>或更低。您总共可以使用标题 2-6。在足球比赛结果,我们建议坚持 标题 2-5 作为<h6>通常不需要。
嵌套标题
如果您“嵌套”标题,换句话说,如果您有一个标题的副标题,则不要 跳过标题级别。如果您有<h2>并且想要在其后添加副标题,请使用<h3>。如果您在其后添加“同等重量”的副标题,请使用<h3>再次。小标题的小标题是<h4>。完成副标题后,您可以返回<h2>.
视觉示例
以下是如何正确排序标题的直观示例。
标题级别 2 - 示例 1
Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus。男性简历暂停,ut ullamcorper SEM。 Sed ut dignissim totortor。 Nullam eu lectus sapien.
3 级副标题 - 示例 2
Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus。男性简历暂停,ut ullamcorper SEM。 Sed ut dignissim totortor。 Nullam eu lectus sapien.
3 级副标题 - 示例 3
Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus。男性简历暂停,ut ullamcorper SEM。 Sed ut dignissim totortor。 Nullam eu lectus sapien.
4 级副标题 - 示例 4
Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus。男性简历暂停,ut ullamcorper SEM。 Sed ut dignissim totortor。 Nullam eu lectus sapien.
标题级别 2 - 示例 5
Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus。男性简历暂停,ut ullamcorper SEM。 Sed ut dignissim totortor。 Nullam eu lectus sapien.
代码示例
以下是如何正确排序标题的编码示例。
<h2>标题级别 2 - 示例 1</h2><p>Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Aliquam aliquam lorem dignissim,
ultricies lacus quis, venenatis lacus.</p><h3>3 级副标题 - 示例 2</h3><p>Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Aliquam aliquam lorem 设计
ultricies lacus quis, venenatis lacus.</p><h3>3 级副标题 - 示例 3</h3><p>Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Aliquam aliquam lorem dignissim,
ultricies lacus quis, venenatis lacus.</p><h4>4 级副标题 - 示例 4</h4><p>Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Aliquam aliquam lorem dignissim,
ultricies lacus quis, venenatis lacus.</p><h2>标题级别 2 - 示例 5</h2><p>Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Aliquam aliquam lorem dignissim,
ultricies lacus quis, venenatis lacus.</p>
示例说明
回顾我们的示例,我们有两个单独的<h2>s:示例一和示例五。它们可以被认为等同于 书。
我们有两个独立的<h3>s:示例二和示例三。例如,它们是两个副标题,并且可以是 被认为相当于书中的章节。
我们有一个<h4>这是示例三的副标题。这可以认为相当于一个话题 在书中某一章的一部分内。
屏幕阅读器(例如 VoiceOver)会看到我们的目录,如下所示:
摘要
正确排序标题非常重要。 避免使用标题来实现仅限视觉结果。例如,如果您有一个想要脱颖而出的公告,但是 这不是后面内容的标题——你不应该使用标题。相反,使用一些 CSS 来设置段落文本的样式,使其看起来独特且经久不衰 出来。当您向网页添加标题时,请始终考虑屏幕阅读器用户。
了解详情
要详细了解使用正确标题结构的原则:
现代校园 CMS
在 Modern Campus CMS 中,您的页面标题自动为<h1>网页的标题级别,因此您无需自己应用该标题级别。还保留 请记住,滑块标题和侧边栏标题会自动<h2>s。如果您选择将任何标题嵌套在滑块或侧边栏中,则应首先 的<h3>标题级别。
要将标题样式应用于一行文本,请将光标放在该行的内部 文本,然后从 编辑器栏中最左侧的下拉菜单。

请注意,创建标题的相同方法通常适用于其他在线应用程序, 例如 Google Docs 或 MS Word。
要详细了解如何创建特殊标题样式: