简体中文

开发者工具 · HTML WYSIWYG 编辑器

Strong 与 b 以及 em 与 i:为什么语义内联 HTML 对编辑者很重要

· 为什么它很重要

html 辅助功能 内容可编辑

旧的粗体和斜体标签变为强元素和强调元素
原始 ToolAcre 矢量图

解释语义和表示内联元素之间的实际区别、辅助技术和搜索引擎如何使用它们,以及如何检查编辑器发出的内容。

粗体并不总是很重要——在出现之前选择含义

产品代码可以加粗,只是为了让读者可以快速找到它;警告可能很强烈,因为它的重要性属于句子的含义。这两个意图在默认样式表中可能看起来很相似。当 CSS 更改或其他读者使用该结构时,仅根据外观进行选择会使标记变得不明确。

ToolAcre 的工具栏将其操作标记为粗体和斜体,而消毒程序将旧的 b 和 i 元素标准化为强和 em。对于强调散文来说,这是一个有用的默认值,但编辑仍然必须确定所选单词是否真正具有重要性或压力而不是装饰。

HTML 规范今天所说的内容 — 总结了 Strong、em、b 和 i 的当前含义

强代表强烈的重要性、严肃性或紧迫性; em 代表重音重点,其位置会影响解释。 b 元素可以在不增加重要性的情况下引起注意,而 i 可以标记与周围散文(例如术语、声音或约定)的文本偏移,而不强调强调。

实际教训并不是禁止使用两个标签。视觉上的相同并不能消除语义上的差异。 ToolAcre 的窄输出选择 Strong 和 Em,因此仅需要风格偏移的内容可能需要审查或不同的目标工作流程,而不是发明的工具栏功能。

辅助技术可能会以不同的方式揭示语义;该存储库证明没有公告

辅助技术可以使用元素语义,但确切的语音处理因产品、模式和用户配置而异。该存储库不包含屏幕阅读器兼容性套件,因此本文不承诺“strong”将始终以特定的声音宣布,或者“b”将始终保持沉默。

结构仍然很重要,因为它提供了样式化跨度所缺乏的软件信息。使用支持政策中的辅助技术测试代表性页面。语义元素为有意义的解释创造了机会;它不能保证在所有环境中都有一种通用的听觉效果。

搜索效果超出了该编辑的证据范围;语义仍然改善文档结构

搜索引擎可以解析文档结构,但没有本地来源证明将 b 替换为 Strong 会导致排名变化。避免将语义 HTML 变成 SEO 公式。搜索可见性取决于内容、链接、技术可访问性以及该编辑器之外的许多系统。

使用语义的合理理由是清晰性和互操作性。作者、浏览器和下游转换可以识别预期的重要性或重点,而无需对样式声明进行逆向工程。任何搜索结果都应该仅使用相关平台的证据来描述,而不是从本地格式化按钮推断。

真正的列表 - 将参数扩展到 <ul> 和 <ol> 与破折号和手动编号

同样的原则也适用于列表。以连字符开头的三行是普通文本,而 ul 和 li 代表对等项的集合。在段落之前键入的数字字符不等于 ol,其序列和可选起始值是结构的一部分。

ToolAcre 公开项目符号和编号列表命令,并允许 ul、ol 和 li 通过其过滤器。浏览器命令行为可能会有所不同,尤其是对于嵌套而言,因此在构建列表后检查源代码。正确的列表语义不能成为缺少标签、混乱的顺序或目标中不支持的深度的借口。

工作示例:ToolAcre 在过滤期间将 b 映射到 Strong,将 i 映射到 em

键入“更改架构之前停止部署”,选择“停止部署”,然后按粗体。浏览器命令最初可能会创建 b,但消毒剂的别名映射会发出强烈的信号。斜体从 i 到 em 遵循相同的模式。源模式显示标准化结果。

现在选择仅在视觉上突出显示的产品标签。 ToolAcre 没有仅 b 或基于类的注意控制,并且仅通过直接源编辑而不是工具栏声明将标记列入许可名单。判断强是否准确;如果没有,请在此受限工作流程之外使用特定于目标的样式。

这不包括的内容 — ARIA 属性、完整的可访问性审核或标题结构,将单独介绍

本文不涉及 ARIA、完整的可访问性审核、标题层次结构或确切的搜索引擎行为。它还没有声明每个允许的内联元素都有工具栏控件。源模式在有效时可以保留 u、s、sub、sup、mark、small、code、kbd、samp、var 和 abbr,但可视命令公开的选择较少。

过滤语义标签不会净化任意恶意 HTML 以供发布。 ToolAcre 的分词器有一个明确的解析器差异限制。呈现不受信任的提交的服务器需要合适的基于解析器的清理程序和策略,而可访问性审查必须检查最终目的地,而不是单独检查这个孤立的预览。

要点:格式化含义,然后检查 - 总结习惯以及 ToolAcre 的 HTML WYSIWYG 编辑器如何公开生成的确切元素

格式化含义,然后检查。当散文真正包含重要性和压力时,“Strong”和“em”就很有价值。它们并不是所有粗体或斜体视觉效果的通用替代品。 ToolAcre 通过在每个操作后公开过滤后的 HTML 来使其选择可见。

使用视觉控件进行绘图,使用源模式进行验证,使用目标 CSS 进行外观。当所需的表示没有准确的语义元素时,不要仅仅因为它类似于设计就强制使用误导性标签。将作者的意图保留在能够表达它的系统中。