Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

A Well Formed Document Is A Beautiful Thing

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

Originally Published: 2005

In the world of web design, the separation of structure from style is the driving force behind sites which have adopted best practices. Structure, achieved by using XHTML/HTML (tags, if you like), is what allows us to make web pages that our users -- and search engine spiders - will appreciate.

That's another way of saying that a well formed document - your .html file - is a beautiful thing.

What's a well formed document? Resumés, letters, newspapers, books, and magazines are a few examples. All of these documents use well established conventions - semantics - to convey what the words in those documents mean.

Look at a resumé. At the top is the person's name, followed by address, phone number and other contact details. The body of the resumé is divided into Experience, Education, and other sections. Each section provides more specific information under its heading. The content is broken up into a logical sequence; the information moves from the general to the specific.

Take a newspaper's front page, a great example of a well formed document. If I were using XHTML to markup my copy (thereby giving my content its semantical purpose), this is what its structure would look like.

<h1>The New York Times</h1>
<p>All the news that's fit to print.</p>

<h2>Flood Waters Recede From New Orleans</h2>
<p>Some quarters of this ravaged city today showed marked improvement as water levels were beginning to recede from their historic high water marks. Officials were unsure as to how much further progress would be made today.</p>
<h3>French Quarter Is Dry</h3>
<p>The famed French Quarter, home of Cafe Du Monde and Mr. Bee's, was reported to be in better shape than expected. Locals were hoping for a re-opening next week. Eager tavern owners were trying out new marketing schemes in hopes of bringing back patrons.</p>

<h2>Bush Picks Roberts To Replace Rehnquist</h2>
<p>President Bush today tapped DC Appeals Court Judge, John Roberts to fill the vacancy of Chief Justice of The United States Supreme Court following the death of Judge William Rehnquist. Mr. Roberts, who had been tapped to fill the vacancy of Justice Doris Day O'Connor</p>

<h2>Another article</h2>
<p>Opening words of the article.</p>
<h3>Article Sub Head</h3>
<p>Another sentence. Another sentence. Another sentence.</p>
<h3>Another Article Sub Head</h3>
<p>Another sentence.</p>

And so on.

See the pattern? The Heading tags (<h1>, <h2>, etc.) are used to set key phrases (headings) apart from the content of each article. The markup conveys purpose.The information at the top is more general and more important than that at the bottom (assuming your eyes move top to bottom when you read).

It's the XHTML markup that gives the document its structure. Use markup correctly, and you'll have your well formed document. That's a beautiful thing!!

Why is that so important? No time now to go into the ramifications of creating well formed documents. For now, keep it in your mind that, as in most design disciplines, structure is separated from style. If web pages were homes, XHTML would be the roof, floors, and basement - the structure of the page. The style - the color of the rooms, the type of flooring used, window treatments, baseboards and more - are handled by Cascading Style Sheets (CSS).

When you're making web pages, remember to use XHTML only for its intended purpose of providing the structure of your page. Use XHTML/HTML correctly and you'll have a work of art - A Well Formed Document.

Subscribe To JG If You Like What You're Reading

Joy Gems is a twice monthly newsletter for people new to web design and for those moving beyond that stage.

Search
Joy Gems Archive

RSS