Proper use of divisions? (was Re: What should I use for centering (DIV or P))

Abigail writes:

> You, Heikki Vesalainen wrote:
> ++ I'm making some HTML pages for the big public and I really don't know
> ++ should I use <DIV ALIGN=CENTER> or <P ALIGN=CENTER>.
> 
> What I suggest is that you first logical markup your document
> without bothering about layout specific attributes.
> 
> Then, after you have finished doing that, you add the 'align = center'
> attributes. If you have used <div> in your document, you can use
> <div align = center>. If it's only <h?> and <p>, you use
> <h? align = center> and <p align = center>.
> 
> The logical markup of the document is far more important than the layout
> hints. The attributes go with the elements; one doesn't use elements
> for the attributes.

I agree with this 100%. I have just one more small thing to add: if you
find yourself writing something like this:

    <H2     ALIGN=CENTER> heading                        </H2>
    <P      ALIGN=CENTER> paragraph paragraph paragraph. </P>
    <P      ALIGN=CENTER> paragraph paragraph paragraph. </P>
    <TABLE  ALIGN=CENTER> <!-- table stuff -->           </TABLE>
    <P      ALIGN=CENTER> paragraph paragraph paragraph. </P>

you might want want to stop and think, "Why am I centering all this stuff?
Does it form some sort of logical section of the page?" If it does, it might
be better as:

    <DIV ALIGN=CENTER CLASS=SOMETHING-MEANINGFUL>
      <H2>    heading                        </H2>
      <P>     paragraph paragraph paragraph. </P>
      <P>     paragraph paragraph paragraph. </P>
      <TABLE> <!-- table stuff -->           </TABLE>
      <P>     paragraph paragraph paragraph. </P>
    </DIV>

FWIW, here's something I wrote a while ago about how I think <DIV>
(and headings) should be used. (skim the first part to get to the stuff
on DIV, if you want.)

From: gerald@cs.ualberta.ca (Gerald Oskoboiny)
Newsgroups: comp.infosystems.www.authoring.html
Subject: Appropriate use of headings (was Re: The BEST reason of all not to write pages for Netscape)
Date: 14 Jul 1995 17:48:31 GMT
Message-ID: <3u6alf$p0f@scapa.cs.ualberta.ca>

