Canonical HTML Template

Enterprise Web Standards for HTML

MarkUp Essentials

  1. HTML and CSS should validate with no errors or warnings.
  2. Pages should not produce errors or warnings when validated with the Firefox Accessibility extension.
  3. In HTML that is part of a reusable template, every element should have an ID.
  4. Do not use inline style or event handler attributes (onmouseover, onblur, etc).
  5. In hyperlinks, do not use # as a value for href.
  6. Every link should have a meaningful title attribute.
  7. Tables should only be used to display tabular data. Do not use tables for layout.
  8. Use camel case for names (classes, IDs, variables, etc).
  9. Every div (and other tags that encompass large blocks) should be commented so as to identify both the beginning and ending tags.
  10. Only use CSS hacks that target the current or an older version of a browser.
  11. Use unicode character entities such as ®, ©, —, and ™.
  12. Use semantic tagging (address, abbrev, acronym) where appropriate.
  13. Use microformats where applicable.
  14. Reference one-and-only-one JavaScript include and CSS include.

MarkUp Wish List

If possible, CSS sprites should be used, instead of multiple image assets. That would imply that the template will only reference 1 image.

In Conclusion

Though generating valid, semantically correct code can be time-consuming, doing so makes the UI more flexible and accessible to a wider audience. We don't expect developers to have all the answers. Don't hesitate to ask questions and, most importantly, don't forget to have fun!