HTML5内容模型可视化

Question

在HTML5中，每个元素属于零个或多个categories。每个元素都有一个由零个或多个类别定义的content model。

在SO中有很多问题：我可以将元素A放在元素B中。

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

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

- 编辑 -

这是我想要生成的那种图形。箭头意味着可以在里面。

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

条件： （1）透明，但必须没有互动内容后代。

Answer 1

在HTML5 Reference - The Syntax, Vocabulary and APIs of HTML5 - The elements (W3C 2010)中，您为每个元素添加了与其相关的类别列表，哪些元素可以包含它及其内容模型......

...祝你好运！作为相关示例，这里是WAI-ARIA roles及其咏叹调的图表： graph 。它是如此复杂，文字很小......其他形式如列表或自动填充表单提供信息会更有用我想（但是更多的工作，它不会进入REC，当然）。
我记得在HTML 4.01 / XHTML 1.0中使用这个法语XHTML 1.1可点击资源：li。这是法语，但这只是一个用蓝色标题给出一个例子，其中包含元素的名称，它的预期用途，（属性等等）和低于（太小）的文本以及可能的父母和孩子（ Listedesélémentsenfants< / em>）红色用于必须有孩子的元素（依赖于颜色btw的不可访问的编码）。

否则优秀资源HTML5doctor按字母顺序排列索引：http://html5doctor.com/element-index/
关于HTML5验证，而不是SGML，DTD，架构等，这个SO线程中的好问题，答案和链接：Yet another question regarding the html5 dtd/schema

Answer 2

如果您正在寻找表示HTML元素允许内容的图形方式，我建议使用一组语法图 http://en.wikipedia.org/wiki/Syntax_diagram。 （语法图有时称为 Railroad Diagrams 。）

例如，JSON规范使用了一组语法图，有些人认为这种格式可以理解，这有助于它的接受。有关以编程方式生成SVG图的更多详细信息，请参阅Tool for generating railroad diagram used on json.org。

为了说明，尝试将以下（不完整的EBNF）粘贴到＆＃34; Edit Grammar＆＃34;下的http://bottlecaps.de/rr/ui。选项卡，然后单击＆＃34;查看图表＆＃34;：

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，它仍然会图。