HTML5内容模型可视化

Question

在HTML5中，每个元素都属于零或多个类别。每个元素都有一个由零或多个类别定义的内容模型。

其中有很多问题，比如:我能把A元素放进元素B吗？

我的问题是:如何有效地构建内容模型的可视化表达？

是否有可能以HTML5用户可以理解的合成方式从元素子集生成一个图？

-编辑--

这是我想要生成的图形。箭头的意思是可以进去。

​

在某些情况下，它们将是箭头上的条件。

条件：(1)透明，但不得有交互内容的后代。

Answer 1

在)中，您为每个元素提供了一个与其相关的类别的列表，哪些元素可以包含它及其内容模型.

…祝你好运！作为一个相关的例子，这里有一个维亚利亚角色和他们的咏叹调的图表-*内容：图表。它是如此的复杂和微小的文字..。其他表单，如列表或提供信息的自动完成表单，我想会更有用(但工作要多得多，而且不属于REC，当然)。

我记得在HTML4.01/XHTML1.0中使用了这个法语XHTML1.1可点击资源：李。它是法文的，但这只是一个例子，用蓝色命名元素的名称、它的预期用途、(属性blah)和下面(太小)文本与可能的父母和孩子(Liste deséléments enfants)，红色的颜色是必须有孩子的元素(不可访问的编码依赖于颜色btw)。

否则，优秀的资源HTML5doctor有一个按字母顺序排列的索引：http://html5doctor.com/element-index/

关于HTML5验证，而不是SGML、DTD、模式等，在这个SO线程中有很好的问题、答案和链接：关于html5 dtd/模式的另一个问题。

Answer 2

如果您正在寻找一种图形化的方法来表示HTML元素的允许内容，那么我建议使用一组语法图 图解是合适的。(语法图有时被称为铁路图)。

例如，JSON规范使用了一组语法图，有些人认为这种格式的可理解性有助于它的接受。有关编程生成SVG图的更多细节，请参见基于json.org的铁路运行图生成工具。

为了举例说明，请尝试将以下内容(不完全EBNF)粘贴到“编辑语法”选项卡下的http://bottlecaps.de/rr/ui中，然后单击“查看图”：

head-element ::= "<head" global-attribute* ">" metadata-content* "</head>"

metadata-content ::= title-element | base-element |  link-element | meta-element | style-element

title-element ::= "<title>" text-content "</title>"
base-element ::= "<base" (href-attribute | target-attribute | (href-attribute target-attribute)) ">"

这个工具的一个好处是你可以给它提供不完整的EBNF，并且它仍然是图表。