Point studios

• #document
  • HTML
    • HEAD
      • TITLE
      • META (6)
      • LINK (7)
      • SCRIPT (2)
    • BODY
      • DIV (wrapper)
        • H1 (logo)
        • A (skip to content)
        • DIV (top navigation)
        • DIV (content)
        • DIV (side bar)
        • DIV (footer)

A semantic structure is simply a structure that uses HTML tags for what they are designed to be used to, for example use <table> only for tabular data like a data table or calendar, use <div> for divisions of a document only not every block-level element you want to style, for navigation links and all links <a> should be used not <img/> even if you want the link to be an image it should be handled by CSS as this is a presentational effect not structural except if you really need an image link like if it will enlarge the image or go to a page related to the image subject, semantically structured links could be handled by any of the image replacement techniques, to get the desired look.

All this introduction just to tell you about a new applet called HTML DOM Visualizer, just give it a URL and it will generate it's DOM tree.

It's very useful as it kind of shows how clean and semantic your site is. representing the tags with circles according to it's type, here is point home page DOM tree, here is also a screen shot that has explanation on it if you get lost, check also some other popular sites trees.

Having a clean semantic document has a lot of benefits, it's more logical for machines to understand that mean more compatibility as old browsers and other devices like mobile phones or PDA's will understand it and render it on it's screen to be logical and meaningful for who's reading it, it will also be more logical for other machine type things to read like search engine robots giving it higher search ranks & screen readers making it more accessible and logical for disabled users. Now what are you waiting for, go check your site and get it cleaned up.