There are a lot of Web pages that aren't worth the time spent loading them. This is in part due to the inexperience of Web page creators; HTML provides designers with a rich set of tools, but little guidance on how to use them effectively. This page is a small attempt to correct this problem, by introducing a practice I call Minimal HTML.
Minimal HTML combines a subset of HTML elements from the HTML 3.2 specification with rules for their use. Its aim is to teach the art of creating Web pages worth reading. To this end, Minimal HTML throws away the parts of the HTML 3.2 specification that deal with presentation, focusing instead on document structure and content. By paying more attention to content, your pages will be more useful to your visitors. Always keep this in mind: search engines index content, not design. By improving content, you increase the chance that people will find and benefit from your creations.
I encourage you to try Minimal HTML. Create a Web page or two, or rewriting existing ones, following its guidelines. Once you've mastered this practice, you should have a better understanding of what is truly important in Web page design.
Minimal HTML has four types of guidelines: required, allowed, restricted, and forbidden. These types indicate how a given element is to be used. For example, the <!DOCTYPE> element is required, so it must appear in a page's HTML. Header elements (<hx>) are restricted, which means that they may appear so long as the associated rule is followed.
Note that these are guidelines, and may be ignored in exceptional cases. For example, the prohibition of physical markup tags may be broken when notating equations.
The page must begin with <!DOCTYPE>, which must declare a DTD. The page should validate against that DTD. (For Minimal HTML, we choose the HTML 3.2 DTD.)
The <html>, <head>, and <title> elements.
The <body> element must be present, although its attributes are forbidden.
A <meta> element giving the page's character encoding.
Page content must begin with an <h1> element containing the page's title.
These first five rules can be turned into a Web page template.
Elements may only occur inside appropriate containers (e.g., <li> may appear only inside <ul> or <ol>).
Structural tags (<p>, <ol>, <ul>, <dl>; <hx> with restrictions)
Semantic text markup tags (<address>, <cite>, <code>, <dfn>, <kbd>, <samp>, <var>)
Links (<a>). Note that the TARGET attribute is not a part of HTML 3.2, and should not be used.
Meta-information (<meta> and <link>)
Images if they are indispensable; alt, width, and height attributes are mandatory.
Logical text markup (<em>, <strong>, et cetera); use sparingly.
Forms.
Preformatted text (<pre>).
Non-numeric HTML 3.2 entities (e.g., ©).
| Item | Allowed use | Forbidden use |
|---|---|---|
<hx> |
Page structure. The first header element in a document must be <h1>, and it must contain the page's title. It must be the only <h1> element. Successive header elements can change the heading level by at most +1 (i.e., <h3> can be directly followed by <h2>, <h3>, or <h4>, but not <h5> or <h6>). |
Text formatting |
<blockquote> |
Quoting long passages | Indentation |
<table> |
Displaying tabular data. Rule of thumb: if your page looks bad when a table has a visible border, then that table should be removed. | Page layout |
<strike>, <u> |
Indicating deleted and inserted text in a revision | Non-revision markup |
|
Preventing text from breaking across lines | Adjusting letter or word spacing |
| Inline images | Small images that add clarity to the surrounding content | Decoration |
| Images, MIDI, Flash, Java applets, et cetera | Use only when required to enhance the meaning of the page's contents (e.g., a page analyzing a musical theme could link to a MIDI file that plays the theme, or an image of its score). Rule of thumb: the added content must be so important to your page that if it didn't already exist, you would create it. | Decoration |
Physical text markup tags (<big>, <i>, <sup>, <font>, et cetera).
Alignment tags & attributes (<center>, align="left", et cetera)
<body> tag attributes (text & background colors, background image).
The <hr> tag.
Frames.
Numeric HTML entities (e.g., &169;).
The <div> tag, which is unnecessary in Minimal HTML.
The following are not required to appear on a page, but their presence is recommended:
The date of the last page update.
The page's URL.
A way to contact the page's maintainer.
<meta> elements describing the page. These help search engines correctly index the page.
As your page nears completion, test it on several browsers with different capabilities, including at least one older browser and Lynx. Don't weigh appearance heavily; consider instead whether the page communicates your ideas.
Compare versions of your page with and without images loaded. If you find that your page conveys the same information without a given image, remove it.
If you want to gain mastery of HTML and Web design, try practicing Minimal HTML. A page structured with nothing more than <Hx> elements can be beautiful in its simplicity. Once you've mastered Minimal HTML, breaking a basic design rule becomes a conscious act, not an unintended consequence of inexperience.
You might find these Patterns for Personal Web Sites useful.
When writing Web pages, having a good HTML reference on hand is invaluable. The Web Design Group offers free downloadable HTML references in several formats.
Minimal HTML was inspired in part by The 5k, an annual competition to write the best Web site in 5K or less, and by the fondly remembered Zen leaf page, which was the most stunning Web page of 1995. (Does anyone remember its URL, or even know if it's still up?)
Last updated 24 October 2003
http://www.rdrop.com/~half/Creations/Writings/TechNotes/minimal.html
All contents ©2002-2003 Mark L. Irons
Previous: Short Notes ··· Next: A Cranky Web Design Quiz