Sunday, November 23, 2008

Make you web more semantic

Here are some guidline how to make your web page more sematic.

  1. Use only one <h1> tag per page, and use it to identify the main topic of the page. Think of it as a chapter title: you only put one title per chapter. Using <h1> correctly has the added benefit of helping the page get properly indexed by search engines
  2. Use headings to indicate the relative importance of text. Again, think outline. When two headings have equal importance in the topic of your page, use the same level header on both. If one is less important or a subtopic of the other, then use the next level header. For example, follow a <h2> with a <h3> tag. In general, it's good to use headings in order and try not to skip heading numbers. For example, don't follow a <h2> tag with a <h5> tag.
  3. Use the <p> tag for, duh, paragraphs of text.
  4. Use numbered lists to indicate steps in a process, or define the order of a set of items.
  5. To create a glossary of terms and their definitions or descriptions, use the <dl> (definition list) tag in conjunction with the <dt> (definition term) and <dd> (definition description) tags. <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
  6. If you want to include a quotation like a snippet of text from another Web site, a movie review, or just some wise saying of your grandfather's, try the <blockquote> tag for long passages, or the <q> tag for one-liners.
  7. Take advantage of obscure tags like the <cite> tag for referencing a book title, newspaper article or Web site, and the <address> tag to identify and supply contact information for the author of a page (great for a copyright notice).
  8. steer clear of any tag or attribute aimed just at changing the appearance of a text or image.
  9. When there just isn't an HTML tag that fits the bill, but you want to identify an element on a page or a bunch of elements on a page so that you can apply a distinctive look, use the <div> and <span> tags .
  10. Remember to close tags. The opening <p> tag needs its partner in crime (the closing </p> tag), as do all other tags, except the few self-closers like <br /> and <img />.
  11. Validate your pages with the W3C validator. Poorly written or typo-ridden HTML causes many weird browser errors.

No comments:

Post a Comment