Welcome to a quick tutorial on how to get the HTML code from websites. Is there a certain website that you find interesting? Want to know how it works behind the scenes? Or maybe you just need to email a part of the website to someone.
In most modern browsers, there are a few ways we can use to get the HTML code from websites:
- View the source code of the web page – Press control-u (command-u on a Mac).
- Inspect the web page – Right-click anywhere on the webpage, inspect element.
- Save the web page – Press control-s (command-s on a Mac).
Just how exactly does each one of these work? Read on the find out!
TABLE OF CONTENTS
|How to Grab||Useful Bits & Links||The End|
HOW TO GET HTML CODE
All right, let us now get into the various ways to grab HTML code from a website.
1) VIEW THE SOURCE CODE
This is probably the most common method, recommended by everyone all over the Internet. Right-click anywhere on the webpage > View source, or simply hit the shortcut key
COMMAND-U on a Mac).
Please take note that depending on which web browser you are using, this is going to be slightly different – It is called “view page source” on Google Chrome and Firefox, “view source” on Microsoft Edge… But they all do the same thing.
2) INSPECT ELEMENT (DEVELOPER’S CONSOLE)
Some of you guys should have noticed that “inspect” option under “view source”. So go ahead and try it out – Right-click on anything on the webpage > Inspect. Yep, this opens up the developer’s console and gives you a full view of the rendered HTML.
Some of you guys may cringe at this method, thinking it is “too technical”, but no… This is actually a way better method than just “view source”. We will get more into that below.
3) SAVE THE PAGE
I think you guys should be experts by now. Right-click anywhere on the page > Save as. The shortcut key is
COMMAND-S on a Mac). One small thing to take note though –
The webpage will be saved to an HTML file and all the assets (images, sound, video) will be saved into a corresponding folder. For you guys who are just trying to send the webpage to someone else, I will recommend to just send the URL… Or take a screenshot instead.
WHY SO MANY METHODS? WHICH IS THE BEST?
So which is the best method to use? This may be kind of confusing, but there is something that you need to know first – Some webpages are loaded dynamically. For example, Facebook.
- Facebook will first load an “empty shell” when you first visit.
- It will then load the news feed, customized to your preferences.
- As you scroll down, it will load more things into the news feed.
What has this got to do with getting the HTML pages? Because simply using “view source” will only give you the “empty shell”, without any of the dynamic contents. This is why I mentioned “inspect” is better, in the sense that it reflects the current page that is being rendered on your web browser.
“Save page” will also try to give an accurate version of the current page, but take note that not everything can be saved… Not to mention that some pictures, sounds, and videos are copyrighted. Just be careful with that.
USEFUL BITS & LINKS
That’s all for this guide, and here is a small section on some extras and links that may be useful to you.
Is the HTML code too messy and difficult to read? Fear not, there are many online tools that can help you format them:
Just search for “format HTML online” and there will be a ton more.
LINKS & REFERENCES
- View the HTML source code of a web page – Computer Hope
- How To View the HTML Source in Google Chrome – Lifewire
- How to See the HTML Code of a Web Site – Chron
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!