CSCI A348/A548
Mastering the World-Wide Web
HTML Style: Guidelines
Contents
- Don't be browser specific (2 browser rule)
- Avoid non-standard extensions (some will catch on, some won't)
- Accent readability over flash
- Always use a title
- Use paragraphs liberally
- Always put quotes around the values of attributes, no matter what your book shows in examples.
- Never put tags in the title
- Make titles as short as possible
- Don't put important information only in the title
- Use physical only when a specific physical trait is desired
- Don't assume specific physical properties of content tags
- Don't assume specific physical effects even with the use of physical tags like
<strike>
- Don't assume specific heading sizes and styles
- Try not to mix physical styles, but never mix content styles
- Do not use unless it's absolutely necessary
- Always remember the semicolon on special characters like < and >
- Never use absolute sizes. When possible, use the general tags like <big>. When you can't, use relative size attributes like <font size="+2">.
- Remember that not all browsers support a wide variety of fonts. Don't count on fonts to make your point for you.
- Avoid using <br> to create exact spacing
- If you must use exact spacing, <pre> is the way to go.
- Indentation -- there is none. Possible solutions:
- You can use the Netscape <spacer> tag, but it only works in Netscape.
- You can use a small image instead, but your spacing will be hard to control, and doesn't show in non-image browsers.
- You can use a list and not include any <li> tags. But some browsers won't like you.
- You can use definition lists and use the <dd> tag. While most browsers will indent definition list items, some won't.
- Always remember to balance your end of list tags. See this page for an example of what can happen.
- Never assume a particular bullet type. Some browsers only support a simple disk.
- Use horizontal rules to break up sections of a long document
- Avoid unneccessary images in your documents
- Avoid having lots of images in one document -- break it up if you can
- If it can be done without losing too much information, use JPEG instead of GIF where possible
- Avoid using images for bullets
- Linking inline images from another site can cause problems
- Always use descriptive alternate text
- Relative links can be more easily moved around
- Don't put links right next to each other. Separate them with normal text or line breaks
- Use descriptive link text. Avoid phrases like "Click here"
- Use named links to provide easy navigation of long documents
- Try to avoid including ending space or punctuation in link text
- Don't use image maps just to use image maps. Make sure there's a reason to use graphics
- Always provide a textual way to get to all the links
- Try not to use busy backgrounds
- Try to avoid large background images
- Darker text on lighter backgrounds tends to be more easily readable than lighter text on a darker background
- Try not to change link and vlink colors
- Always make the text, links, vlinks, and alinks different colors
- If using a background image, always make sure that you set the background color so that the text can still be read if the image doesn't load
- Try to avoid using big tables
- Tables were not meant to be used to give columnar output
- Using height and width attributes can sometimes speed up table display
- Have a good reason for using frames
- Use <noframes> to be kind to those without frames
- Don't use frames if you have information several levels down that people will find important
- Embedded programs should be used to help the readability of pages, not slow their loading. Avoid frivolous applets
- JavaScript scripts often work much faster than Java applets, but they have limited utility. Use the right tool for the job
- Use the Meta tag to add authoring information to your documents
- "Keywords" is a good use of the Meta tag
- Use comments within the body to help guide your design
- Always sign your documents