Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old January 23rd, 2006, 10:05 PM
Eric Lindsay
Guest
 
Posts: n/a
Default Simplicity in HTML structure

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">
<h1></h1>
<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>
</body></html>

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 http://www.ericlindsay.com/palmtop/palmnote.htm and
stylesheet at http://www.ericlindsay.com/palmtop/palmtoptest.css

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.

--
http://www.ericlindsay.com
  #2  
Old January 25th, 2006, 11:25 AM
Jukka K. Korpela
Guest
 
Posts: n/a
Default Re: Simplicity in HTML structure

Eric Lindsay <NOSPAmar2005@ericlindsay.com> wrote:
[color=blue]
> 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.[/color]

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.
[color=blue]
> <html lang="en"> (not styled as I use HTML 4.01 Strict)[/color]

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").
[color=blue]
> <body id="css-signature" class="thisfolder thisfile">[/color]

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>
element.
[color=blue]
> <div id="maintext">
> <h1></h1>
> <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>
> </body></html>[/color]

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

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, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

  #3  
Old January 26th, 2006, 12:25 AM
Eric Lindsay
Guest
 
Posts: n/a
Default Re: Simplicity in HTML structure

In article <Xns97568535ABCC9jkorpelacstutfi@193.229.4.246>,
"Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote:
[color=blue]
> Eric Lindsay <NOSPAmar2005@ericlindsay.com> wrote:[color=green]
> > <html lang="en"> (not styled as I use HTML 4.01 Strict)[/color]
>
> 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").[/color]

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.
[color=blue][color=green]
> > <body id="css-signature" class="thisfolder thisfile">[/color]
>
> 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>
> element.[/color]

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.
[color=blue][color=green]
> > <div id="maintext">
> > <h1></h1>
> > <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>
> > </body></html>[/color]
>
> Looks fine, assuming that the header is really meant to be there in a non-CSS
> presentation.[/color]

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
position="fixed".
[color=blue]
> 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".[/color]

"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).
[color=blue]
> 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.[/color]

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
meaning.

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 http://www.ericlindsay.com/palmtop/palmnote.htm
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.

--
http://www.ericlindsay.com
 

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles