Viewing the source code of any HTML page is a good way to learn HTML for beginners as well as intermediate programmers. Also, if you need to extract data from sites that don’t restrict such actions for your web scraping projects, you must understand the code blocks and tags on the source code.
Google Chrome allows you to check the source code of any webpage in two ways. One way is to view the source HTML code directly from the web server. It usually opens as a single “View Source” tab.
Another way is to check the code after the web browser has optimized the real source code and added any Javascript manipulation. Chrome shows this as the Inspect Elements tool, and this utility is actually there for the benefit of any developer.
The easiest way to open a webpage’s source code in Chrome is through the keyboard shortcut.
To access the View Source tab, pressCtrl + Uon Windows. On Mac, this shortcut is⌘-Option-U.
If you need to access the Inspect Elements tool, you need to pressCtrl + Shift + C. you may also press F12 or Ctrl + Shift + I to open the Developers tool and then go to the Elements tab.
The context menu (right-click menu) on Google Chrome’s web pages also includes the options to access the source code. you may choose to view the unaltered source code or the code after optimization by the browser.
Another way to view the source code is by adding a code snippet to the URL. If you utilize the above options to view the page source, you might have seenview-source:in the source code’s URL address. you may actually enter this code manually to perform the same task.
This method is also useful if you want to view the source code on mobile devices as they usually don’t offer other methods.
It is also possible to access the Inspect Elements tool from within Chrome’s control menu. Here, you canopen the Developers toolwhich includes Elements along with other tools such as the Chrome Console.
Understanding Source Codes
After viewing the source code, you need to know Hypertext Markup Language (HTML) to be able to analyze and read the source code. If you are not that familiar with this programming language, here are a few things about the code to help you get started.
These are the main keywords in an HTML code. They are closed by ‘<>’ and represent the type of content. An element usually consists of the opening and the closing tag to show the start and the end of the element’s content respectively. But some elements only use a single tag.
For instance: Here’s a paragraph
“Here’s a paragraph” is a paragraph element enclosed by the tags and that specify this content as a paragraph.
