Separating layout

The hypertext markup language (HTML) used to create the pages of the world-wide web began as a description for simple documents with hyperlinks. It supported headings, paragraphs, lists, and links. (Plus a handful of other things.)

Then tables were added. (Also notable was the addition of forms, but that’s another branch of the story.) Tables could not only be used to display tabular data, they could also be abused to create layouts beyond simply headings, paragraphs, and lists.

As styling was added to HTML, there was also a move to separate style from content, which brought us cascading style sheets (CSS).

There were problems with table-based layouts. To try to get away from the problems of table-based layouts, people have tried various HTML+CSS tricks. Many of which are based on a grid. Personally, I find these at least as troublesome as table-based layouts.

Perhaps we should separate content, style, and layout. HTML tables are, I think, a good way to describe a grid-based layout. If we, however, separate them from the content, does this eliminate or mitigate the problems we had with table-based layout?

OK, at this point, some understanding of HTML and CSS will be required.

Imagine a grid file containing mark-up similar to HTML tables. We’ll replace “table” with “grid”, “tr” with “row”, and “td” with “cell”. Cells support the rowspan and cellspan attributes. Cells contain CSS selectors that indicate what content from the HTML file should appear within that cell in the layout’s grid.

<grid>
  <row>
    <cell rowspan="2">div#header</cell>
  </row>
  <row>
    <cell>div#body</cell>
    <cell>div#rightsidebar</cell>
  </row>
  <row>
    <cell rowspan="2">div#footer</cell>
  </row>
</grid>

There’s probably a better way to describe layout, but I think HTML tables aren’t a bad start—once separated out. Personally, I’m not crazy about SGML/XML for things other than mark-up. S-expressions or some other syntax might be preferable. (CSS has its own syntax, so let’s not feel constrained to keep SGML/XML syntax for grid files.)

; Just a thought...
(grid (row (cell (2 1) div#header))
  (row (cell div#body)
       (cell div#rightsidebar))
  (row (cell (2 1) div#footer)))

Without browser support for grid files, we could write a program that would read HTML and grid files and generate HTML that faked it with tables.

Just a thought.

P.S. Since writing this, I came across this: The Evolution of Web Design