Source HTML vs. Rendered HTML

Key Takeaways

did you ever inspect the source of a website and wondered why it looks different from what you see in your browser when you open the same website or maybe you heard about the rendered html or the dom and don't know how these are different from what you see in view source for instance then this video is for you in this video i would like to take you on a journey behind the scenes of your browser so let's jump in [Music] to understand what happens between a server sending some html into your browser and the browser showing you the website in all its glory we need to start at the moment where you hit return in the address bar and ask a server somewhere on the internet to give a website to you the first step to get a website into your browser is to send an http request to the server that is hosting the website once the server receives the request the server chooses how to respond to it that can mean running a program like a php script or a java program or whatever or simply sending back the content of a file for this video we will skip over what exactly the server does and focus on the fact that the server usually starts sending a bunch of html back to the browser many people think of the html that was sent from the server as the same as the website you will see in your browser but that isn't really accurate instead we could say that what you see in the browser is a dish and the html that was sent is the recipe the browser needs to prepare or cook the dish based on the recipe it received from the server it turns the html into a number of visual and sometimes interactive elements that then show up on your screen the interesting part is what happens between the html and what you see in your browser this is called rendering let's look a little closer at rendering to see what happens in between the beginning the html that comes from the server and the end the interactive website that you well interact with to understand the difference between the html that we received from the server the so-called source html the rendered html and the dom we need to look closer at this rendering process the rendering process is a series of steps that start with the source html and if included the styling information in the css the browser starts by parsing the source html and if available any css found inside which creates two tree-like structures called the document object model dom for short and the css object model css om for short for us the dom is the more important of the two models so we'll focus on it from now on for our website for example the browser would create the following dom tree the browser needs this tree to identify individual elements on the website and their relationship to other elements like for instance which text belongs to the heading and which to the paragraph or what file is the source of this image the browser then takes the dom and cssom and figures out how to fit all this stuff into the browser window this is called layouting and creates a render tree the render tree basically contains the sizes and positions on the screen for each of the elements in the dom the browser uses this tree to paint the actual pixels that make up what we see in our browser window it is important to understand that once the browser shows us the website it may use javascript to allow us to interact with the website the javascript might then change the dom by adding changing or removing elements in the tree for example when i click this button it adds an image to the dom and thus to the website on the screen here we can see this in action on the left you see the interactive website on the right you see a representation of the dom that the browser uses for this website whenever the button is clicked the javascript adds a new image to the dom tree and the browser renders it in the previous example the dom tree might look different at any moment depending on what happened before the dom itself only lives in the browser memory and isn't visible per se but we can represent it in different forms one such form is the interactive tree view that we saw in the browser developer tools on the right hand side of the previous video alternatively we could turn the dom tree back into html we call this the rendered html when we turn the dom tree back into the rendered html we might get different results depending on what happened to the dom tree before for example the rendered html of the previous example website is exactly the same as the source html as long as the button was not clicked as the button is clicked javascript will run and we'll change the dom and in turn the rendered html now you may already wonder what is it that i see when i click view source in my browser well it's the source html or is it the rendered html there are three ways to see the source html coming from the server first and probably most known is to right click on a web page and select view source or typing view dash source colon in front of the url that shows you the source html alternatively you can also go into the developer tools on your browser select the sources tab and see the source html there here you can see that the right side shows the original html without the images that are currently visible on the website a third way is to use the network tab in the browser developer tools where you can also see the html that was sent back from the server but what options do i have if we want to see what's in the dom well again the browser developer tools have us covered the dev tools contain a tree tree-like representation of the dom that we can explore and interact with we find this in the elements tab in chrome you may notice that unlike the other dev tools panels and the view source this shows us the current dom content including the images that were added by javascript if we wanted to we can turn the dom back into html this can be quite complex thanks to things like the shadow dom or cross origin iframes but for simpler websites you can get the rendered html by going into the devtools console and running this javascript snippet again please note that this isn't always working especially for more complex websites for debugging i recommend that you use the url inspection tool in search console to get the rendered html that google search uses for indexing of a page all right so that was quite alright let's summarize what we learned today we started with a source html that's the html that a server sends to our browser when we open a web page then we learned that the browser turns this html into the dom that is an interactive element by element representation of the website constructed from the source html the dom can change as javascript might modify it while the page is loading upon the user interaction or other events while it is open in the browser and then last but not least we identified rendered html as a snapshot of that dom turned back into html the rendered html reflects the dom content on the page at the time the snapshot was taken to see the rendered html you can use the url inspection tool in the google search console so now we've looked at what's the source html the rendered html and the dom and explored what tools you could use to debug issues on your websites what tools are you using to debug issues on your websites let us know in the comments below and also thanks a lot for watching and please like and subscribe to stay in the loop with our latest and greatest content around google search thanks a lot and bye bye want more technical seo antics catch me on the search of the record podcast where we talk all things google search go behind the scenes and who knows maybe discuss my love for javascript yay join me martin and the google search relations elves and check us out wherever you download podcasts [Music]