How to view the HTML source code of a web page?

With the help of Internet Browsers, we can view the HTML source code. To access the source code in various browsers, refer to the content below.

Google Chrome

To open and view the source code for a specific web page in the Chrome browser, you may follow any of the below mentioned procedures.

To view source code only

Process 1:

Use the Ctrl + U keyboard shortcut to view the source code.

Process 2:

Move the cursor to the empty part of the web page and right-click. Choose the "View page source" option. Then a list of menus appears from them.

To view page sources, including elements

1. Open Google Chrome browser and move to the section for which you wish to know the source code.
2. In the browser window, move your cursor to the top right corner and select the "Customize and control Google Chrome" icon.
3. Now a drop menu will be displayed. Choose "More tools" from that and click "Developer tools."
   
4. Then a new window will appear towards the right direction of browser window. From that, select the Elements option which is located at the upper left corner in a tab, as represented in the picture below.
   
   Using the scroll bar towards the down, we can view the entire source code for a selected portion of the web page.

Tip

Pressing the F12 key or Ctrl + Shift + I keyboard shortcut in Google Chrome gets the interactive developer tool. The interactive developer tool will give better interaction with the source code and CSS settings which permits people to know how the modifications in the code influence the web page dynamically.

Mozilla Firefox

To open and view the source code for a specific web page in the Mozilla Firefox browser then you may follow any of the below mentioned procedures.

To view source code only

Process 1:Press and hold on the Ctrl key untill you press the U key to make Ctrl + U shortcut, which helps to view the source code.

Process 2:Move the cursor to the empty part of the web page and right-click. Choose the "View page source" option. Then a list of menus appears from them.

To view page sources, including elements

1. Open Mozilla Firefox browser and move to the section for which you wish to know the source code.
2. In the browser window, move your cursor to the top right corner and select the "Menu" icon.
3. Now a drop menu will be displayed. Choose "More tools" from that and click "Web Developer tools."
4. Then, a new section will be shown at the lowest part of Window. Then select the Inspector tab present in the upper left corner.

Tip

Pressing the F12 key or Ctrl + Shift + I keyboard shortcut in Mozilla Firefox gets the interactive developer tool. The interactive developer tool will give better interaction with the source code and CSS settings which permits people to know how the modifications in the code influence the web page dynamically.

To view the section of the page's source code

• Select the part of the web page for which you want to know the source code.
• Right-click on the highlighted section and select "View Selection Source".

Tip:

You may also use the Firebug add-on to see and modify the web page source code. With the Firebug add-on, you can know the changes made immediately using a browser.

Microsoft Edge

In Microsoft Edge, for viewing the source code of a web page, you can follow any of the below-given procedures.

To view source code only

Process 1:

Press and hold on the Ctrl key till you press the U key to make Ctrl + U shortcut, which helps to view the source code.

Process 2:

Move the cursor to the empty part of the web page and right-click. Choose the "View page source" option. Then a list of menus appears from them.

To view page sources, including elements

1. Open Microsoft Edge browser and move to the section for which you wish to know the source code.
2. In the browser window, move your cursor to the top right corner and select the "Settings and more" icon.
3. Now a drop menu will be displayed. Choose "More tools" from that and click "Web Developer tools."
4. Then, a new section will appears towards the right of the window. Then select the Elements tab at the upper corner.

Tip:

Pressing the F12 key or Ctrl + Shift + I keyboard shortcut in Microsoft Edge gets the interactive developer tool. The interactive developer tool will give better interaction with the source code and CSS settings which permits people to know how the modifications in the code influence the web page dynamically.

Microsoft Internet Explorer

To open and view the source code for a specific web page in the Microsoft Internet Explorer browser then you may follow any of the below mentioned procedures.

Process 1:

Press and hold on the Ctrl key till you press the U key to make Ctrl + U shortcut, which helps to view the source code.

Process 2:

Move the cursor to the empty part of the web page and right-click. Choose the "View source" option. Then a list of menus appears from them.

To view page sources, including elements

1. Open Microsoft Internet Explorer browser and move to the section for which you wish to know the source code.
2. In the browser window, move your cursor to the top right corner and select the "Tools" icon.
3. Now a drop menu will be displayed from that. Choose "F12 Developer Tools".
4. Then developer tools menu will appear. In that menu at the upper left side, select the DOM Explorer tab.

Tip:

If we press the F12 key in Internet Explorer, it gets the DOM tool. The DOM tool will give better interaction with the source code and CSS settings which permits people to know how the modifications in the code influence the web page dynamically.

Safari

First, you should turn on the developer options to view the source code for the web page, following the process below to know the method for enabling the developer options.

Accessing developer options in Safari

1. Click on the Safari browser to open it.
2. Choose the "Safari" option from the menu bar on the upper-most left side of the Window.
3. Then a drop-down menu pops up; choose Preferences.
   
4. Select the Advanced tab and tick the checkbox adjacent to the "Show Develop menu in the menu bar."
   
5. At the upper section of the screen, find the Developer selector present in the Apple menu bar.
   

