thoughts
[HTML] general structure
2005-04-25 modified: 2005-08-05
In this article I will address the general structure of HTML, I will make a seperation in three types of elements and hope to clarify why particular (DTD based) restrictions exist.
Readers might already be familiar with the seperation of HTML elements in inline-level and block-level elements, but I would like to add another group of elements, the structure-level elements. All these three groups operate on a seperate level.
Inline-level elements
I think I can be really short on this. Inline-level elements are the elements that add special meaning to (groups of) words and they appear inline in the flowing text. Examples are the <em> and <strong> elements. These are the elements that are referred to as %inline; in the HTML 4.01 DTD.
Block-level elements
Block level elements are those that make up the greater structure of your page, these include <p>, the heading elements (<h1> to <h6>), the list elements (<ul>, <ol> and <dl>) and things like <table> and <address>. Essentially, everything that makes a chapter.
Now, if one takes a look at the definition of %block; in the same HTML 4.01 DTD, you see I have not mentioned some you might have expected, intentionally.
Structure-level elements
Five elements that are special to the general structure in your ducument are <div>, <blockquote>, <map>, <form> and <fieldset>. I claim that these elements are hierarchically more important than the block level elements I discussed before. As I have mentioned in other articles, <div> makes up a (hierarchy of) chapter(s) and sections, <blockquote> depicts a "foreign" section. The <map> element does essentially the same, only this time it does not describe ordinary chapters, but navigational structures. The <form> element is the same story, but now it is about interaction. <fieldset> elements are sectioning elements within a form.
Think of this structure as a book, <div> represents ordinary chapters and sections. These chapters are filled with paragraphs, tables, lists, quotes and more alike (block-level elements). <blockquote> has the same story, but now for quoted content. The <map> element represents navigational "chapters", like a table of contents, a bibliography or an index. These special "chapters" are typically filled with lists of links, but may contain some paragraphs as well. Now the <form> represents the fill-out card for the purchase of the sequel or a request for your opinion about the book or something. This special kind of "chapter" of course consists of (lists of) fields, labels, but may also contain some paragraphs to clarify what it is all about.
Now the last structure-level element is the <body> element, the whole inner section of the book, the book as a whole conatins some more (head section of the document), but that's not in discussion now.
Note that the Web Application 1.0 working draft also talks about this in some way. They are called "sectioning elements" and <form> is not included. Therefore, I stick to this other nomenclature (structure-level elements).
Conclusion
So the message here is: keep this in mind when building a document
. Your code will be much more transparent. And several restrictions will make much more sense to you. You might have wondered why <map> and <form> elements only allow block-level elements inside in my opinion this should also be the case for <div>, but because of it's dual character it is not. It's because these elements operate on a higher level than (ordinary) block-level elements.
A complete document would have a typical (body) structure as follows:
<map>
<h1>Navigation</h1>
<ul />
</map>
<div>
<h1>All about my dog<h1>
<p /><ul /><table /><!-- etc -->
<div>
<h2>Subchapter</h2>
<p />
</div>
</div>
<form>
<h1>React</h1>
<p>something on the use of this form</p>
<fieldset>
<legend />
<h2>Subset</h2>
<p><label /><input /></p>
</fieldset>
</form>
Update 2005-08-05
I updated the above, because I realised fieldset elements are also sectioning elements (they are also "dedicated" div's). I also made the example form a little clearer.
Further reading
Additional resources (top 15)
Below is a list of additional resources that might contain extra information about the subject at hand. These are all sites linking to this one (i.e. backtracking).
