The Dos and Do Nots of HTML

The Do’s of HTML

  • Verify your code in the W3C validator
    • The W3C validator is a great tool for making sure you write properly formatted code. Properly formatted code is more likely to work well in a browser and be accessible. It only takes a few seconds to do, so there is no excuse not to.
  • Use proper, descriptive alt tags for images
    • Not everybody browses the web like we do. Many people require screen readers or other accessibility tools, and it is our job as web developers to make our websites available to these people. Descriptive alt tags is a good idea for this purpose, because all to often I see alt=”#” or alt=”” or no alt tags at all! Also, these are helpful for search engine ratings.
  • Use descriptive title tags for anchors
    • Titles also are of use to people with disabilities. They increase website usability, search engine rating (They can boost keyword occurence), and they provide descriptive titles for regular users.
  • Check your website in many browsers
    • The more browsers you check your website in, the more people are likely to view it as it was meant to be. Many of times, I’ve found a website which had menus that didn’t work in my browser, or some element was out of place, or similar. This could easily be avoided by checking your website in Internet Explorer 7 (Compatibility Mode with IE8), Internet Explorer 8, Firefox 2, Firefox 3 (If it works in FF3, it should work in FF2), Opera, Chrome, and Safari. These are all available for Windows, for free.
  • Use width and height in img styles
    • If you specify the width and height of an img tag in the style for that element, your browser doesn’t have to sit around and wait for the image to load to know how to organize your website. It can pre-render the website while the images load. This is a good thing!
  • Check all of your links
    • Verify that each link on your website works properly, and doesn’t lead to the “dreaded” 404 page, or even worse, the 403 page!
  • Use quotes around attributes
    • All element attributes should be enclosed in quotes! title=”link title” for instance. This is proper practice and is required for valid code.
  • Specify the document type declaration
    • This helps browsers and is required for proper validation.
  • Make nice 404 pages
    • This is more of a server thing, but make sure you create your own 404 pages so the user isn’t shown some cryptic IE error. You want them to remain in your site if they click an invalid link.
  • Proofread
  • Use negative margins
  • Use a print style sheet

The Do Nots of HTML

  • Use tables for layout
    • Tables are meant for TABULAR data, hence the name. Developers who use them for layouts are horrible misusing them, and have given them a bad stigma. I believe they are still ok for presenting tabular data. Why shouldn’t they be used for layouts? Tables weren’t meant for layouts, so there is more code than there needs to be, which means more bandwidth usage. It takes longer to render in a browser, it’s more difficult to maintain, and it’s bad practice. Tables are also less accessible to screen readers and similar programs. Using CSS with tables to have multiple views is much more difficult, they scale badly on mobile devices, and tables can negatively impact your search engine rating.
  • Use frames
    • Frames are bad for layouts, usability, accessibility and search engine ratings. Avoid them.
  • Use a WYSIWYG editor
    • I could POSSIBLY understand using a WYSIWYG editor for quick mock-ups, but anything short of that, and you should code it by hand. WYSIWYG editors often use way more code than is necessary, don’t know the small quirks and bugs in the major browsers, and can often create inaccessible or poorly accessible code.
  • Links with Click Here or Click Me text
    • Users like descriptive links, and so do search engines. If a user is scanning a page, and just sees a link that says “Click Here”, they probably won’t click it. Also assumes people are using a mouse.
  • Use invalid or proprietary tags
    • Avoid invalid/proprietary tags like the plague! Tags like <center>, <marquee>, and <blink> should be avoided at all costs. These may not work in all browsers, and are not part of the HTML standard.
  • Use capital letters for your tags
    • If your HTML code looks like your caps lock key was stuck on, you should fix it. This code is hard to read (And hard to maintain), not to mention invalid with the XHTML standard.
  • Forget to close tags
    • Both self closing tags (<br /> for instance) and regular tags (<p></p>) need to have a closing tag. Many programmers used to leave these out, and some still do. That is not valid code, and it can negatively impact your search engine rating. It can also mess up your layout in some browsers.
  • Rely on JavaScript
    • Regular websites should not RELY on JavaScript to function. Many users have JS disabled by default, and if this is the case, your site shouldn’t break. Also, many mobile phones and screen readers can’t/don’t support JavaScript.
  • Use reset buttons on forms
    • There is nothing users hate more than filling out a form and clicking reset instead of submit. If this happens, many users will just quit and leave your site. If you really want one, use a regular button and then add JavaScript with a confirm prompt. This way, no accidental resets, and if JavaScript is disabled they still can’t accidentally reset a form. (Maybe set display:none and use JavaScript to show it so users don’t see a useless button)
  • Use splash pages
    • Unless your splash page contains useful information, remove it. It slows the visitor down and may stop them from entering the site if it makes a bad impression.

Leave a Reply