familyresource.com

The Art of DOM

· By Jon Henshaw · Arts and Crafts, Lifestyles

Most of the people who read this entry will have no idea what I’m about to say. With that preface, I present to you the HTML DOM visualization of FamilyResource.com. HTML is the language Web pages are written in and the DOM is the document object model. In this case the DOM for HTML consists of objects like tables, anchors and images. Now that I’ve completely lost you, enjoy the art — I mean, the HTML DOM visualization of this website’s home page.

What do the colors mean?

  • blue: for links (the A tag)
  • red: for tables (TABLE, TR and TD tags)
  • green: for the DIV tag
  • violet: for images (the IMG tag)
  • yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
  • orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
  • black: the HTML tag, the root node
  • gray: all other tags

fr-dom.png

You can create your own HTML DOM visualization at the Websites as Graphs Web page.