View page source

Intro

As you learn more about HTML and web development, you might be curious how other websites are built. There are a couple of ways you can look underneath the hood of websites. One tool is the View Page Source tool in your browser.

Steps

First example

Let’s try out the View Page Source tool. Visit example.com again in your browser.

After you open it, right click on the page and select View Page Source. A new tab will open, where you can see the HTML code that makes up the page.

You might notice there’s some CSS code on the page, but you should be able to recognize some of the HTML elements that make up the page.

You can also use View Page Source on your websites.

Another example

Now let’s try a different example. Open up google.com in your browser, right click the page, and select View Page Source.

The code on this page doesn’t look like HTML. That’s because the Google home page is mainly using JavaScript, which is a different language. The code also appears to be minified, which means the extra spaces and new line characters have been taken out (the computer doesn’t need these extra spaces or lines to understand the code).

In conclusion, this tool is helpful on some sites that mainly rely on HTML, but not as useful as other sites that rely on JavaScript.

In a future course, we’ll learn about a different tool called Inspect that also lets you look underneath the hood and that’s useful for all sites.