Whether you are new to the web industry or a seasoned veteran, HTML source view different web pages is something you will probably do many times during your career.

For those who are not familiar with web design, viewing the source code of a site is one of the easiest ways to see how certain actions are performed so that you can learn from that work and start using certain code or techniques in your work.

Person who selects
Lifuire / Hilary Ellison

Like any web designer working today, especially those who have been doing it since their early days in the industry, it’s safe to say they’ll say they’ve learned HTML just by looking at the source of the web pages they’ve seen and been intrigued. on. Besides reading web design books or attending professional conferences, browsing the source code of a site is a great way for beginners to learn HTML.

More than just HTML

It should be remembered that source files can be very complex (and the more complex the website you’re viewing, the more complex that site’s code can be). In addition to HTML structure which makes up the page being viewed, will also be CSS (Cascading Style Sheets), that define the look and feel of this site. Also, many websites today will include script files included with the HTML.

You will most likely include several script files, each containing different aspects of the site. To be honest, the site’s source code can be overwhelming, especially if you’re new to it. Don’t be discouraged if you can’t immediately figure out what’s going on with this site. View HTML source code is only the first step in this process. With a bit of experience, you’ll begin to better understand how all of these pieces fit together to create the website you see in your browser. As you become more familiar with the code, you will be able to learn more from it without feeling so intimidating.

So how do you view the source code of a site? Below are the step by step instructions for doing this using the Google Chrome browser.

Step by step instructions

  1. open Google Chrome web browser (if you don’t have Google Chrome it’s a free download).

  2. Go to web page you would like to explore .

  3. Right click page and look at the menu that appears. From this menu select View page source .

    View page source in Chrome web browser context menu
  4. The source code for this page will now appear as a new tab in the browser.

  5. In addition, you can also use keyboard shortcuts CTRL+U on a PC to open a window with the source code of the site. On a Mac, this is the keyboard shortcut Command+Option+U .

Developer Tools

In addition to the simple possibility viewing page sources, offered by Google Chrome, you can also take advantage of their excellent developer tools, to get deeper into the site. These tools will allow you to see not only the HTML, but also the CSS that is being applied to view elements in this HTML document.

To use the Chrome Developer Tools:

  1. open Google Chrome .

  2. Navigate to the web page you would like to explore .

  3. Click three-dot menu in the upper right corner of the browser window.

  4. In the menu, hover your mouse over Additional Tools and then select » Developer Tools» in the menu that appears.

    Developer tools menu item in Google Chrome
  5. A window will open with the HTML source code to the left of the panel and the corresponding CSS to the right.

  6. Or if you right click by element on a web page and choose Inspect in the menu that appears, the Chrome Developer Tools will appear and the element you selected will be highlighted in HTML with the appropriate CSS shown on the right. This is very useful if you want to know more about how one particular piece of the site was created.

    Check context menu item in Chrome

You can also use keyboard shortcuts: F12 or Ctrl + Shift + I on Windows and Option + Command + I on Mac.

Is it legal to view source code?

Over the years, we’ve had many new web designers asking if it’s okay to look at the source code of a site and use it for their education and ultimately for the work they do. While copying the code of a site in bulk and passing it off as your own on a site is certainly not acceptable, using that code as a springboard to find out just how much advances have been made in this industry, really.

As we mentioned at the beginning of this article, today you will be hard-pressed to find a working web professional who hasn’t learned anything by looking at the site’s source! Yes, viewing the source code of a site is legal. Using this code as a resource for building something like this is fine too. By taking the code as it is and passing it off as work, you start to run into problems.

Finally, web professionals learn from each other and often improve on the work they see and get inspired, so feel free to browse the site’s source code and use it as a learning tool.

Похожие записи