HTML structure by heading idea

To Dan Connolly



Hi, my name is David Smith and I have the following idea for HTML:

To give people the ability/option to use the HTML headings 1-6 as the 
structure for their document. In doing so reducing the need for extra 
markup, like div elements, and more importantly more power to CSS to 
style the structure.




Detail:

Correctly marked-up HTML documents apply the numbered headings, h1 to 
h6, in a logical and hierarchical way. From a human perspective (or at 
least my perspective) all elements that occur after the first h1 
declaration are considered to be children of the h1 node. If there was a 
second h1 then only the elements that occur between two h1s would be 
children of the first h1 and all those after would be children of the 
second. So, in effect a document structure can be built from the heading 
elements. For example by using spaces to indent according to the heading 
level then the structure of the document becomes clear:

<h1>Heading 1</h1>
        <p>Text</p>
        <h2>Heading 2</h2>
                <p>Text</p>
        <h2>Heading 2</h2>
                <p>Text</p>

There is one ambiguity with structuring like this and the following 
highlights this problem:

<h1>Heading 1</h1>
        <p>Text</p>
        <h2>Heading 2</h2>
                <p>Text</p>
        <h2>Heading 2</h2>
                <p>Text</p>
                <p>New text</p>

The final paragraph "New text" is intended to be a child of the h1 
element like the h2 element. However it would be structured as a child 
of the h2 element. This is because the h2 element remains open until a 
another h2 or h1 element is declared.

To clarify where the paragraph should be to the client, I would propose 
a 'parent' attribute be used. For example:

<h1>Heading 1</h1>
        <p>Text</p>
        <h2>Heading 2</h2>
                <p>Text</p>
        <h2>Heading 2</h2>
                <p>Text</p>
        <p parent="1">New text</p>

By setting the attribute 'parent' to 1, the client will know that it 
should associate the paragraph with a h1 element.




Why?

On a daily basis I fill HTML documents with many structural elements. 
Typically these are div elements but I have seen lists being used to 
structure the document where heading elements appear as list items. As 
result there is more HTML markup being written than necessary just to 
create structure.
Styling by heading structure would be easier as the manipulatation of 
blocks of information could be done without the need for the extra mark-up.
I could imagine scripting may be easier too because again blocks based 
on heading could be manipulated.




How?

HTML: An attribute called 'parent' with values 1-6 representing each 
heading.
CSS: Two pseudo classes 'whole' and 'children'.

The pseudo class 'children' would cause the client to create a pseudo 
element at the appropriate place. This is then stylable. For example:

CSS
h2:children{margin-left:2em;}

HTML
<h1>Heading 1</h1>
        <h2>Heading 2</h2>
                <psuedoElement>
                        <p>My lovely paragraph</p>
                        <p>My other lovely paragraph</p>
                </psuedoElement>
        <h2>Next Heading 2</h2>
                <psuedoElement>
                        <ul>
                                <li></li>
                        </ul>
                </psuedoElement>

The screen output would show a 2em margin at the left of the two 
paragraphs and the unordered list. The headings would be flush to the left.

The pseudo class 'whole' would cause the client to create a pseudo 
element at the appropriate place and also select the heading element. 
For example:

CSS
h2:whole{margin-left:2em;}

HTML
<h1>Heading 1</h1>
        <h2>Heading 2</h2>
                <psuedoElement>
                        <p>My lovely paragraph</p>
                        <p>My other lovely paragraph</p>
                </psuedoElement>
        <h2>Next Heading 2</h2>
                <psuedoElement>
                        <ul>
                                <li></li>
                        </ul>
                </psuedoElement>

The screen output would show a 2em margin at the left for everything 
except the h1 element.




I hope that you receive this and that it could be in anyway useful.

Yours sincerely,
David Smith

Received on Friday, 15 June 2007 19:14:35 UTC