| Russ Allbery <rra@genesis.gvg.tek.com> writes:
| 
| >Russ Allbery  <rra@genesis.gvg.tek.com> writes:
| >>Gerald Oskoboiny <gerald@cs.ualberta.ca> writes:
| 
| [ discussing http://www-cs-students.stanford.edu/~rra/, which includes
|   the following markup:
| 
|      <html>
|      <head>
|      <title>Russ Allbery</title>
|      </head>
| 
|      <body>
| 
|      <h1 align=center>Russ Allbery</h1>
|      <h3 align=center>
|      Master's Student<br>
|      Computer Science Department, Stanford University<br>
|      <a href="mailto:rra@cs.stanford.edu">rra@cs.stanford.edu</a>
|      </h3>
| ]
| 
| >>>In general, this page is very well done. I don't think the <blockquote>
| >>>is used correctly, and the first <h3> definitely isn't (just think what
| >>>someone would see if they were viewing an automatically-generated table
| >>>of contents for this page, based on the heading levels),
| 
| To clarify the point I was making here about automatically-generated
| tables of contents, this is what such a table could look like for this
| page, grabbing <h?>'s and indenting successive levels with 4 spaces:
| 
| 1  Russ Allbery
| 
|         1.1.1  Master's Student / Computer Science Department, Stanford University / rra@cs.stanford.edu
| 
|     1.2  General Information
| 
|         1.2.1  Positions
| 
|     1.3  Interests
| 
|         1.3.1  Computer Graphics
|         1.3.2  The Internet
|         1.3.3  Web Design
| 
| Notice how, with the exception of "1.1.1", your use of headings allows for
| a sensible table of contents to be constructed with very little effort.
| (I used ' / ' in place of the original <br>'s in that heading, which isn't
| necessarily the best way to do things.)
| 
| If you had used the heading levels in a more appropriate way (IMO), you
| could have a structure like this:
| 
| 1  Russ Allbery
|     1.1  Welcome! 
|     1.2  General Information
|         1.2.1  Positions
|     1.3  Interests
|         1.3.1  Computer Graphics
|         1.3.2  The Internet
|         1.3.3  Web Design
| 
| If headings are used like this, I can make a table of contents for any
| arbitrary set of URLs by writing a program to download each one and list the
| contents of the <h?> headers. Also, browsers could have some sort of "outline
| mode" or an extra panel for heading-navigation, such as the one discussed at
| <URL: http://www.ncsa.uiuc.edu/SDG/IT94/Proceedings/HCI/hsu/hsu.html >.
| (This is a feature I wish some mainstream browsers would implement).
| 
| >>I can cope with both of those.  The <h3> *does* do exactly what I want it to
| >>do with search engines, not to mention display in browsers.
| >
| >And furthermore, according to the HTML 3.0 standard, it looks like you're
| >wrong.  To quote:
| >
| >       Use the DIV element together with header elements when you
| >       want to make the hierarchical structure of a document
| >       explicit.  This is needed as header elements themselves only
| >       contain the text of the header, and do not imply any
| >       structural division of documents into sections.
| >
| >And there is no mention at all of not using <h3> immediately after <h1>
| >without <h2>.  An indexer built on that assumption is therefore broken by
| >specifications, so there's no reason for me to author for it any more than I
| >should author for Netscape.  The elements that I have in header tags are
| >certainly part of the document header.
| 
| I disagree. My reading of the proposed HTML 3.0 spec. suggests that <DIV>
| is to be used for meta-sections *along with headings* to indicate document
| structure. So, for instance, you could have a document like this:
| 
| <title>Something Lame</title>
| <div class=abstract>
|    <p>
|      This is the abstract of the paper. Wow, structure-based markup is great!
|    </p>
| </div>
| 
| <div class=section>
|    <h1>Some Really Boring Subject</h1>
|    <p>
|       In this section, I'll discuss something really boring, starting
|       with a chapter on X.
|    </p>
| 
|    <div class=chapter>
|    <h1>A Chapter on X</h1>
|       <!-- blah blah blah -->
|    </div>
| 
|    <div class=chapter>
|    <h1>A Chapter on Y</h1>
|       <!-- yadda yadda yadda -->
|    </div>
| </div>
| 
| <div class=section>
|    <h1>An Equally Boring Subject</h1>
|    <!-- similar to previous section -->
| </div>
| 
| <div class=appendix>
|    <h1>Something Useless to Most Readers</h1>
|    <!-- ... -->
| </div>
| 
| <div class=appendix>
|    <h1>More Useless Information</h1>
|    <!-- ... -->
| </div>
| 
| (Note: I'd be surprised if this is actually a valid way to do things, but
| it's good enough for this example.)
| 
| A summary of this document could be rendered as:
| 
|                                 SOMETHING LAME
| Abstract:
|      This is the abstract of the paper. Wow, structure-based markup is great!
| 
| Part I: Some Really Boring Subject
|    Chapter 1. A Chapter on X
|    Chapter 2. A Chapter on Y
| 
| Part II: An Equally Boring Subject
| 
| Appendix A: Something Useless to Most Readers
| 
| Appendix B: More Useless Information
| 
| Note that both the headings and the divisions are used to form structure.
| This is consistent with my reading of the "Headings" and "Divisions"
| sections of the HTML 3.0 draft. With this kind of markup, I could do Web
| searches like "find me all papers with abstracts containing the phrase
| 'structure-based markup'", or "find me all appendices discussing
| 'Something Useless'".
| 
| This is also consistent with a section of Tim Berners-Lee's style guide at
| <URL:http://www.w3.org/hypertext/WWW/Provider/Style/DeviceIndependent.html>,
| which says:
| 
|    Always use heading levels in order, with one heading level 1 at the
|    top of the document, and if necessary several level 2 headings, and
|    then if necessary several level 3 headings under each level 2 heading.
|    If you don't like the way heading level 2 is formatted, fix it on
|    your client, don't just skip to heading level 3.
| 
| I realize this was written quite a while ago, but it's still accurate, IMO.
| (And yes, this means I'm disagreeing with Michael Kelsey, which pains me,
| but, well, I disagree).
| 
| >Based on that, I'll withdraw my complaint that I can't do subtitles in HTML.
| >It may also be possible to indicate the author and date of a paper that way
| >too, but I still think that information carries additional content that
| >should be indicated in some way.
| 
| It might be reasonable to include some support for subtitles in HTML;
| I think it's not there now since it would've unnecessarily complicated
| the language. You could do something like
| 
|    <title>Caring for Your Guinea Pig: Toenails</title>
| 
| but I realize this is unwieldly for technical papers with long, ugly titles.
| 
| If you want this to be part of HTML, put together a proposal which explains
| exactly why it's needed, how it's not currently covered by HTML, how it
| could be interpreted on a variety of platforms, and a proposed syntax, then
| post it here or on the www-html mailing list for discussion. If, after a bit
| of discussion, people generally agree it's needed, you can submit to the
| HTML Working Group for inclusion in the standard. (similarly for authorship
| and dates, but I think authorship is handled well enough with <ADDRESS>,
| <LINK REV="made" ... >, and possibly some <META>s).
| 
| Gerald

I actually think HTML would be better off if we scrapped H[1-6] and went
with generic <SECTION> and <HEADING> (or <DIV> and <TITLE>) elements, and
used nested SECTIONs to create a document's structure. Then people wouldn't
be able to use <H[1-6]> to (try to) change font sizes, which is a personal
peeve of mine. I'm not sure that such a change to HTML would be practical
at this point, though.)

To encourage people to use headings properly, I have a "show an outline
for this document" option on my HTML validator [1] that creates an outline
based on <H[1-6]> headings for any given URL. (I think this feature is
also provided as part of the htmlchek package, but I don't think there
are any Web interfaces to it?) I don't do anything interesting with <DIV>
yet, though...

Gerald
[1] http://ugweb.cs.ualberta.ca/~gerald/validate/
-- 
Gerald Oskoboiny  <gerald@cs.ualberta.ca>  http://ugweb.cs.ualberta.ca/~gerald/

Received on Monday, 15 April 1996 21:00:30 UTC