Menu
I'd like to analyze the structure of some complex web pages that I've visited. Manually parsing out tags in the HTML source is tedious and prone to errors.
I'd like to find a utility that will accept HTML source (or a URL) as input, and show the hierarchical arrangement of the HTML elements, including source and id attributes, preferably in a treeview.
I was confident that it should be easy to find such a tool, but a few Google searches haven't turned up anything for me. I'm still confident that such a tool exists. Can the community help me find something? (I'm a Windows user and of course would prefer free if possible.)
585
Each HTML document can actually be referred to as a document tree. We describe the elements in the tree like we would describe a family tree. There are ancestors, descendants, parents, children and siblings. It is important to understand the document tree because CSS selectors use the document tree.
You can use unordered lists to create a hierarchy (the <ul> and <li> tags). This can give you a tree structure which is semantically valid, and on top of that you can do whatever you like to express it in interesting ways, either through CSS or Javascript. Check out Listutorial for a great series of worked examples.
First we need to prepare the HTML. In the tree view we have Parent Nodes, Child Nodes, Nodes. To create nodes we will use the LI and UL tags of HTML. To represent the parent node we will use a LI tag just above the UL.
IE8+ and Chrome both have wonderful developer tools built right in. Just visit a webpage and in IE, press F12, and in Chrome, go to wrench->tools->developer tools. They both show the tree view of the page as well as let you modify it. They're both very powerful.
55
Most browsers have a DOM viewer built in. Firefox has a third party extension that provides this.
These will all show the DOM after error recovery has been performed by the browser, before then you can't be sure that a valid tree could be constructed.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
