How to Inspect HTML Source Code of a Website?

How to View Source Code on Different Devices ?

Edge/Internet Explorer: View Source Code

• First, right-click anywhere on an open tab and then select “Inspect” from the menu.

Alternatively, you can press F11 in Windows, which will work on most desktop and laptop models.

• Select the “Control + Shift + I” keys to view the page source through the keyboard and open the Edge developer tools section.

• Next, simultaneously press the “Alt + F” keys and select “More tools” followed by Developer tools.” 

  
  Ultimately, you should be able to view the source code to look something like this:

You can adjust the height by dragging and clicking on the three-dot horizontal icon on the developer tools menu bar to change its position to the top or bottom or to open it in a new window.

Though DevTools has many menu items, you must use only a few to analyze Edge's website source code.

Click below to learn how to inspect HTML source code!

• Understand Website Structure
• Learn Web Development
• Customize User Experience

Let Us Give You Ideas!

Google Chrome: View Source Code

You can use Google Chrome's developer tools to view your page's source code like search engines do.

1. Open the relevant page of your site in Google Chrome.
2. Open the page's source code view:
3. Right-click the page and select View page source (or View source). Alternatively, you can press Ctrl + U on your keyboard.
4. Open the developer tools:
5. Press the F12 key on your keyboard.
6. Click the Customize and Control DevTools icon at the top right. 
7. Hover over More tools and select Network conditions.
8. Deselect Use browser default under User Agent.
9. Select Googlebot from the drop-down menu.
10. Finally, refresh the page, and your tab should look something like this

For Opera - Press CTRL + U. You can also right-click on the webpage and select “View Page Source.

1. You can also view the page source with elements in Opera by clicking the "O" button on the page, which appears in the upper-left corner of your browser. Scroll down the menu and click "Developer tools."
2. Scroll down the menu and click "Developer tools."
3. Then, click the "Elements" tab, which opens up a new menu on the right side of the screen.
4. If this menu doesn't appear, you may have to choose more tools and show the developer menu.
5. You can also use "F12" or "Control" + "Shift" + "I" to access the developer tool, which allows you to make real-time changes to coding.

Safari: View Page Source Code

1. Once you've enabled the Develop menu, there are several ways to view the page source in Safari.
2. Open any website in Safari and right-click the blank space on the page. Now, select "Show Page Source." You can also get to this menu by using the keyboard shortcut Option+Command+u.

1. Browsing the Internet with Safari makes it easy for the user to locate illustrations and other visual aids present on the page of interest. Additionally, several directories exist, like Images and Fonts, located in the sidebar on the left side of the screen. If you need pictures of your choice, click on the “Images” folder.
2. Once you've selected an image, you can easily view its details by opening the details sidebar. To do this, click the button at the top right of the console, just below the gear icon. You can also use the shortcut Option+Command+0 to open the details sidebar.
3. Click "Resource" at the top of the details sidebar to view details, such as the size of the image and its full URL.
4. One can easily change the console position in the page source. Two buttons are in the top left corner of the console, next to the X button. Dragging them with a rectangular icon will move them to a different side of the browser window as the console is shifted.
5. You can click the two-rectangle icon to open the page source console in a separate window. This will detach the console and open it in a separate window.
6. If you want to see the code of a specific element on the page, right-click that element and select "Inspect Element." This will take you immediately to that selected element's code.

Firefox

1. The easiest method for viewing the page source is to right-click and select “Page Source.”
2. Alternatively, you can navigate to the “Tools” menu, select “Web Developer,” and click on “Page Source.” The keyboard shortcut is Command + U.

1. Type about:config in the address bar of the Firefox browser and press Enter.
2. Next,  click on “Accept the Risk and Continue” button to open Firefox’s hidden secret advanced configuration page i.e. about:config page.
   • Now type view_source in the Search filter, double-click on the option, and set it to “false” if you want to the source code to open in a new window or “true” if you want it in a new tab.

Chrome: View Page Source

1. First, click on “Navigate”
2. Next, go to “View,” and click on “Developer.” 
3. Finally, click on “View Source” and you should see the editor below:

You also can right-click and select “View Page Source.” The keyboard shortcut is Option+Command+U.

Title Tags

Title tags are HTML codes that enable you to give your web page a title. Since they play a decisive role in helping your website rank on search engines, not including them or creating them poorly could lead to SEO issues.

Your title tag and meta description would look something like this on Google Chrome:

Additionally, you can follow the steps for viewing source code on Chrome to analyze the title tag as shown below:

Your site's URL, hN tags, ALT attributes, title tags, meta descriptions, and inbound and outbound links contribute to its SERP performance.

Meta Description

Another SEO essential is a meta description within your HTML code's head section. Meta descriptions outline what your site visitors can expect upon clicking a link. Thus, meta-descriptions are the “deciding factors” on which your site’s page view sessions or bounce rates hinge. Make sure that all your web pages have a meta description, but they are not duplicated across the board. Some additional points to consider include:

• Your meta description should be within your HTML code's <head> section.
• Remove duplicate title tags and meta descriptions.
• When using a content management system such as WordPress, recheck duplicity errors. 

When all’s well, your meta description should appear like this in Chrome’s source code.

Page Security

Click on “Dev Tools” and check the following elements on your website to ensure they are secure. 

• A secure certificate
• A valid HTTPS
• Encrypted and authenticated connection

• Securely reserved resources

Rendering of Main Elements

You must know Document Object Model specifications for HTML and XML documents to confirm that your site’s elements look exactly how you want them to. DOM elements are a breakdown of the page’s source code from the user’s point of view. You can check the web page's source code to access the DOM tree and its subsequent DOM elements. 

If you note that a particular section does not render properly in the DOM, you can have it fixed.

Check Scripts

Although you may want to add scripts to your web page to boost its functionality, you must know that adding too many of them can slow your page’s loading time, thus increasing your bounce rate. Ensure the following parameters  when it comes to scripts on your website:

• They should be at the bottom of the page, near the <body> tag of the HTML code
• Have all scripts in a single .js (JavaScript) file linked to the HTML at the bottom of your page
• Ensure that your tracking code (from Facebook or Google tag) is properly installed
• Check if your HTML is hacked by identifying strange scripts on your page source

This is how your HTML’s script looks on the web page source

Check Hidden Files

Check your HTML’s “display: none” property to see files that should not be hidden but still are. Usually, these files are combined with Javascript or SEO specialists to boost your site’s ranking and functionality. Sometimes, content gets mistakenly hidden. However, hidden content can emanate from plugins installed by dishonest agents to enable your site to manipulate search engines for ranking better. Also, CSS can be manipulated via:

• Content outside the viewable area
• White font on a white background
• Masked divs
• Invisible text

How can you check these hidden files to ascertain whether or not they are malicious? Simple, view your source code and then press the following:

1. Cmd+Opt+F (Mac)
2. Ctrl+F (Linux)
3. Ctrl+shift+F (Windows)

Enter "hidden" or "display: none" in the search bar to reveal all hidden files. If this function/style is unwanted, consult your developer to reverse it.