所见即所得编辑器 JavaScript：语义和机器理解答案

【问题标题】：WYSIWYG editor JavaScript: semantic and machine understanding所见即所得编辑器 JavaScript：语义和机器理解
【发布时间】：2016-12-23 11:23:53
【问题描述】：

我正在用 JavaScript 制作一个所见即所得的编辑器，我将把它改编为流星框架来构建一个 CMS：

一个重要的问题突然出现在我的脑海中。很多编辑器使用（例如粗体按钮）：

<strong>Some Text </strong>

而不是 span 或 p 或任何其他：

<span style="font-weight: bold;">Some Text </span>

所以我的问题是：应该考虑什么来产生干净的语义 HTML？例如：在内联样式、CSS 类和<strong> 标记之间做出决定。

【问题讨论】：

我们无法告诉您哪个元素拥有描述您的内容的语义，仅基于您知道您希望它的外观如何。这是将表示和语义分离为 CSS 和 HTML 的一部分。
无论如何，关于“什么对 SEO 更好”的问题都是题外话，寻求意见的问题也是如此。
您刚刚回答了我的问题是“分离样式和语义（CSS 和 HTML）的更好方法吗？”因为如果 tinymce 和其他人通过示例使用 strong 表示粗体而不是 css，这可能是有原因的。对不起，我谈论意见，因为人们可以从我提到的两种方式中找到利弊。 ps：抱歉，我所说的 SEO 是指任何想要了解内容的爬虫。

【解决方案1】：

以下事实可帮助您做出决定：

“strong 元素表示强烈的重要性、严肃性或其内容的紧迫性。”

“[bold] 元素表示正在关注的文本范围出于实用目的而绘制，没有传达任何额外的重要性并且没有暗示其他声音或情绪[...]”

由于您不打算理解文本区域中正在编辑的内容，因此语义告诉我们您不应该对使用文本编辑器进行样式化的内容强制执行意图。

【讨论】：