Efficient HTML Skeleton Construction

The basics are always worth considering again. Sometimes it’s the obvious things you don’t think about that can cause the worst problems. The wrong doctype can spoil all your hard cross-browser CSS styling efforts. The wrong class name can lock you into awkward naming conventions. Even something as common as putting your script tags in the head of your document can slow down your site.

As we enter 2009, this is my state-of-the-art approach to constructing an efficient, semantic, and flexible web site. I’ll start with the HTML skeleton:

A basic HTML page skeleton should tell the browser what kind of content to present, in what order the content should appear, and what to do with it.

I start with a !DOCTYPE to tell the browser what our page will consist of; for example, a public HTML document that complies with w3C standards for HTML 4.01 Strict.

Next I have the HTML element, which consists of a HEAD and a BODY element. Note that you have to close the HTML, HEAD, and BODY tags (/HTML, /HEAD, /BODY)at the end of each definition.

In the HEAD I include the title, the encoding standard, and references to external stylesheet CSS files, starting with a CSS reset script, a possible CSS script with code for all the shared elements across a set of pages, and then a CSS script with code specific to this particular page.

In the BODY I create elements of semantic HTML and fill them with content.

At the end of the BODY tag I include SCRIPT tags. These tags load external JavaScript libraries, such as JQuery, or contain document-specific Javascript.

The code below will create a page that looks like this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>Hello Page</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=ansi" >
    <link rel="stylesheet" href="css/reset.css" type="text/css">
    <link rel="stylesheet" href="css/hello.css" type="text/css">
</head> 
<body> 
    <p class="description">The box on this page is ten lines down and has a dotted border.</p> 
    <div id="mainContent"> 
        <p>Hello World!</p> 
    </div> 
    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>  
    <script type="text/javascript"> 
        $(function() { 
            $("#mainContent").click( function() { 
                alert("You clicked me"); 
            }); 
        }); 
    </script> 
</body> 
</html>

Since this page is called hello.html, the visual style of the elements on this page is defined in the a hello.css file, which is coded like this:

/* Formatting for the hello.html page */  
mainContent {width:50%;position:relative;top:10em;margin:0.5em;padding:0.5em;border:2px dotted #ff0;}  
  
/* Styles for the hello.html page */  
body {color:#fff;background-color:#005;}  
mainContent p {color:#fcc;text-align:center;font-family:impact,helvetica,sans-serif;font-size:3em;} 
.description {text-align:center;font-style:italic;}

M. David Green

Existence is a byproduct of semantics

Efficient HTML Skeleton Construction