A Brief History of HTML Layouts

html-basicsGreat changes have taken place in the web pages in the last two decades. HTML has improved a lot since its early days in 1991 and web developers techniques have been changing as soon as new tools showed up. The CSS appearance in 1996 and, more recently, the new HTML 5 markup elements pushed developers definitely in the path of semantic web. This post covers, in brief, the history of those changes.

1. Table Based Layouts

In the dawn of the web Tables ruled.  Header, Navigation, Section, Footer and Spaces in between them were just a complex nesting of Rows and Columns. A basic layout markup used to have almost the following body structure:

<html>
<body>
<table width="600px" cellspacing="0" cellpadding="0" align="center">
   <tbody>
      <tr>
      <td>

         <table width="600px" bgcolor="red" cellspacing="0" cellpadding="0">
         <tbody>
            <tr>
               <td height="130px">
               <h1>Header</h1>
               </td>
            </tr>
         </tbody>
         </table>

     </td>
     </tr>
     <tr>
     <td>

        <table width="600px" cellspacing="0" cellpadding="0">
        <tbody>
           <tr><td height="10px"></td></tr>
           <tr>
              <td bgcolor="yellow" width="400px" height="450px">
              <h1>Main</h1>
              </td>

              <td width="5px"></td>  

              <td bgcolor="orange" width="195px" height="450px"> 
              <h1>Aside</h1> 
              </td> 

           </tr>
           <tr><td height="10px"></td></tr> 
        </tbody> 
        </table> 

     </td> 
     </tr> 
     <tr> 
     <td> 

        <table width="600px" height="80px" bgcolor="green" 
cellspacing="0" cellpadding="0"> 
        <tbody> 
           <tr> 
           <td> 
           <h1>Footer</h1> 
           </td> 
           </tr> 
        </tbody> 
        </table> 

     </td> 
     </tr> 
  </tbody> 
</table> 
</body>
</html>

That was the best we could get in the era of static websites though such a structure visibly carries some difficulties on maintainability and accessibility; the markup is definitely not developer-friendly, the content hard to find in the jungle of the code and web pages too heavy with probably issues on machine readability. Although Table-based layouts today look trivial to most people, at the time they encountered strong resistance to changes (and still they do!). They are actually not dead yet and still in use on eMail campaign and marketing.

2. Table-less Web Design – DIV and Positioning

In 1996 the introduction of CSS standard triggered a Table-less web design helping webmasters to solve some of the previous issues. They were now able to separate content from presentation and to easily maintain websites. The visual difference from previous layouts is astounding:

<html>
<head>
<style>
   body {width:600px; clear:both; margin:10 auto;}
   #header {background-color:red; width:600px; height:130px; margin-bottom:10px;}
   #main {background-color:yellow; width:400px; height:450px; float:left;}
   #aside {background-color:orange; width:195px; height:450px; float:right;
margin-bottom:10px;}
   #footer {background-color:green; width:600px; height:80px; clear:both;}
</style>
</head>

<body>
   <div id="header"><h1>Header</h1></div>
   <div id="main"><h1>Main</h1></div>
   <div id="aside"><h1>Aside</h1></div>
   <div id="footer"><h1>Footer</h1></div>
</body>
</html>

Div, Span and CSS Positioning have brought on the table great changes on accessibility. Let’s just thing on braille technology, screen-readers, smartphones and tablets which have been able to see big steps forward on readability and responsiveness. On the other hand, if  the new features help to organize the content they don’t say anything about it and its meaning.

3. Semantic Layouts – HTML 5

A story says that during the building of a campus the walking paths were not planned and the people left free to walk across a grass field. After a year the path were naturally traced and then ready to be paved. The example explains exactly what’s going on with HTML 5 and semantic markup:

<html>
<head>
<style>
   body {width:600px; margin:10 auto; clear:both;}
   header, article, aside, footer {display:block;}
   header {background-color:red; width:600px; height:130px; margin-bottom:10px;}
   article {background-color:yellow; width:400px; height:450px; float:left;}
   aside {background-color:orange; width:195px; height:450px; float:right; 
margin-bottom:10px;}
   footer {background-color:green; width:600px; height:80px; clear:both;}
</style>
</head>

<body>
   <header><h1>Header</h1></header>
   <article><h1>Article</h1></article>
   <aside><h1>Aside</h1></aside>
   <footer><h1>Footer</h1></footer>
</body> 
</html>

The new layouts don’t show great changes on the style, the news is the popping up of new semantic elements which have been tagged after several years of convergence on conventional names. Obviously those are just an example of a bag of new features which include, among others, the tags Nav, Section, Hgroup,  Mark and TimeHTML 5 is a great deal in the improvement of the accessibility and optimization of websites and their content but it has still to cope with the natural resistance to changes. However the path of semantic web is anyway traced.

About these ads

Tags: , , , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 98 other followers

%d bloggers like this: