View a website’s source code

To gain an insight into how your website is built, checkout its source code.
How you do this varies depending on the browser you are using, so here’s how to do it for these browsers:

Internet Explorer

Method 1: Menus

Go to menu item View | Source
Cant see the menus ? Press the F9 key to display them

Method 2: Right mouse click

Right Mouse Click on the web page
Scroll down to select View source

Firefox

Method 1: Menus

Go to menu item Tools | Web Developer | Page Source
Cant see the menus ? Press the F10 key to display them

Method 2: Right mouse click

Right Mouse Click on the web page
Scroll down to select View page source

Method 3: Keyboard shortcut

Press Ctrl U (ie hold down Ctrl then press U)

Chrome

Method 1: Right mouse click

Right Mouse Click on the web page
Scroll down to select View page source

Method 2: URL Qualifier

Add view-source: before the website address in your address bar and click go or hit enter e.g.

view-source:http://www.theinternet.marketer.com.au

 

Source Code
Don’t be overwhelmed by Source code. It looks complex but its fairly simple  (in most cases)
website source code can consist several ‘languages’ which may add to confusion so identifying which type of code can be helpful in unravelling how your website works. Source code Colour coding is also a very helpful indicator.

Typically source code will comprise:
- HTML code that start with a less than symbol ( < ) and ends with a greater than symbol ( > )
- Scripts that start with <script> and end with a </script>

Finding elements in your source code

If you are looking for a specific element or text then use the browser’s inbuild page search.
Again this is specific to the browser you are using, but typically:

Start your search by typing  Ctrl F (ie hold Ctrl then press F) then enter your search term.

Hits on your search are usually colour coded in the page
Some browsers will chime if they cant find your search term

Examples

Here’s a couple of examples of how examining source code can be helpful:

Is Analytics installed ?
If I wanted to check to see if Analytics was installed in my site, I’d view the source code then search for analytics

What is my Title meta tag ?
View the source code then search for title

What is my Description meta tag ?
View the source code then search for description 

Does this site use H1 ?
View the source code then search for h1

 

 

 

Tagged as: View source code