Common Mistakes in Creating HTML Pages and how to Prevent or Correct them

What is in this page?

I frequent various usenet newsgroups on web authoring. One of them is alt.html.critique. In this group web authors put up their sites for a critique. Often the same critiques are given for different pages. Many (starting) web authors make the same mistakes over and over again.

If you were to give a critique of a new novel and you had to wade through (to you) obvious and annoying mistakes in spelling or grammar or both first, you would easily not be able to get to the content of the novel. The errors would distract you from what is really important. You therefore would just point out the errors that keep you from enjoying the book. You would be annoyed for feeling being abused as an editor on a manuscript rather then being invited as a book critic.
In many ways with HTML pages, errors in coding or structure are like those mistakes in spelling and grammar. They too keep people from getting to the actual content of a site.

In this page many of those mistakes that keep people from enjoying the content of your site, are pointed out. It also provides links to material worth reading and studying, if you want to know why a mistake is a mistake.

Contents:

Mistakes
Correct
Document structure
- example page
- validate!
Note

Why is this page created?

I created this page for future reference. I will point to this page if someone asks for a critique and seems to have made the common mistakes many (beginning) web authors make. This page enables them to correct their own mistakes in spelling and grammar, so to speek.

This page can also serve as a checklist on forehand. A web author could check his or her pages and site against this list, and then correct those common and simple things all by themselves. After that he or she can put up the site for a critique, which will then be of a different nature: participants in the usenet newsgroup alt.html.critique will be able to give a critique of a higher quality, since they can focus on what really matters. Again, it is much like the difference between reading a novel for its contents or having to wade through a load of spelling and grammar errors first.

What are those common mistakes?

Below is a list of over thirty common mistakes, I've encountered over the last few years. These are the things that appearently everyone does wrong, before getting any insight on markup and really understanding what you're doing, at which point all of this simply doesn't happen anymore:

About frames

Using frames for no appearent reason.
Not providing alternative content for people who don't have frames capable browsers.

Homework

http://www.google.com/search?q=why+frames+are+evil

About doctypes

Using no doctype declaration.
Using an incomplete doctype declaration, which kicks browsers into quirks mode.
Using an inappropriate doctype, like transitional which should be strict for new documents, or like XML that is served as HTML.

Homework

Basic markup trouble

Using invalid markup.
Using proprietary markup.
Using obsolete markup.

Homework

Basic styles trouble

Using invalide CSS.
Using inline styles unnecessarily.
Not seperating content and styles at all by using elements like font and underline (with the tags <font> and <u>), or abusing the linebreak, <br>, or the non breaking space,  , for creating margins and padding on elements, or <center> for centering a part of the page.
Abusing elements for their appearance, like <blockquote> to set a left margin, or <h4> to create a slightly larger, bold looking block of text.

Homework

Basic accessibility issues

Using fixed width design for no appearant reason.
Using fixed font sizes.
Using too small font sizes for the main content.
Using a difficult colour scheme (low in contrast for example, difficult to read/decypher).
Using an incomplete colour scheme, usually by forgetting to set some background colours where it matters.

Homework

Failing to understand what markup is about

Failing to structure the document properly.
Not providing good information on the document or on the content:
1. failing to set an appropriate value for the document title;
2. failing to provide information on language, character encoding or script and style types;
3. failing to give some information on keywords or not giving any short description of the page.
Abusing tables for layout.
Not using very much meaningful markup, sometimes none at all.

Homework

Not thinking about accessibility or usability issues at all, not even in the simplest things

