Learning HTML by Studying Errors in Page Markup

A BATW HTML Tutorial

Open the "bad example" page badlayout.html by clicking on this link. You should also download the page and open it in your simple text editor such as notepad or bbedit. This page with different links and identifying text was actually on a web site.

It contains a great many errors of html markup. It is amazing that most browsers actually manage to display it.

  1. The doc type line is missing from the top of the page. 
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
  2. The META lines are placed below the <head> and </head> tags. They should be placed between those tags.
  3. No character encoding information: 
    
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4. There are a series of completely unneeded and in some cases unmatched <CENTER> tags.
  5. There are unneeded comment lines. A comment line looks like this:
    <!-- comment stuff -->
  6. The tag <newline> is not a tag in the universal HTML standard. It may be a tag confined to a specific propriatary standard, such as Micro$oft's
  7. The bottom end of a table is present :
    </TD>
     </TR>
    </TABLE>
     but the table is not defined at its beginning.
  8. In a number of instances tags are opened <font> but there is no matching closing tag </font>.
    How many can you find?
  9. The <IMG> tag often lacks size information for the image. This information aids the browser to load the page more rapidly, but is not required.
  10.  In some of the links associated with a graphic button there is unnecessary repetition of the link code. <a href="Page1.html"> ButtonImage.jpg Link to page 1</a> is all that is needed to link both the button and the text tag.
  11. There is a tag <align="center"> which is meaningless.
    Something has to be aligned as in:
    <div align="center"> or <font align="center"> or <h1 align="center">, etc.
    Then the tag needs to be closed properly:
    </div> or <font> or <h1>, etc.
  12. In the section setting up the e-mail link for the pageowner, or for the font tag or the h3.
    BGCOLOR="black" is not an attribute to be used outside of tables or the <body> tag.
  13. In the section setting up the e-mail link for the page owner: The <img SRC> tag has a useless "a" just before the closing >. This happens again, can you find it? Also there is a closing tag for part of a table </td> and another useless <newline> tag.
  14. In the section setting up the e-mail link, there is no closing tag for the <mailto:> or for the <H3>
  15. Next there is another empty <align="center"> tag.
  16. When the header tags (such as <h1>) and the font tags (<font="gold">) are used in relation to the same block of text, the font tags need to be within the block of text specified by the header tags.
  17. Another misplaced table tag </td> and another useless <newline> tag. How many can you find?
  18. No closing tag for the font size header <h3>. This happens again later in the page? Can you find it?
  19. The HTML closing tags for the document are missing. These are:
    </body> and <html> in that order

A repaired version of the page is here.

The main graphic design problem in this page is that the page is supposed to have graphic design running up the left side. If the browser window is set narrowly enough this occurs. However if it is set wider - say at 600 pixels or 1280, then the design displays up the middle of the page also, making the page hard to read.

This problem is difficult to solve. One can have a much longer background graphic - say 1500 pixels long ( see), one can use tables to format the page and have the edge design be separate from the table( see or one can use cascading style sheets. The last option may not display properly on some browsers. Cascading style sheets are outside the purpose of this lesson.

This is part of a set of HTML lessons from BATW.net and Bonnie Dalzell [bdalzell at Q I S dot net].

[ Lessons index ]BATW Home ] [ An Introduction to Web Page Construction Tutorial on constructing a simple web page.

Valid HTML 4.01 Transitional