W3C home > Mailing lists > Public > www-style@w3.org > April 2005

Re: Wrapping paragraphs around blocks

From: Barry <wassercrats@hotmail.com>
Date: Sun, 3 Apr 2005 10:02:00 -0400
Message-ID: <BAY102-DAV9AF20A37EC12A09EEDC10B93A0@phx.gbl>
To: "R.J.Koppes" <rikkert@rikkertkoppes.com>, <www-style@w3.org>

R.J.Koppes wrote:
> Bottom line: div is not as meaningless as one might think. Use it to make
> up chapters and subchapters

The current specs agree with your use of wrapping a heading and the headed
content in div tags:

------------------------------------
 http://www.w3.org/TR/html401/struct/global.html#h-7.5.5 :
7.5.5 Headings: The H1, H2, H3, H4, H5, H6 elements

The following example shows how to use the DIV element to associate a
heading with the document section that follows it. Doing so allows you to
define a style for the section (color the background, set the font, etc.)
with style sheets.

<DIV class="section" id="forest-elephants" >
<H1>Forest elephants</H1>
<P>In this section, we discuss the lesser known forest elephants.
..this section continues...
<DIV class="subsection" id="forest-habitat" >
<H2>Habitat</H2>
<P>Forest elephants do not live in trees but among them.
..this subsection continues...
</DIV>
</DIV>
------------------------------------

But that's not recommended for the future:

------------------------------------
http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-structural.html#sec_8.4.
8.4. The div element

The div element, in conjunction with the id and class attributes, offers a
generic mechanism for adding extra structure to documents. This element
defines no presentational idioms on the content. Thus, authors may use this
element in conjunction with style sheets, the xml:lang attribute, etc., to
tailor XHTML to their own needs and tastes.

..

For example, suppose you wish to make a presentation in XHTML, where each
slide is enclosed in a separate element. You could use a div element, with a
class of slide:

<body>
    <h>The meaning of life</h>
    <p>By Huntington B. Snark</p>
    <div class="slide">
        <h>What do I mean by "life"</h>
        <p>....</p>
    </div>
    <div class="slide">
        <h>What do I mean by "mean"?</h>
        ...
    </div>
    ...
</body>
------------------------------------

Instead, you would use the section element:

------------------------------------
http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-structural.html#sec_8.8.
8.8. The section element

The section element, in conjunction with the h element, offers a mechanism
for structuring documents into sections. This element defines content to be
block-level but imposes no other presentational idioms on the content, which
may otherwise be controlled from a style sheet.

By representing the structure of documents explicitly using the section and
h elements gives the author greater control over presentation possibilities
than the traditional implicit structuring using numbered levels of headings.
For instance, it is then possible to indicate the nesting of sections by
causing a border to be displayed to the left of sections.

Here is an example

<body>
<h>Events</h>
<section>
    <h>Introduction</h>
    <p>....</p>
    <h>Specifying events</h>
    <p>...</p>
    <section>
        <h>Attaching events to the handler</h>
        <p>...</p>
    </section>
    <section>
        <h>Attaching events to the listener</h>
        <p>...</p>
    </section>
    <section>
        <h>Specifying the binding elsewhere</h>
        <p>...</p>
    </section>
</section>
------------------------------------

There's a related discussion at
http://www.accessifyforum.com/viewtopic.php?t=2442 .

On the webpage I'm working on, I currently wrap groups of paragraphs in div
tags. I realize that's not semantically incorrect, at least for now. My
original problem was that I couldn't use a commonly used technique for
wrapping paragraph text around a block, where some of the text is above the
block being wrapped and some of the text of the same paragraph is to the
side of the block being wrapped. The common method is to place an image
within the paragraph that you want wrapped around the image, but I wanted to
wrap a list which can't be placed within a paragraph, so I thought I had to
use a <div> instead of a <p>, which would change the semantics.
Received on Sunday, 3 April 2005 14:01:58 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:36 GMT