Skip to Local Navigation
Skip to Content
California State University, Long Beach
Disabled Student Services
Print this pageAdd this page to your favoritesSelect a small fontSelect a medium fontSelect a large font
 

12 Common HTML Mistakes

Below are some common HTML mistakes that affect accessibility of web content. Review these carefully and be sure to validate your page for proper HTML.

1. Missing or incorrect DOCTYPE.

The DOCTYPE tells Web browsers what version of HTML your page is using. Technically, it refers to a Document Type Definition (DTD) that basically specifies the rules for that version of HTML.
The DOCTYPE should always the the very first line of your HTML code and it IS case sensitive.
In HTML 4.01 there are three primary DOCTYPE's

  • The HTML 4.01 Strict DTD includes all elements and attributes that have not been deprecated or do not appear in frameset documents. For documents that use this DTD, use this document type declaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes (most of which concern visual presentation). For documents that use this DTD, use this document type declaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well. For documents that use this DTD, use this document type declaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"

2. Missing Character Encoding

All Web pages should define the character set that they are currently using. Though character sets are rather technical, they simply tell the Web browser what set of characters are used in the page.

If a page containing English characters found on typical keyboards will have a different character set than one that should display Japanese characters. The character encoding tells the user agent (browser or assistive device) what kind of data to read and display. For most English Web pages, the character encoding will be entered into the Web page like this: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> This meta tag should be within the <head> and </head> tags of your Web page and is not case sensitive. http-equiv="Content-Type" tells the browser what type of meta tag this is (there are several types). content="text/html; tells it that this is an html document that contains text only. charset=ISO-8859-1 tells the browser that it is using the ISO-8859-1 character set - which defines common English characters. Another common English character set is windows-1252. A Japanese Web page's might have charset=shift_jis. Here's a list of common character sets.

3. Unsupported tags or attributes

Use of code that is not part of the HTML standards is not appropriate. These include the <BLINK> and <MARQUEE> tags, among others. There are also many attributes of HTML tags that many browser will recognize, but that are not part of the HTML standard. Commonly used attributes that are improper are attributes in the <body> tags that modify margin size, such as <body marginwidth="0">. These tags and attributes vary based on the version of HTML that you are developing in. For accessibility and compatibility reasons, we should all be using AT LEAST HTML version 4.01. To find out if your page contains unsupported HTML tags or attributes, validate it at the W3C's HTML Validator. If you don't have a DOCTYPE, then it won't know which version of HTML to validate your page with.

4. Improperly formatted HTML

The most common mistakes in HTML are usually just plain human mistakes. Here's a list of HTML no-no's:

  • Missing quotation marks for attribute values.
    Though older versions of HTML do not require that you surround values with quotations marks, future versions (including XHTML) will. Though you can get away with making this mistake in most browsers, placing quotes around values is suggested.
    Examples of what NOT to do:
    <img src=myimage.gif>
    <font color=#FF00FF>
    <p style=font-face: arial, geneva>
  • Missing closing tags
    Most HTML tags have both an opening and closing tag (i.e., <b> and </b>). If a tag mark's up or surrounds any other content, then it must be closed. One exception to this is the <p> tag. XHTML (which we'll talk about later) requires that ALL tags be closed. I recommend closing the <p> tag, even if it is not required now. This usually makes editing your HTML easier as well.
  • Improper nesting of HTML tags.
    HTML tags must be closed in the opposite order than which they were opened. I like to draw imaginary arching lines from matching opening and closing tags. If any of the lines cross, then you have probably nested improperly.
    Correct: Image showing arching lines to matching HTML tags that do not cross, indicating proper HTML nesting.

    Incorrect: Image showing arching lines to matching HTML tags that cross, indicating improper HTML nesting.

  • It is very common to improperly code when nesting lists (such as those your viewing right now). Any nested <UL> or <OL> must be enclosed within a parent <LI>.
  • Using HTML tags for the wrong purpose
    A common misuse of HTML is using list tags <UL> or <OL> to simulate paragraph indents. HTML tags should only be used for the purpose they were intended. List tags should be used for lists, <BLOCKQUOTE> for long quotes, and so forth.

5. Improper Tables

Tables are a common culprit of improper HTML. It is easy to incorrectly code tables and most browsers will let you get away with it. Assistive technologies are very strict about proper table structure. Common table mistakes are:

  • Not closing the <table>, <tr>, or <td> tags or closing them improperly (see above)
  • Inserting <td>'s outside of a <tr>
  • Creating tables with differing numbers of cells (or rowspan/colspan)in each row
  • Placing tables within inline elements, such as <b> or <h1>
  • Surrounding table cells or rows with text formatting tags (i.e., <table><b><tr><td>I am bold</td></tr></b></table>)

  • Data tables should have a caption, immediately after the opening table tag - <table><caption>Data from Jello Eating Contest</caption><tr> ...

6. Missing ALT Text

All images must have the alt attribute: <img src="image.gif" alt="image description">. As of HTML version 4.01, this is required.

7. Head content must be within the <head>

<title>, <meta>, and <style> tags must be within the <head> and </head> tags.

8. Missing </body> or </html> tags

9. Improper use of form tags

The form tag is a block-level tag, meaning that it starts a new section of your page (much like <h1> and <p> do). It is a common mistake to use the form tags to surround smaller sections of your page. To avoid having the form insert a blank line when it begins. This is especially common within tables.
Incorrect:

<table><form><tr><td>..... </td></tr></form></table>
Correct: <form><table><tr>.... </tr></table></form>

10. align=absmiddle

This commonly used HTML extension is not proper HTML for the img tag (i.e., <img src="image.gif" align="absmiddle">). This attribute IS supported by the major browsers, but if you want your code to be correct, use either align=middle or CSS to align text to the middle of images.

11. Missing script type

Scripting languages such as JavaScript and VBScript are becoming very popular. HTML standards require that you identify the type of scripting language that is being used. Most scripts include the language attribute. This alone is not enough, you must also include a type attribute. In fact, in the future, the language attribute will be replaced with the type attribute.
<script type="text/javascript">

12. Missing <noscript>

Any JavaScript that performs a function or outputs information must have a <noscript> tag that provides an alternative or explanation for what the JavaScript does.

<script type="text/javascript">
.... javascript stuff here ...
</script>
<noscript>
<P>Access the <A href="http://someplace.com/data">data.</A>
</noscript>

This list could probably go on and on. The best way to determine what mistakes you are making is to validate your page. A common misconception about proper HTML is that if you use a WYSIWYG Web development program to design your page that your HTML will automatically be valid. This is incorrect. Many popular development programs will create improper code or allow you the functionality to create improper code. Always check your HTML for validity to be sure.


This page was made in thanks of www.webaim.org

© Copyright 2000-2002 WebAIM. All Rights Reserved. Terms of Use.