Make Your Code Better: Tips for better markup.

Working with other people's code can be a royal pain in the arse. What's worse is when people don't even bother to check that what they've written. Here's a list of the most common things I have to fix, and what should be done to fix them. Clean, well written HTML runs better, has less visual erros when you try to add style and is easier to manage. What's the advantages to doing it wrong in the first place? Personally, I think none.

• Unclosed Tags

  This is the most basic error and most common problem. If you open a tag, close it when you're done. Some tags dont have closing tags, like <img> <input>, <br> and <hr>. In XHTML, these should always be closed by adding a trailing slash.

  <br>

  <br />

• Enclose all attributes in quotes

  If you use an attribute, make sure it's enclosed in quotes. It's not difficult, it's just plain lazy not to.

  <img src=/images/test/jpg alt=test image title=test image width=100 height=100>

  <img src="/images/test/jpg" alt="test image" title="test image" width="100" height="100" />

• Fieldsets in forms

  Forms must have at least one <fieldset> to pass validation. Fieldsets are very useful as they allow you to group together related sections of larger forms. A basic form should look a little like this:

  <form method="post" action="#">
  <input type="text" id="yourname" />
  <input type="submit" id="submit" />
</form>


  <form method="post" action="#">
 <fieldset>
  <input type="text" id="yourname" />
  <input type="submit" id="submit" />
 </fieldset>
</form>


• Do not use deprecated elements and attributes

  <b>, <u>, <i> and <small> tags amongst others are no longer valid in XHTML strict. All presentation should be done through stylesheets. <strong> and <em> are almost replacements for <b> and <i>, but have a semantic meaning in XHTML. <em> is for empahised text, and <strong> is for strongly empasised text. Where bold text is needed purely for presentational means, styles should be applied using CSS. Also forms will no longer pass validation with the name attribute, the id attribute should be used instead. HTML pages with these deprecated elements will still validate providing they are enclosed within <p> tags, but will not be around much longer. Just remember, if it's a title, use a heading!

  <b>Welcome to incubus</b>

  <h2>Welcome to incubus</h2>

• Tables are for tabular data, not for layout

• Border is not a valid attribute in XHTML 1.0 strict

  Stylesheets can do this job. Use them! You can achieve the same effect through either inline styles, by setting a class name for images that you do not wish to have a border, or, if all images are to be without borders you can add a rule to your CSS which will remove borders from all image tags.

  <img src="/images/test.jpg" alt="test image" title="test image" width="100" height="100" border="0" />

  <img src="/images/test.jpg" alt="test image" title="test image" width="100" height="100" />
  
  And and to your stylesheet: img { border: 0; }

• Align is not a valid attribute in XHTML 1.0 strict

  Float and position can be used in CSS to position things on screen.

  <p align="right">Text is here<p>

  <p class="right">Text is here<p> And add to your stylesheet: .right { float: right; }

• Encode & and other special characters

  Ampersands (&) should be encoded wherever they appear in XHTML. There are other characters which should also be HTML encoded instead of just being typed. Some include: ", &, £, >, <. A good source to view these is found here

  http://domain.com?contentid=500&chapterid=2

  http://domain.com?contentid=500&chapterid=2

• An id can only be used once per page

  If you need multiples occurances of a particular style, consider using a class.

  <p id="redtext">Warning!</p> <p id="redtext">Another Warning!</p>

  <p class="redtext">Warning!</p> <p class="redtext">Another Warning!</p>

• Forms

  Use a label for each input and reference it to the right one using for="". If you're making a form, to disable, check or select an item by default, use selected="selected", checked="checked" or disabled="disabled".

  <input type="text" name="checkbox1" id="checkbox1" /> I want one of these

  <input type="text" name="checkbox1" id="checkbox1" /> <label for="checkbox1">I want one of these</label>

  Building forms this way will allow users to click the text in the label to select the input.

• Us the correct doctype

  <html>
 <head>
  <title>This is the page title</title>
 </head>
 <body>
  <p>
   This is my page
  </p>
 </body>
</html>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title>This is the page title</title>
 </head>
 <body>
  <p>
   This is my page
  </p>
 </body>
</html>

• Do not put block level elements inside non block level elements

  <span><div>text</div></span>
<a href="#"><h2>title</h2></a>

  <div><span>text</span></div>
<h2><a href="#">title</a></h2>

• Tag names and attribute names should always be lowercase

  <DIV>, or
  <img SRC="/image/text.jpg" />

  <div>, or
  <img src="/image/text.jpg" />

• Use headings for headings!

  If it's important enough to be considered a heading, it's improtant enough to use a heading tag. Not only is this more useful to search engines, it's more useful to visitors to your site.

  <p style="font-size: 22px;"><strong>Main Heading text</strong></p>
<p><b>Another not so important sub heading</b></p>

  <h1>Main Heading text</h1>
<h4>Another not so important sub heading</h4>

• Do not put ANY presentation code into the page

  All styling should be done with stylesheets. Things to avoid include font tags, and unecessary bold and italic tags

• If you use a javascript link, provide a fallback for people who do not have javascript enabled

  use onclick and onkeypress for javascript code, and href="you/link/here/" for the fallback. This isn't always possible, but it is necessary to pass accessibility checks.

  <a href="javascript:doSomething(HelloWorld);" title="pretend javascript code">Click me!</a>

  <a href="/the/link/to/the/fallback/page" onclick="javascript:doSomething(HelloWorld);" onkeypress="javascript:doSomething(HelloWorld);" title="pretend javascript code">Click me!</a>

• Make sure all links and images include a title attribute, and that all images have an alt attribute.

  <a href="#">This is a link</a>
<img src="/images/test.jpg" height="40" width="100" />

  <a href="#" title="a brief description of the link">This is a link</a>
<img src="/images/test.jpg" height="40" width="100" alt="a brief description of the image" title="the name or a bief description of the image" />

• Make sure all tabular data is in tables and that each table has a summary

  <table cellpadding="0" cellspacing="0">
  <tr>
    <td>
      Table cell content
    </td>
  </tr>
</table>

  <table cellpadding="0" cellspacing="0" summary="table summary in here">
  <tr>
    <td>
      Table cell content
    </td>
  </tr>
</table>

• Nest tags correctly.

  <div><a href=""></div></a>

  <div><a href=""></a></div>

• Validate the page!

  No excuses! Run it through the validator over at te W3C or try the one at HTMLHelp. Either or both of these will show you exactly where you're going wrong.