开发者工具 · HTML WYSIWYG 编辑器
标题不是大粗体文本:为什么标题级别在 Web 内容中很重要
· 为什么它很重要
html 辅助功能 文本编辑
解释为什么 h1 到 h6 形成屏幕阅读器用户和搜索引擎所依赖的文档大纲,以及如何检查视觉标题是否为真实标题。
没有标题的文章 — 打开的页面中每个明显的标题都是粗体段落
由 CSS 放大和加粗的行看起来像节标题,同时在文档树中保留一个段落。有视力的读者可能会从版式中推断出这种划分,但软件不会接收标题元素来识别、收集或导航。仅凭外观并不能创造层次结构。
ToolAcre 避免了样式控制,并为 h1 到 h4 提供了显式的块选择。因此,作者可以对标题进行编码,而不是用强文本来模拟标题。允许列表还接受源代码中的 h5 和 h6,尽管工具栏不会公布这些级别的控件。
标题元素除了大小之外还有什么作用 - 解释它提供的轮廓、导航快捷方式和结构
标题元素标记后面的内容并构成可导航的文档结构。浏览器通过可访问性 API 公开该角色,并且许多辅助工具可以呈现标题列表或在标题之间移动。当样式表缺失或被替换时,该元素仍然可识别。
粗体段落不提供任何结构信号。它仍然可以是有用的散文,但它不应该代表章节边界。使用大纲或可访问性检查工具测试最终文档,因为本地预览不会报告标题关系或验证作者的组织。
级别是嵌套,而不是大小 - 解释了为什么从 h2 跳到 h4 会让读者和工具感到困惑
级别表示嵌套,而不是字体大小的菜单。 h2 通常会在页面的主要上下文下方引入一个部分; h3 引入了 h2 的一小部分。仅仅因为 h4 的默认字体看起来正确而选择 h4 可能意味着缺少中间结构。
ToolAcre 将保留 h1 到 h6 并且不会拒绝跳过的级别。过滤器强制使用词汇,而不是编辑逻辑。在纸上或源代码中构建轮廓,然后在目标位置使用 CSS 来控制外观,而无需更改级别来追求首选的视觉比例。
在上下文中选择页面标题;该编辑器不强制执行 one-h1 规则
工作簿规定了一个 h1,但实现没有这样的规则,本文也没有发明一个作为普遍法则。页面模板、嵌入片段和文档约定决定内容是否应提供其主标题或从主持人提供的标题下方开始。
检查完整的目的地,而不是单独的片段。如果 CMS 已将文章标题呈现为 h1,则粘贴的正文内容可能会以 h2 开头。 ToolAcre 无法看到外部模板,因此它的 h1 选项是一种功能,而不是对每个草稿的建议。
工作示例:将粗体段落与源代码中的标题元素进行比较
创建 `<p><strong>Installation</strong></p>` 和 `<h2>Configuration</h2>`。两者在沙箱中可能看起来很突出,但来源显示只有“配置”是标题。已发布页面上的可访问性树检查同样应仅将 h2 识别为标题。
通过块选择器或源模式将安装更改为正确的级别。然后检查两个标题是同行还是父子。消毒剂保留了这两种形式,但无法从它们的言语中确定关系。该判断属于文档作者和页面上下文。
在不滥用级别的情况下设置标题样式 - 解释了 CSS(而不是级别选择)应该控制外观
标题外观属于 CSS。网站可以使 h2 朴素而 h3 在视觉上与众不同,同时保留逻辑层次,前提是设计仍然传达层次结构。设计正确的 h2 比仅仅为了获得更小的浏览器默认值而替换 h4 更安全。
预览的样式表故意简单明了。它不是您的产品主题,因此其默认标题尺寸对于目标设计来说是很差的证据。复制语义片段,在那里应用批准的样式,并审查响应行为,而无需重写大纲以满足一个孤立的视图。
这不包括什么 - 诸如 <section> 和 <article> 之类的分段元素,或超越结构的 SEO
本文不涵盖章节和文章元素、ARIA 标题角色、完整的 SEO 指南或每个屏幕阅读器。它还没有声称 ToolAcre 可以验证跳过的级别、重复的标题或标题文本质量。工具栏提供元素;作者提供了一个连贯的结构。
净化后的输出不会自动成为安全的不受信任的发布。预览沙箱限制了 ToolAcre 内部的执行,而复制的标记则保留了这种保护。使用目的地端的卫生和可达性测试。正确的标题树是一个质量维度,而不是安全控制或完整的审核。
要点:结构第一,样式第二 — 总结规则以及 ToolAcre 的 HTML WYSIWYG 编辑器如何让您确认视觉标题后面的标记是否是标题元素
结构第一,风格第二。确定哪些主题是节和小节,根据该关系分配级别,然后检查 ToolAcre 发出的实际 h 元素。当字体、颜色和间距消失时,标题应该仍然有意义。
最后,将片段放置在其真实模板中并检查组合的层次结构。本地编辑器无法知道外部页面标题或导航外壳。它的价值在于透明度:视觉格式和源代码彼此相邻,使得假标题在发布前更容易被检测到。