Simplicity in HTML structure

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Most of the web pages whose source I look at have a very elaborate
structure (even apart from any massive use of Javascript), often with
div in div in div layered up to six deep, lots of classes and spans all
over.  I usually can't follow exactly why they are so elaborate (I know
some are containers to avoid browser bugs).

In addition to attempting to retrofit a more semantic structure on
pages, I have been trying to reduce the complexity of how I write my own
pages (so I can understand them and more easily write scripting tools),
and seem to be headed towards:-

<html lang="en"> (not styled as I use HTML 4.01 Strict)
<body id="css-signature" class="thisfolder thisfile">
    <div id="maintext">
              <p class="first"></p> (special treatment)
               rest of main text, with appropriate h2 h3 etc.
    </div><!--  maintext closed -->
    <ul class="nav"> ... </ul>
    <ul id="header"> ... </ul>
    <ul id="footer"> ... </ul>

The CSS-Signature is as per Eric Meyer and others, for styling use by
others.  The body class "thisfolder" refers to the folder name for each
collection of pages, reflects the structure of my web site, and is
intended for styling of each folder collection separate from any site
wide style sheet.  The class "thisfile" is a placeholder for styling a
specific page.

I am thinking that some additional types of web page will need their own
class.  For instance, perhaps a separate class for all index.html pages.  
Also, some pages may have one or two additional div, at the same level
as the maintext div, where some of the content is on a different topic.  
For example, a magazine may have editorial matter in the maintext div,
book reviews in their own div, and comments in their own div.

Does anyone have any comments regarding the quest for simplicity, and
freedom from multiple div and span.  Especially with regard to whether I
am about to plunge over some problem cliff that all the rest of you can
clearly see and that I am missing entirely?

Valid test page at and
stylesheet at

This almost certainly will not render correctly with any version of IE,
but that is a separate problem, as are my many remaining stylesheet
issues.  It should work fine in HTML only browsers, and (with some
browser to browser differences) modern CSS browsers.


Re: Simplicity in HTML structure

Quoted text here. Click to load it

I think the most common explanation is complicated layout and an attempt to
achieve it as simply as possible. In a sense, it's the counterpart of
complicated nested tables, and usually a lesser evil.

Quoted text here. Click to load it

I'm not sure I see what you mean by styling here. But the tag is OK, for
dominantly English-language pages, assuming that you do not wish to
distinguish between "en-GB", "en-US", "en-AU" (which is quite understandable
since among the few programs that recognize lang attributes, some don't
recognize anything but a value with a simple primary code like "en").

Quoted text here. Click to load it

I can see the points behind this, but I don't think they are very relevant.
And instead of a class like "thisfile", I would you a file-specific style
sheet, referred to via a <link> element, or (to be honest) even a <style>

Quoted text here. Click to load it

Looks fine, assuming that the header is really meant to be there in a non-CSS

Logically, class="first" is not needed, since you can use contextual
selectors instead. But since IE does not support such fancy selectors as
h1 + p or p + p, there's a good practical reason for using the class,
if you intend to do some paragraph styling like "literary paragraphs".

On similar grounds, you would not need id="maintext" if you used the pattern
consistently on all pages. You could use e.g. body > div (or, to guard
against some modifications to your pattern, body > div:first-child) to refer
to a div element that is a child of body (or the first child of body).
But we have IE, and we could also argue that the logically redundant id and
class attributes may serve as comment-like notes about the markup structure.

Yucca, /
Pages about Web authoring:

Re: Simplicity in HTML structure

Quoted text here. Click to load it

On styling, I was meaning avoiding any classes applied to <html> and any
CSS like * html { ... }  and applying any of these via the <body> tag.  
This was purely because of using HTML 4.01 Strict instead of XHTML.

I was tempted by "en-AU" since some of my text deliberately contains
Australian vernacular, however an earlier discussion in this group
convinced me it was better to stick with just the primary code.

Quoted text here. Click to load it

I was (and still am) uncertain that I want to include a class like
"thisfile".  However I was mindful that since any CMS I write will be
aware of the folder name and the file name, both seemed a convenient
"hook" for styling.  I already use folder specific CSS files, which do
all the styling.  What I was hoping to do during my rewrite was to
abstract much of the site CSS to a site specific style sheet.  As my
site grew rather organically, it is still too disorganised to do so
until I rewrite.

Interesting that you suggest the pragmatic approach of just using a
<style> element instead of a "thisfile" hook. I somehow picked up the
idea that using a style element like this was not the approved method.  
Since almost the only thing I can see wanting to do with the "thisfile"
hook for every file is to identify the current location in the
navigation, using a <style> element would probably be just as easy.
Quoted text here. Click to load it

I am anxious to have my h1 and other headings, and my main content first
in the page, right after the <body> tag, since this seems to help make
search engines happy.  Hence the "header" is fairly low in the written
page.  I put the "header" back where it should appear with

Quoted text here. Click to load it

"Literary paragraphs" were indeed why I wanted to target the first
paragraph.  While I had read of contextual selectors like h1 + p, I
didn't have any experience of using them.  Thank you for pointing out
that they are a valid way of replacing "first" (except for IE).

Quoted text here. Click to load it

I was actually (unconsciously I guess) using div id="meaningful" as a
way of commenting the markup structure.  I also used </div><!--
meaningful closed --> to indicate the end of specific divs, although if
a </div> was ever missed or done twice, the  comment no longer had any

I must admit I also have a bit of an eye on the development of my CMS,
which is only a series of Bash scripts at the moment.  Having particular
content between meaningful tags would make it much easier for me to use
sed to edit files.  I am particularly thinking of the scripting
potential for incorporating comments and emails into a static site, in a
similar manner to the way blogs work (except I want human oversight
before comments get passed along to the script).

Thank you for your thoughtful comments Jukka. I have an experimental
page up at
While the CSS is still very rough, I think I am gradually finding how I
want the HTML to go (while still keeping it sufficiently simple for me
to mostly generate with scripts).  The page works fine with HTML only
browsers (a significant  part of my PDA using audience), and with modern
CSS browsers.  It breaks in IE, but that is an entirely separate problem
which I will try to address with a conditional comment.  Also there are
several (PDA, and Apple specific) parts of my site where I don't care if
IE breaks.


Site Timeline