Having no sensible structure for the site itself.
Relying on client side techniques whithout providing alternative content:
1. image maps;
2. objects or i-frames;
3. javascript or applets for navigation menus and other important things;
4. flash content without a link that provides simple text based content;
5. movies and videos without a description or a link to alternative content.
Using fonts that are not generally available, whithout setting up a generic font as an alternative;
Using images that are not purely presentational, without providing an alt text;
Using images for text that is actually content;
Making hyperlinks hard to recognize (by removing the underlining, failing to make them stand out because of their colour, et cetera);
Using unreadable URL's without any meaning to the human eye/mind;
Not providing sufficient text links to important parts of the site;
Pixel perfect, fixed, "aimed at one browser only" design;
Failing to set colours where necessary (like background colours on pages, tables or divs);
Further annoying the visitor with:
1. using splash pages or landing pages that add no value from the visitors point of view;
2. obscure the address of the page the visitor is on;
3. obscure the target of a hyperlink;
4. open new pages in new windows without warning;
5. using pop-ups or pop-unders for no reason beneficial to the visitor;
6. sounds that are automatically started (or can't be switched off by user, or both);
7. moving stuff about in the screen (like trailing the cursor);
8. blinking, flashing, rotating or moving text (or all applied at the same time) which is part of the content.

Homework

Clearly stating your own incompetance

Using a Valid HTML or Valid CSS button (or both);
Giving a Best viewed on my screen, with my resolution and my contrast/brightness settings, with my browser using my viewport size, using my eyes statement;
Explaining how the site is Under construction or A work in progress.
Using 'hidden' content, like white text on a white background.

Homework

Please, just don't do that. Create valid pages that work in any browser/viewport and don't bost about it. The public won't know what you're talking about and other webauthors will just think So what?. Don't publish until it is presentable (and remember that every site is always a work in progress, or so it should be). Don't try to fool search engines, for you will get found out eventually.

How to prevent all this?

Look at the queries I provided with the lists of common mistakes. Read some of the pages that show in the search results and learn from them. Also study a bit using general resources, starting at http://www.w3.org/MarkUp/Guide/ for example and http://www.w3.org/MarkUp/Guide/Style.html. But there are many good (and better) resources on line to study.

Go through various Google Groups on authoring for the world wide web, like http://groups.google.com/group/alt.html.critique. Find more through http://groups.google.com/groups/dir?q=comp.infosystems.www.authoring* and http://groups.google.com/groups/dir?q=alt.html*. Lurk, read along, learn. Learn to see what is the obvious.

When starting out, keep it simple. Think 'content', 'structure', 'meaning':

First, setting up a new site at the drawing board

Create your content and split it up logically into smaller bits that can easily fit in individual pages within your site. Create sections or chapters if you have a lot of content. Chapters from which you link a bunch of related pages. Don't go too deep, two levels below the index page should be enough. If it isn't, create sub-domains and continue from there.
Structure your site logically and in your mind link your document in that site in a way that makes sense to your visitor. Make it available in more than one way. And provide easy access to the rest of your site from within this one document. Remember that you don't know where your visitor is going to enter your site, so every page has to be able to stand on its own.

Then, marking the pages up

Use a proper doctype to identify what it is.
Use meaningful markup, in which a paragraph is a paragraph, a list is a list, a data table is a data table, a heading is a heading. Identify not only the document, but also its contents. Make it unmistakingly clear what is what within your document.

Finally, creating the looks of your site

Seperate content from looks by using a stylesheet, preferrably an external one that is used by all pages in your site.
Create looks and layout using the actual elements you use in your page as selectors in your stylesheet. Use classes and id's only where useful and meaningful, only where necessary. Add as little divisions and spans for layout purposes only as possible.

Important, as in the most important thing

The most important thing is your content, and to many (including search engines) content is plain text and the like. So provide plenty of that.

Document Structure

Below is an example of a HTML document. This example shows you a page that is all about a page well structured and content properly marked up, as in 'the markup gives meaning to the content'. This kind of markup not only gives meaning to the content by providing structure using the proper elements, it also provides more than enough 'handles' to create your styles with. Or so it should.

Just look at what I have done and try to understand why certain elements are used to markup certain content.

,------[ standard HTML4.01 Strict document structure, example ]
|
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|           "http://www.w3.org/TR/html4/strict.dtd">
| <html lang="en">
|
|   <head>
|
|     <title>Provide a tasty title for *the*page*, not the site</title>
|
|     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|     <meta name="keywords" content="some keywords appropriate to the page">
|     <meta name="description" content="A short and meaningful description of of the page">
|     <meta name="author" content="Author Name, City, Country">
|     <meta name="copyright" content="copyright (c) 2003-2006 - Author/Owner">
|
|     <link rel="stylesheet" type="text/css" media="all" href="styles.css">
|
|     <link rel="shortcut icon" href="favicon.ico">
|
|     <link rel="Home" title="Homepage" href="index.html" type="text/html">
|     <link rel="Index" title="Index" href="sitemap.html" type="text/html">
|     <link rel="Help" title="Help" href="mailto:help@example.com" type="text/html">
|     <link rel="Author" title="Author Name" href="auteur.html" type="text/html">
|     <link rel="Copyright" title="Copyright (c)" href="copyright.html" type="text/html">
|     <link rel="Disclaimer" title="Disclaimer" href="disclaimer.html" type="text/html">
|     <link rel="Alternate" title="RSS" href="feed.xml" type="application/rss+xml">
|
|   </head>
|
|   <body>
|
|     <h1>The Pages Title</h1>
|
|       <h2>Introduction</h2>
|
|         <p class="intro">This is the first paragraph of your page. The
|         introduction on the rest of the content of the page.
|         Make it stand out, meaningful, easy to understand. Make it so
|         everbody can see at a glance what the page is about and what
|         your site is about. Make it obvious why this page is a seperate
|         page.</p>
|
|       <h2>Meaningful Markup</h2>
|
|         <p>For all paragraphs you would use <p> to mark
|         them up. Don't use tables for layout! Use <table>
|         to create data tables only. Like the one in this example.</p>
|
|         <p>Just look at the rest of this example to see what meaningful
|         markup is about. See how you can understand which is which? And
|         why this way of working gives you enough 'handles' to create a
|         stylesheet with?</p>
|
|         <div class="img-container">
|           <img src="afbeeldingen/screenshot.png" alt="Screenshot
|           van pagina waarin content correcte markup heeft gekregen, nog
|           zonder opmaak" title="Screenshot, correcte markup gebruikt">
|         </div>
|
|         <p>Besides that, it gives your content so much structure, that
|         any user, using a modern graphical browser, or a text browser, a
|         screen reader or an aural browser, a braille browser and even a
|         bot from a search engine, can get to your content easily and
|         understand it.</p>
|
|         <p>This is where the page continues [...]</p>
|
|     <!-- the content of the page, marked up properly -->
|
|       <h2>Fill in the blanks :-)</h2>
|
|         <p>blank</p>
|
|         <p>blank</p>
|
|       <h2>Blank</h2>
|
|         <p>blank</p>
|
|         <p>blank</p>
|
|       <h2>Overview of the scores</h2>
|
|         <p>Below is a table with the individual scores of the
|         participants. They all had a lot of fun, but there can be only
|         one true winner:</p>
|
|         <table id="scores" summary="In two columns the names of
|          the participants are given with their score next to
|          their name. The scores are summarized.">
|           <caption>table 1: Individual Scores</caption>
|           <colgroup><col class="name"><col class="points"></colgroup>
|           <thead>
|             <tr>
|               <th>Name</th><th>Score</th>
|             </tr>
|           </thead>
|           <tfoot>
|             <tr>
|               <th>Total:</th><td>11</td>
|             </tr>
|           </tfoot>
|           <tbody>
|             <tr>
|               <td>Marc</td><td class="low">2</td>
|             </tr>
|             <tr>
|               <td class="winner">Denis</td><td class="high">5</td>
|             </tr>
|             <tr>
|               <td>Rose</td><td>4</td>
|             </tr>
|           </tbody>
|         </table>
|
|     <ul id="menu">
|       <li class="current">Index</li>
|       <li><a href="blank.html">Blank 1</a></li>
|       <li><a href="blank2.html">Blank 2</a></li>
|       <li><a href="blank3.html">Blank 3</a></li>
|       <li><a href="contact_form.html">Contact</a></li>
|       <li><a href="sitemap.html">Sitemap</a></li>
|     </ul>
|
|   </body>
|
| </html>
|
`------

Validate!

Then, finaly, validate your markup. Validate your stylesheet. Get rid of the typo's and of the actual mistakes. Validate again and again, untill all mistakes are gone. Only then upload, publish, make it available to the world. And to alt.html.critique if you still have the guts. :-)

If you validate this page, you'll encounter 1 error: the use of the attribute [start] with the ordered lists, <ol> that sum up the common mistakes. I know about that mistake and choose to leave it in. This is just to show you that validation or valid markup is not a goal in itself. Validating your code is a means to achieve that your pages will render properly in most browsers that are out there, because it is not your mistakes that could mess up. That's all there is to it.

Note

This page is especially set up for use as a response to requests for a critique in the usenet newsgroup alt.html.critique. I've first used it in a response to the post First Critique Request. Since then, I've posted the URL in responses to the following messages (including the original first thread):

If you like this page, think it is useful, you could pay us a visit at PretLetters or at the section about Webdesign. The site is in Dutch though.

Maybe the index of the test area, of which this page is part, is worth checking out too, since in that part of my site I play around a bit. There might be something worth your while related to the main topic of this current page.

If you liked what you saw and I helped you out a bit with something, you could consider contributing something small so I can continu to put efford in this site. With that you help me to help you and others. Please visit my page (in Dutch) on bijdragen, contributions and donations. Thank you,