Viewing Website HTML in our browsers

brackets iconIn this lesson we learn how to view HTML using the free Developer Tools in our browser.
Before we begin building our own websites let’s look at the HTML that websites are already sending us.
Doing this helps us to ‘demystify’ HTML and to realise that websites aren’t magic – we can understand them and learn to build them ourselves!

Use the buttons below to navigate through the lesson

img0
img1
img2
img3
img4
img5
img6
img7
img8
img9
img10
img11
img12
img13
img14


All modern browsers – for example Google Chrome, Mozilla Firefox and Internet Explorer – have built in tools that let us look at the HTML sent to us from a web server.
Let’s try using these tools now.
I’m going to use the Free Online Training Courses lesson “What is HTTP” (https://www.free-online-training-courses.com/what-is-http/) as my example. But you can use the current lesson.
Each browser is slightly different. In my example I’m using Google Chrome, so what you see might be different.

First I see the webpage I’m looking at:
HTML 2 - 1
In order to see the HTML that this page is made up of I PRESS F12. This works in Google Chrome and in modern versions of Firefox and Internet Explorer. If this doesn’t work for you you might want to try upgrading your browser or installing another one.

Pressing F12 brings up the Developer Tools, which looks like this.
HTML 2 - 2
I have highlighted the Developer Tools in red. Let’s take a closer look at it.
HTML 2 - 3
We can see there are many tabs we can click, each of which shows different information about the webpage we’re looking at (again if you’re in a different browser this may look different for you – be brave, click and explore the Developer Tools until you can find the HTML! ).

For now, we’re only interested in the “Elements” tab – we want to see the HTML elements that make up this page.

Because my “Console” tab is selected at the bottom I have to press ESCAPE to hide it. Now I can see the Elements tab more clearly:
HTML 2 - 4
Hopefully you can recognise that we’re looking at some HTML tags like the ones we learned about in the previous lesson.

You can see that the HTML here is more complex than our previous examples, but they are still the same principle: elements made up of tags that have attributes and contents.

Take some time to explore the HTML of a few of your favourite websites. It’s ok if you don’t understand it – for now we just want to get used to what HTML looks like, and to become familiar with using Developer Tools to view HTML that our browser is displaying.