28 March 2010

Semantic Page Divisions

I’ve been trying to determine the best way to avoid class names that use presentational language to describe the content of an HTML page. Terms such as “header”, “footer” and “sidebar” refer to locations in a layout, so they refer to the way information is presented. Depending on the medium, this presentational information may be irrelevant.

The divisions of the page can be subdivided into classes that correspond to the hierarchy of the content.

  • A page has many parts.
  • Each part of the page has many areas.
  • An area is divided into sections.
  • A section has many subsections.
  • A section can contain content.
  • A subsection can contain content.
  • There can be several blocks of content.
  • Within each block, there can be many units of information.

Visually, the structure might look something like this:

                  + page
    + part
        + area
            + section
                + subsection
                    + content
                        + block
                            + unit


So, let’s try to put this into a sentence and see if if makes sense:

This unit of this block of this content of this subsection of this section of this area of this part of the page.

That seems to work. And it’s all very semantic.