To view the source code

Note: You should turn on the developer options to complete the following work.

Process 1:

1. Click on the Safari application and open it. Then move to the part of web page for which you wish to know the source code.
2. At the upper part of the screen is the Apple menu bar. Choose the Developer selector and click on the "Show Page Source" option.
3. Choose the Elements tab at the upper part of the developer tools area in the middle of the screen.

Process 2:

Move the cursor to the empty part of the web page and right-click. Then a list of menus appears from them. Choose the "Show Page Source" option.

Tip:

After you have turned on the developer options, you can use the Command + Option + U keyboard shortcut to get the source code.

Opera

In Opera, for viewing the source code of a web page, you can follow any of the below-given procedures.

Process 1:

Press and hold on the Ctrl key till you press the U key to make Ctrl + U shortcut, which helps to view the source code.

Process 2:

Move the cursor to the empty part of the web page and right-click. Choose the "Page Source" option. Then a list of menus appears from them.

To view page sources, including elements

1. Open Opera browser and move to the section for which you wish to know the source code.
2. In the browser window, move your cursor to the top right corner and select the "Opera" icon.
3. Now a drop-down menu will be displayed when you click on the Developer, then choose "Developer Tools".

In the top most part of the Window, select Elements displayed on the screen's right side.

Tip:

If we press Ctrl + Shift + I keyboard shortcut in Opera, it gets the interactive developer tool. The interactive developer tool will give better interaction with the source code and CSS settings which permits people to know how the modifications in the code influence the web page dynamically.

Android phone or tablet using Chrome

1. Click on the Google Chrome browser on your smartphone operating through Android.
2. Move to the section of the web page for which you want to know the source code.
3. Move to the address bar and shift your cursor before the URL.
4. Input the text as "view-source:" Choose Enter and then Go. For example, to get the source code for the Javatpoint homepage, enter "view-source:https://www.javatpoint.com."

Note: If the steps mentioned above do not affect your Android smartphone, use the process on the iPhone or iPad through the Safari section.

Tip:

When you feel hard to traverse the source code on your mobile phone or tablet by following the above process, you can also use an online tool to do the same work.

iPhone or iPad using Safari

Getting the source code for a web page on an iPhone or iPad is possible but will take longer. The entire procedure takes you to design a bookmark, allocate JavaScript code to it, and by that bookmark, you can get the source code on a web page.

Note: If you don't use an application to get the web page's source code, you can install the free View Source application using the iOS App Store.

Design a bookmark to view the source code.

1. On your iPhone or on iPad, go to Safari browser and tap on it to open.
2. Approach any web page?for example, www.javatpoint.com.
3. Then choose the More icon, which you can find at the lowest part of your screen that is indicated below the image.
   
   Another way to open the menu is through the Bookmark icon at the lowest part of the screen. Press and hold on to it till the menu is shown.
4. Then a menu will get opened; now, choose Add Bookmark option.
   
5. Select the bookmark name field. Click on the cross mark (x) enclosed in a circle towards the right to erase the present name, and then input the new name as View web page source code.
6. At the uppermost right side, you can find the Save option. Tap on it to save the bookmark.
7. Then copy the JavaScript code mentioned below.

1. In the Safari browser, you can get access to bookmarks by clicking on them. The bookmarks are present at the lowest part of the screen.
   
2. Search for the bookmark you have generated, then tap on the bookmark till you get a menu opened at the lowest part of the screen.
3. Now choose the Edit option from the menu displayed.
   
4. In the Edit Bookmark screen page, choose the URL by tapping on it, then click on the cross ("x") mark to erase the URL and paste the JavaScript code snippet into it.
5. Finally, choose Done present at the lower right corner of the screen, and the bookmark changes get saved.

Use a bookmark to view the source code.

After completing bookmark creation, the source code for a particular web page can be seen.

1. In the Safari browser, get entrance into the section of the web page to see the source code.
2. At the lowest part of the screen, choose the bookmarks icon.
   
3. Select the View web page source code bookmark you designed by tapping it.
   
4. Now another new Safari tab opens, showing the source code for the chosen web page.

Tip:

When you encounter trouble traversing the source code on your mobile phone or tablet through the above process, you can also use the online tool.

How to close the source code page or tool?

After seeing the source code for the particular web page, you wish to close that. The quitting method depends entirely on the process you have followed to open it.

1. When you have opened the source code for the web page using the Ctrl + U keyboard shortcut (excluding Edge) or by right-click process. Then exist, the new tab opens at the top part of the browser.
2. When you have opened the source code for the web page through the Developer named (i.e., through F12or Ctrl + Shift + I ), repeat the same keyboard's usage. Or you may also click or tap on the cross icon ("x") in the tools window at the top-right corner.

Use an online tool to view the source code.

You may also use online tools to view the web page source code apart from viewing the code through the browser only. The online tools will also provide formatting and style and spotlight the parts of code so that it becomes readable for the users.

Examples of such online tools are Source Code Viewer and HTML Viewer. If you type or paste the URL of the specific website, it displays the source code related to it.