How to Fix Noncompliant Code on Your Web Page - dummies

How to Fix Noncompliant Code on Your Web Page

By Sue Jenkins

For each web coding issue identified by a validator, you need to determine what course of action to take. Although some culprits that repeatedly crop up are easy to fix, such as missing alt text and <noscript> tags, you’re bound to find coding issues that completely baffle and stump you.

For instance, if you get an error message that reads XML Parsing Error: Opening and ending tag mismatch: br line 52 and body, it might be difficult to figure out what that means, let alone why it was caused and how you should fix it.

As a strategy then, try to fix the issues within the code from the top down, as they’re listed in the validation results, because sometimes fixing one issue resolves another. With the XML parsing error, that issue might disappear when you correct for an omitted closing element on a <br /> tag listed earlier in the error results.

The best way to find out how to code better and make fewer mistakes before validation testing is to make lots of honest mistakes and figure out how to correct them on your own. Most often, you can fix noncompliant code by hand or with the help of a good HTML editor.

To help you identify some of the more common coding mistakes, here several code issues along with suggestions about how to fix them.

Problem Solution
alt text attribute missing from <img> tag Add the alternative text attribute, either with or without a
description, as in <img
src=”images/logo.gif” width=”150”
height=”150” alt=”Pete’s Pizza”>
<img src=”images/flourish.gif” width=”200”
height=”150” alt=””>
<noscript> tags missing from
Add <noscript> tags below each
instance when JavaScript is present in in-line JavaScript or at the
end of the content before the closing body tag. Between the <noscript> tags, insert HTML content
(text, graphics, media files, and so on) that describes the
function of the JavaScript and, when appropriate, how visitors can
access the information revealed by it, as shown here:
<script language=”JavaScript”
JavaScript used on this page provides a quick link that allows
visitors to automatically bookmark this page. As an alternative,
please use your browser’s Bookmark
This Page feature.</noscript>
Flashing or flickering element(s) detected, such as animated
GIFs, Java applets, and other multimedia plug-ins
Adjust the speed of any animations to avoid causing the screen
to flicker with a frequency between 2 Hz and 55 Hz. Animations that
exceed these two measures may cause seizures in visitors with
photosensitive epilepsy.
No DOCTYPE specified Add a valid DOCTYPE above the opening
<head> tag.
No HTTP charset parameter specified This special meta tag specifies the character set used in the
HTML code. Some HTML editors include it automatically when
generating new blank web pages. If validation finds that this tag
is missing from your HTML or XHTML code, insert the following code
by hand: <meta
http-equiv=”Content-Type” content=”text/html;
. For HTML5, insert <meta charset=”utf-8″>.
No <title> tag specified Add a unique title between <title> tags in the head area on each
No <meta> tags specified Add meta keywords and meta description tags to the head of each
page. These can be identical on every page on the site. If desired,
you may also add additional meta tags as needed.
No Robots tags specified Add the Robots <meta> tag in the head of the page to
instruct web spiders and robots whether to index the page and
follow any hyperlinks, such as <meta
name=”Robots” content=”All”>
Deprecated <font> tags
Move all the presentation markup of the HTML (page, fonts,
tables, links, and so on) to an external CSS file and remove all
<font> tags and HTML and inline
formatting attributes.
Deprecated table height attribute detected Control table cell heights, when necessary, with CSS
Style attributes detected in the opening <body> tag Move body attributes, like margin
attributes and background page color, to a BODY tag redefine style
in an external CSS file.
type attribute not specified for
JavaScript or CSS
Add the type=”text/css”
attribute for <style> tags and the
attribute for <script> tags: <style type=”text/css” ><script
Entity name used instead of entity number Change the entity name to an entity number, such as using $#169; instead of &copy; to create the copyright symbol
No background color attribute was specified for a CSS style
that specifies text color
Provide each style that contains a text color attribute with an attending background
color attribute. The background color
should match, or closely match, the background color upon which the
text will display on.

When you’re finished identifying and adjusting all the noncompliant code identified by the validation tools, and have fixed everything that needed fixing, move on to the retesting and acceptable failure phase of the testing process.