How can I see the structure of a webpage inline?

How can I see a webpage's structure "inline" with the visual representation of the actual page, all at once?

I'm trying to understand HTML layout better, but it's hard to get a feel for it, even having the source open on a separate monitor, because there's just so much expansive and miscellaneous code. I suppose I could sift through it, clean it up, and set up some type of custom collapsible tree system, but that would take too long for the amount of pages I'd like to get a quick view of the layout/structure of.

For reference, I'm using Firefox for my internet browsing.

Coldblackice

Posted 2013-05-15T18:07:57.087

Reputation: 4 774

Truth be told, it's actually easier to write your own code rather than try and decipher the spaghetti of code that is the random internet web page. This way you'll learn better, too. Also, try the 3D layout - go into the Inspector and click on the cube button. This will give you a 3D visualisation of the elements/structure. – Wk_of_Angmar – 2013-05-16T16:37:04.853

Answers

I believe that I know what you are trying to do.

While you are on the website in Firefox, click the tools tab on the top of the browser.

Hover over to the Web Developer submenu and click Inspector.

In the Inspector, you can hover your mouse over the item that you want to see the code for and observe it here.

It works great for me as I edit the HTML code of my website all the time.

I hope this works for you (if it does, please confirm my answer). Thank you.

HelpingHand

Posted 2013-05-15T18:07:57.087

Reputation: 351

As others have mentioned, web developer tools are good for this type of work/learning. All modern browsers have this built in. Since you're using Firefox, you can just right click on the part you're curious about, and select "Inspect Element". This will load a separate pane, with the source, scrolled to the item of interest.

Another alternative is the Firefox addon Firebug, which is where most of these developer tools got their inspiration. Lots of overlap with the built in developer tools in Firefox, and mainly a matter of personal preference as to which you use. I tend to use Firebug since I used it from the start, and it's what I'm most familiar with.

The real nice thing about these tools is that they generally will highlight the area of the webpage that's a result of the HTML, will show you the calculated CSS, as well as what other CSS might have matched but wasn't applied, visualize the DOM for you, etc etc etc.

ernie

Posted 2013-05-15T18:07:57.087

Reputation: 5 938

1Clicking Inspect Element load the Inspector I referenced in my answer. – HelpingHand – 2013-05-15T19:15:46.203

Install Firebug addon for Firefox and use inspect element to see what is going on web page.

Nikolai

Posted 2013-05-15T18:07:57.087

Reputation: 520