ptg16476052372 LESSON 13: Structuring a Page with HTML5
A Short History of HTML Page Layout
On the early Web, most pages tended to be a single column of text that ran down the
page from top to bottom, mainly because that was the only option available. Early brows-
ers didn’t even support tables, so you could create paragraphs, lists, and other basic ele-
ments that were laid out left to right and top to bottom.
The first attempts to adjust the layout of pages were done with transparent images. A GIF
image was created that was 1 pixel by 1 pixel and transparent using GIF transparency.
This image was then given a width and height and placed beside text or other images to
push them over on the screen. It was a crude form of layout, but with a lot of effort it got
the job done.
Once tables were added to HTML, they immediately became the best option for creating
page layouts with multiple columns, borders around elements, and other approaches that
moved beyond the normal page flow. This quickly led to unwieldy pages that contained
large numbers of nested tables and often rendered very slowly. This was also the point at
which semantic use of HTML elements was at its lowest ebb. Designers tended to ignore
whatever semantic meaning had been intended for elements and instead used them only
for whatever physical effect they had on the page. For example, designers would fre-
quently wrap entire articles in <blockquote> tags to add wider margins.
Gradually, after CSS was introduced in 1996, styles began to replace HTML tags. As
browser support for CSS improved and more people upgraded to newer browsers, web
developers switched from using HTML tags to CSS. First, style rules gradually replaced
tags that were used for character styles. For example, the <font> tag was one of the
most-used HTML tags for a long time, particularly because some browsers did not inherit
the <font> specification from their parent elements, so you had to include a <font> tag in
every cell of a table. The <font> tag has since been completely replaced by CSS.
As more of the design and layout of pages switched from HTML to CSS, usage of tags
with semantic meaning was replaced by use of the generic container tags <div> and
<span>.
In the days before you could use CSS to control the layout of your pages, it was common
for pages to be laid out entirely within a large table. In fact, pages often consisted of mul-
tiple nested tables that were laid out to create designs.
There were a number of problems with this approach, starting with the fact that tables
have a specific semantic meaning—they are meant to present tabular data—and using
them for everything removed that meaning. Some browsers also ran into performance
problems trying to render pages with all of those nested tables. Finally, all of those table-
related tags were really confusing and made pages difficult to maintain.