How to View Any Website’s HTML Code in Any Browser

0

According to data from Satcounter, in June 2022, the most used browser worldwide on computers is Google Chrome, with a 66% share. In second place, and growing steadily, is Microsoft Edge Chromium with just over 10% market share. In third and fourth position are Safari (which we will not discuss in this article because it is not available for Windows) and Firefox with a market share of 9.1 and 7.6% respectively.

The ranking of the 5 most used browsers in the world on desktop platforms closes (on mobile devices, things do not change much) with Opera, a company that is now behind a conglomerate of Chinese companies, with a share of 2.6%. Taking into account the most used browsers, below we show you how to access the HTML code of any website using different browsers.

What is the HTML code of a website and what is it used for?

All browsers include a feature called developer tools, web inspector, element inspector… whose main purpose is to allow the user access the HTML code of the site, to the source code of the web that we visit in order to analyze the operation of the different elements that compose it, detect errors and work on a solution. It is also particularly useful for users who are taking their first steps in web design.

Each browser uses a different inspector implemented in the base browser. In the case of Chrome, Edge and Opera, being based on Chromium, the inspector used is exactly the same. The only thing that changes slightly is the layout and navigation options.

When accessing the HTML code, all information is classified into different tabs to facilitate access to all the sections that make it up. If our knowledge is very high, by accessing the Elements tab we will have more than enough.

From the Elements tab, we can access all the HTML code on the web. If we move the mouse over the different lines of code in the inspector, we will see how the content it refers to on the web is highlighted to indicate which section of the web it refers to.

With Google Chrome

The developer tools available in Google Chrome is the function that allows us to access the HTML code of all the websites we visit. Google’s browser offers us three different methods to access this tool, methods that range from a keyboard shortcut to a function key through the Chrome configuration menu.

  • F12 key. This is the fastest way to access the Google Chrome developer tools, as long as we don’t have a small keyboard and have to use the function (Fn) key. The first time we use this button, the browser will allow us to associate the operation of this key with this function.
  • Control + Shift + i. If you have adopted keyboard shortcuts in your daily life to increase your productivity and reduce your mouse dependency, you can use this keyboard shortcut to access Chrome code.
  • through the menu. From the Google Chrome configuration menu, we can also access the Tools menu to inspect the code, by clicking on the three vertical dots located in the upper right corner. Then we go to More tools and finally click on the last option: Developer tools.
  • With the right mouse buttonwe can access both web source code and developer tools.

Through Microsoft Edge

If we want to access the HTML code of the page where we are with Microsoft Edge, the Microsoft browser offers us three different methods. It’s no surprise that all three methods are the same as in Google Chrome, since both are Chromium-based and share the same browser base.

Unlike Google, Microsoft calls this tool Development Tools, a tool that we can access using one of the different methods that we show you below:

  • The F12 function key. As with Chrome, this is the fastest and easiest method. The first time we use this button, the browser will allow us to associate the operation of this key with this function.
  • with the shortcut Control + Shift + i. Putting one more shortcut in your life if you’ve already got into the habit of using them, that won’t be a problem.
  • from the menu. Click on the three horizontal dots located in the upper right corner. Next, click on More Tools and finally click on the last option: Developer Tools.
  • To access the source code of the website we are on, press the right mouse button and select the View page source code option. If we select the Inspect option, the Edge developer tool will be displayed.

If this is the first time we access the developer tools, the browser will ask us if we want to open the Microsoft Edge developer tools.

From Firefox

Mozilla Foundation’s Firefox is the only browser on this list that is not Chromium-based, so the above methods should theoretically not work, however, they do not, because they are exactly the same.

firefox html code

However, the main difference that Firefox offers us compared to the rest of the browsers is where the code inspector of the web where we are is displayed. While all Chromium-based browsers display web code on the right side of the browser, Firefox chooses to display this information at the bottom, making the information displayed more accessible.

If we want to access the Developer Tools panel through Firefox, we have the same 3 options with Chrome and Edge Chromium.

  • F12 key. Pressing this function key will cause Firefox to display the Developer Tools at the bottom of the browser.
  • Using the keyboard shortcut Control + Shift + i The HTML code of the website where we are will open.
  • If you are one of those users who find it difficult to let go of the mouse, you can access the HTML code of a website via the firefox options menuby clicking on the three horizontal lines located in the upper right corner of the browser and on More tools > Developer tools.
  • From right mouse button, we can access the HTML code of the web by selecting the option View source code of the page. But, if we want to access the Developer Tools panel, we need to select the Inspect option.

Opera

Although Opera is based on the Chromium project just like Google Chrome and Microsoft Edge, the methods that this browser makes available to us are not the same. Where it coincides with other browsers based on the same project is where it is displayed, which is none other than the right side of the browser.

Opera HTML Code

The different methods that the Opera browser offers its users to access the HTML code of any page are as follows:

  • With the keyboard shortcut Control + Shift + i, the same keyboard shortcut that all browsers have adopted as universal, regardless of the project they are based on. A shortcut is also available Control + Shift + c
  • Right click and select the option Inspect element from anywhere on the web.
  • The HTML of the web we opened in Opera is available from the right button through the Page Source option. To inspect the HTML code, from the same menu that appears when you press the right button, we must select the Inspect option.
Share.

Comments are closed.