3.1 H1, H2, etc.

The tab <h1> is top level header, <h2> is second (from top) level header, and etc. What’s wrong with these tags?

First of all, the text of content under a header has no explicit representation. Let us consider the example in listing 1.


Listing 1:nestedheader
 
1<h1>Presidents</h1> 
2  <h2>George W. Washington</h2> 
3    Accomplishments of George W. Washington. 
4  <h2>George W. Bush</h2> 
5    Accomplishments of George W. Bush. 
6<h1>Vice presidents</h1>

It is “quite clear” that the first section about presidents ends on line 5. Or, is it?

It is implied that all the content from the first <h1> tag up to the last line before the next <h1> tag is a part of the first header. This implied structure is the first violation of the concept of separating content from presentation.

Now, let us consider how this code is presented. Although CSS can be used to specify the exact style of text in <h1> and <h2> tags, CSS cannot change the way information is presented. In other words, the text Presidents is always followed by George W. Washington, and etc.

Not only is the order specific, the style of presentation is also fixed. There is no way to present the content as a table or a bulletted list.

To further illustrate the lack of structural concept, let us consider the HTML code in listing 2


Listing 2:badnestedheader
 
1<h1>Presidents</h1> 
2  <h3>George W. Washington</h3>  
3    Accomplishments of George W. Washington. 
4  <h4>George W. Bush</h4>  
5    Accomplishments of George W. Bush. 
6<h1>Vice presidents</h1>

This is legitimate HTML code! However, you can see that lines 2 and 4 do not follow the logic of nesting.

The lack of structural support and rule enforcement means that HTML does not really care about the content of a document. The tags <h1> and etc. are mostly used by content creators to control the presentation of text, not the structure of content!