Posted by Steve Pugh on 02/18/07 19:23

rem642b@yahoo.com (robert maas, see http://tinyurl.com/uh3t) wrote:

>Also, what's the proper HTML way to build a hierarchial table of
>contents?
>
>Table of contents:
> * Chapter 1: "before the Earth"
> - Section: "Synthesis of hadrons"
> - Section: "Condensation of plasma"
> - Section: "Formation of galaxies"
> * Chapter 2: "Earth before life"
> - Section: "Formation of Moon"
> - Section: "Late Heavy Bombardment"
> * Chapter 3: "Life before eukaryotes"
> - Section: "First replicators"
> - Section: "DNA takeover"
> - Section: "Photosynthesis"

<div class="toc">
<h2>Table of Contents:</h2>
<ul>
<li>Chapter 1: "before the Earth"
<ul>
<li>Section: "Synthesis of hadrons"</li>
<li>Section: "Condensation of plasma"</li>
<li>Section: "Formation of galaxies"</li>
</ul>
</li>
<li>Chapter 2: "Earth before life"
<ul>
<li>Section: "Formation of Moon"</li>
<li>Section: "Late Heavy Bombardment"</li>
</ul>
</li>
<li>Chapter 3: "Life before eukaryotes"
<ul>
<li>Section: "First replicators"</li>
<li>Section: "DNA takeover"</li>
<li>Section: "Photosynthesis"</li>
</ul>
</li>
</ul>
</div>

>How should that *structure* be specified in HTML?
>It should render in all browsers vaguely like I drew it above, but
>the details don't matter so long as it's obvious from the rendering
>what the underlying orgaization is. For example, if it renders like
>this:
>
>Table of contents:
> * Chapter 1: "before the Earth"
>
> - Section: "Synthesis of hadrons"
> - Section: "Condensation of plasma"
> - Section: "Formation of galaxies"
> * Chapter 2: "Earth before life"
>
> - Section: "Formation of Moon"
> - Section: "Late Heavy Bombardment"
> * Chapter 3: "Life before eukaryotes"
>
> - Section: "First replicators"
> - Section: "DNA takeover"
> - Section: "Photosynthesis"
>
>That's grossly wrong because the visual effect is to lump the title
>for chapter 2 with the sections for chapter 1, etc., confusing the
>user/reader who is trying to figure it all out.

Most browsers will render the HTML I gave without such blank lines.
The only blank line is between the heading and the list. That can be
fixed with CSS and will have just be accepted for non-CSS browsers.

>> I think you will find, ... that the W3C has nothing particular to
>> say about spacing before or after a UL or OL element, although it
>> is a block-level element (like <p>, <pre>, or <hr>).
>
>So it would be perfectly reasonable/allowable if some browser would
>render the nested UL/LI/UL/LI structure that horrid way I showed
>just above??

Yes. The details of presentation are outside the scope of HTML. HTML
is about semantics and logical structure. Presentation is the domain
of CSS.

> So is there any HTML that would specify such a nested
>table of contents properly, even if some browsers render it as
>garbage, at least it's structurally *correct* per HTML standards?

See above. Note that the <ul>s for the sections are inside the <li>s
for the chapters. It's a common mistake to do something like this:

<li>Chapter 1: "before the Earth"</li>
<ul>
<li>Section: "Synthesis of hadrons"</li>
<li>Section: "Condensation of plasma"</li>
<li>Section: "Formation of galaxies"</li>
</ul>

But as you use a validator you probably wouldn't fall into that trap
as this is invalid code.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

[Back to original message]