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.
Using Shortcuts
The easiest way to open a webpage’s source code in Chrome is through the keyboard shortcut.
To open the View Source tab, pressCtrl + Uon Windows. On Mac, this shortcut is⌘-Option-U.
If you need to open the Inspect Elements tool, you need to pressCtrl + Shift + C. You can also press F12 or Ctrl + Shift + I to open the Developers tool and then go to the Elements tab.
Using Context Menu
The context menu (right-click menu) on Google Chrome’s web pages also includes the options to open the source code. You can choose to view the unaltered source code or the code after optimization by the browser.
By Editing URL
Another way to view the source code is by adding a code snippet to the URL. If you use the above options to view the page source, you might have seenview-source:in the source code’s URL address. You can 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.
Through Chrome Menu
It is also possible to open 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.
Tags or Elements
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.
Tags are not case-sensitive.
Attributes
These are the keywords that determine the additional properties of the HTML elements. They are also present inside the angle brackets but after the opening tag’s keyword. Some common attributes include class, title, style, id, etc.
For instance: Here’s a paragraph
Some specific attributes are case-sensitive, and the rest are case-insensitive.
