Sharing What I Find

Instructional Design and Technology in Education

Visualize html code

Here is an interesting website that takes your URL, analyzes the html code and creates a visualization. You can see what makes up your page: links, tables, etc.

http://www.aharef.info/static/htmlgraph/

Here is a graphic for the CDE website front page: distance.uaf.edu

Picture 3

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

Try this with your favorite website or with one that you are working on to see what it looks like.

Author: Heidi Olson

Heidi enjoys working with content experts in developing eLearning courses to provide alternatives for students. Her other interests include faculty training in best practices for eLearning and researching eLearning tools to help fulfill learning outcomes. Having worked in the distance education arena for over 20 years, she has a wide range of experiences in supporting students and faculty as technology and pedagogy evolve.

Comments are closed.