How is the search results page for Google created?

Question

Initially I wanted to ask why the 'Inspect Element' and 'View source' options on Google chrome were returning different results for a page that contained the search results of a query on Google, like this:

Then I got to know from the following links that when you 'View Source', it shows the raw HTML from the server as received, and when you 'Inspect element' it shows the code obtained after constructing the DOM tree:

Chrome: Inspect Element vs View Source chrome: difference page source and inspect element? http://productforums.google.com/forum/#!topic/chrome/46KsUR20Erc

Ok, so I get it - the inspect element option lets the browser construct the DOM tree and hence I see the 'h3' tags for each search result's headline; but what I'm wondering is, what created this tag? If I do a simple 'view source' on the results page and look for the text 'h3', I should be able to see something right? Maybe not exactly like but probably something else?

Answer 1

the inspect element option lets the browser construct the DOM tree

No. The browser constructs a DOM tree from the HTML. It then modifies it as required by any JavaScript. The DOM Inspector just provides a different UI on to it, the tree is already constructed.

If I do a simple 'view source' on the results page and look for the text 'h3', I should be able to see something right?

Only if it appeared in the HTML and wasn't generated from Javascript.