Straight No Chaser

Basic 90s HTML

Besides being a really cool jazz standard by Thelonius Monk, straight no chaser could be used to describe the way web pages were designed back in the day. In fact the first page I ever built probably looked a lot like this one.

I've taken the liberty of adding a touch of CSS to give it that classic Netscape Navigator 2.0 gray background on a 640x480 VGA card feel, and a little JavaScript to help reduce clutter of the source code section, but otherwise it's pure unadulterated HTML. And it looks just about that exciting.

But, this humble page is what lies at the heart of this site. Throughout the examples it will be improved upon with CSS styling and JavaScript functionality, but the basic structure will remain the same. You can use your browser's view source function to see the structure up close or use the link below to show a condensed version.

View / Hide Source

The actual content is unimportant, only the HTML structure actually matters, and every HTML document is required to have a few pieces to be considered valid. Let's look at what they are.

• The document type definition.
• The opening html tag with the document's language.
• The head element where the document's character set and title go.
• The body element where the part of the document that humans read actually goes. (More on that below.)
• The closing html tag.

The document body is more free-form and provided you follow a few rules, layout is largely a matter of taste. On this site, the pages all follow the same basic structure.

• A level-one heading <h1> for the title.
• A short paragraph <p> with an italicized <i> subtitle.
• A horizontal rule <hr> used as a visual break.
• A lengthy paragraph <p> (or two, or more) with the bulk of the content.
• A final horizontal rule <hr> used as a visual break.
• A short paragraph <p> with a grouping of navigation links.

Blank lines don't matter, and the document would look the same in the browser even if everything were crammed together on one line. But, since the site is being built by hand in a text editor, it's important to make the html source more readable for humans.

That's really all it takes to get started.

Back | Home | Next