Structure of Web-based Documents
Structuring your Web site with semantically correct HTML will help all users navigate through the site. In addition, anyone using assistive technology will be able to read your site with ease. The following points will help you design your site universally.
- Make sure people who have lower bandwidth or use older browsers can access your page by providing the Google shiv code in the HTML. This code,
<head> … <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> </head>
will help users who are still using Internet Explorer version 9 or older to view information presented in HTML5. - Use the correct file format for images so they will not take very long to load.For simple images with few colors, use the PNG file format. For photographs with lots of color and variation, use the JPEG format. For animation, use the GIF file format.
- You must optimize images for the Web. This can be done in Photoshop and some other photo-editing programs. Optimizing images compresses them for easy use on the Web. You should aim to size images to less than 100kb.
- Provide the
alt
attribute for images with appropriate text describing the image. This alternate text will display if an image is broken and will help people using screen readers to know what the picture was about. - Use the
abbr
element to clarify abbreviated words the first time they appear in a document - Title pages using appropriate and useful information. Make sure users can easily navigate back to your page using the title as a guide.
- Use semantically and structurally sound HTML, and validate it through the W3C Markup Validation Service.