I am looking to understand the official fundamentals of HTML document tree creation. There are numerous examples of HTML document trees on the web however I have not been able to find formal or official definitions or rules of how to create the HTML document tree. There are some HTML document tree generating sites but they do not source where they are getting their rules and they even give different results for the same code. For example take the following simple code for an HTML body:

<h1>h1 tag here</h1>
<h2>h2 tag here</h2>

Some tree generators will show h2 tags as children of h1, but some will make h2 its own parent node independent of h1. The rules must be specified somewhere. Where might I find those? The html.spec.whatwg.org does not seem to specify how tags are to fit into a document tree, so for example, if you look up the Section Element there is no statement about how it specifically should be handled if one were making a document tree (https://html.spec.whatwg.org/multipage/sections.html#the-section-element).


1 Answer 1


The current specification is known as the HTML Living Standard. Official fundamentals would need the target to stand still. Academia has put forth ... But they have no police powers and as such their structure is not in use.

Second the market pressure on browsers is that if the browser can discern the intent the source code it will and the browser should avoid giving the users an error message. So the market pressure is against a formal tree structure.

NOTE this is pre html5 ... In the formal academic structure; inline elements are or should be children of block elements. Block elements should not be children of inline elements.

This would look like ...

Body would be the initial block element. The header would be a block element of the body. a span or a link (anchor tag) would be an inline element of a block. However, outside of halls of academia, this structure was never used.

Many times people need to use a block, such as a header or an image, as a link and use an anchor tag, which is making a child block from a parent inline element.

So the formal academia hierarchical structure is not in use, nor would it apply directly to ELEMENT tags because they can be changed from block to inline at will with CSS. And, the HTML5 spec allows for people to create their own HTML element tag at will, (although without a reasonable use case doing so is not a best practice).

So there are only a few tree structures in use:

  • A page only has one body and all displayed content goes in that body. Enforced by the browser.
  • For headlines the spec was intended to have one h1 tag per page although the use case of two is common, being an h1 for brand and a h1 for the on-page displayed title. Enforced by Search Engines do to lobby pressure from those who want page outlines to exist.
  • Certain elements are children of parent elements ... IE summary is a child of details; DD (dictionary description) is a child of DT (dictionary term). etc. Needed for functionality.

I don't know if there exists a formal list of which elements are to be children; But I suspect it would be ignored as there are people who would repel against being told what they must do. On the other hand, coders need to work together, so they develop best practices.

Specifics for the H1 H2 tags

These are semantic tags intended to create an outline structure of the page. Best practice (ref https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements ) is the h1 tag is the main headline and all h2 tags used on the page are listed in an outline under the h1 tag. all h3 tags are under h2 tags ...

The common usage is not in line with the semantic intent of the tags. People are using them to make text bigger or smaller, which is the visual effect.

Mozilla also gives best practices of all the other semantic tags.

Side Note

Some HTML structures can not be parsed and the browser decides how it will render these situations.

Bad this can not be parsed !!! IE what color is the italic text?

<span style="color:red">this is <i> an </span> example</i>

Browser side fix.

<span style="color:red">this is <i> an </i></span><i> example</i>

Browser must fix!

<p> this is <div style="display:block">a</div>example</p>

will get turned into (by the browser)

<p> this is </p><div style="display:block">a</div><p>example</p>

Hence the inline elements should not be a parent of a block element is not without its consideration.

But this use case

<a href="http://example.com">
   <div style="display:block">Go to example.com</div>

is a use case ... may get turned into

<a href="http://example.com" style="display:undeclared-block">
   <div style="display:block">Go to example.com</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.