2

In HTML5 each element belongs to zero or more categories. Each element has a content model defined by zero or more categories.

In SO there is a lot of questions like: Can I put element A inside element B.

My question is: How to effectively build a visual represention of the content model?

Is it possible to generate a graph from a subset of elements in a synthetic way understandable by HTML5 users?

--EDIT--

This the kind of graph I want to generate. The arrows means can-be-inside. Example of a content model graph

In some case, they will be conditions on arrows.

Conditions: (1) Transparent, but there must be no interactive content descendant.

Ortomala Lokni
  • 56,620
  • 24
  • 188
  • 240
  • [This Venn diagram from the WHATWG doc](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#kinds-of-content) illustrates how the content models are related, i.e., if **Phrasing** is inside **Flow** then an element categorized as **Phrasing** content is also considered **Flow** content as well. That should be of some help. – chharvey Aug 06 '14 at 18:57

2 Answers2

2

In HTML5 Reference - The Syntax, Vocabulary and APIs of HTML5 - The elements (W3C 2010), you've for each element a list of the categories it pertains to, which elements can contain it and its content model...

… and good luck with that! As a related example, here's a graph for WAI-ARIA roles and their aria-* something: graph. It's so complex and with tiny text... Other forms like a list or an autocomplete form giving information would be more useful I guess (but far more work and it doesn't go in a REC, sure).
I remember using, for HTML 4.01/XHTML 1.0, this french XHTML 1.1 clickable resource: li. It's in french but that's just an example of giving a title in blue with the name of the element, its intended use, (attributes blah) and below (too tiny) text with possible parents and children (Liste des éléments enfants) with red color being for elements that must have children (inaccessible coding relying on color btw).

Otherwise the excellent resource HTML5doctor has an index by alphabetical order: http://html5doctor.com/element-index/
On HTML5 validation, not SGML, DTD, schema, etc, good question, answers and links in this SO thread: Yet another question regarding the html5 dtd/schema

Community
  • 1
  • 1
FelipeAls
  • 21,711
  • 8
  • 54
  • 74
1

If your looking for a graphical way to represent the allowable content of an HTML element, I would suggest a set of Syntax Diagrams http://en.wikipedia.org/wiki/Syntax_diagram would be appropriate. (Syntax Diagrams are sometimes called Railroad Diagrams.)

The JSON spec for example uses a set of syntax diagrams, and some believe the understandably of this format this has been helpful in its acceptance. See Tool for generating railroad diagram used on json.org for some more detail about producing SVG diagrams programatically.

To illustrate, try pasting the following (incomplete EBNF) into http://bottlecaps.de/rr/ui under the "Edit Grammar" tab and then click "View Diagram":

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)) ">"

A nice thing about this tool is you can feed it incomplete EBNF, and it will still diagram.

Community
  • 1
  • 1
Burt_Harris
  • 6,415
  • 2
  • 29
  • 64
  • I'm not so interrested in the syntax but more in the "can-be-inside"-relationship between elements. – Ortomala Lokni Jul 16 '14 at 12:45
  • I'm thinking syntax and "can-be-inside" are near equivalent. Would a element be a good example? Now the EBNF you use to generate appropriate diagrams wouldn't necessarily be the same as what you use to write a parser, but it depends on just how "strict" you want the diagrams to be. I'll edit my answer and put a sample in. – Burt_Harris Jul 16 '14 at 17:49
  • OK, I think the example shows how this could be used. There's lots you *might* choose to tweek, e.g. - Eliminate the global-attribute reference (to simplify) - Make the tag optional - Show how the tag can be omitted Since we're not talking about using this EBNF to build a parser, just generate diagrams, its a matter of style. – Burt_Harris Jul 16 '14 at 18:19
  • According to this [article](http://trevorjim.com/a-grammar-for-html5/) the grammar of HTML5 is just `HTML5 = .*`. That's because HTML5 specification define how to parse errors. In my question, I'm interrested in the graph of the relation can-be-inside between HTML5 elements. – Ortomala Lokni Jul 18 '14 at 06:18
  • It's not a complete answer but I give you the bounty anyway. – Ortomala Lokni Jul 18 '14 at 11:54
  • Thank you sir. I agree, technically HTML := .*, but as I trust you understand that's a truism. Since it's so broad and permissive, it won't help anyone to diagram that. So a good diagram of the HTML tag would have to be authored to reflect some human's judgement of what "good" HTML looks like. – Burt_Harris Jul 18 '14 at 23:35