How To View the Source Code of an HTML Document
This tutorial will introduce you to a basic HTML document and teach you how to view the source code of an HTML document in a browser.
HTML is used to mark up a document with instructions that tell a browser how to display and interpret the document’s content. For example, HTML can tell the browser which text content should be interpreted as a heading and which text content should be interpreted as paragraphs. HTML is also used to add images and assign links to text and images. These instructions are communicated through HTML tags, which are written like this: . Many, though not all tags, use an opening tag and closing tag to wrap around the content that they are used to modify.
To get a sense of how these tags are used, let’s inspect a snippet of HTML code. The HTML code below shows how HTML tags are used to structure text and add links and images. Don’t worry if you don’t understand the tags immediately- we’ll study those in the next tutorial.
h1>Sammy's Sample HTMLh1> p>This code is an example of how HTML is written.p> p>It uses HTML tags to structure the text.p> p>It uses HTML to add a a href="digitalocean.com/community">linka>.p> p>And it also uses HTML to add an image:p> img src="https://html.sammy-codes.com/images/small-profile.jpeg"/> This HTML code is rendered in the browser as follows:
You should now have an understanding of how the HTML example code is rendered in a browser. Next, we will learn how to view the source code of any webpage using a browser tool.
Viewing the Source Code of a Webpage
Nearly every webpage you come across uses HTML to structure and display HTML pages. You can inspect the source code of any webpage by using a web browser like Firefox or Chrome. On Firefox, navigate to the “Tools” menu item in the top menu and click on “Web Developer/Page Source” like so:
On Firefox, you can also use the keyboard shortcut Command-U to view the source code of a webpage.
On Chrome, the process is very similar. Navigate to the top menu item “View” and click on “Developer/View Source.” You can also use the keyboard shortcut Option-Command-U .
Try inspecting the source code of the demo website that we will build in this tutorial series. You should receive a page with many more HTML tags than our example above. Don’t be alarmed if it seems overwhelming. By the end of this tutorial series, you should have a better understanding of how to interpret HTML source code and how to use HTML to build and customize your own websites.
Note: As mentioned above, you can inspect the source code of any webpage using tools from the Firefox or Chrome web browser. Try inspecting the code of a few of your favorite websites to get a sense of the underlying code that structures web documents. Though the source code of these sites will likely contain more languages than HTML, learning HTML first will help prepare you to learn additional languages and frameworks for creating websites later on if you wish.
You should now have a general understanding of the format of an HTML document and know how to inspect HTML source code using a browser tool. To better understand how HTML works, let’s inspect its key components. In the next tutorial, we will learn more about HTML elements, the building blocks that are used to create HTML documents.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Tutorial Series: How To Build a Website with HTML
This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.
At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.
Source Code Viewer
Source Code Viewer is an online tool that lets you view an HTML webpage’s source code. The source code is the underlying markup language used to create the webpage, and it contains information about the page’s layout, content, and functionality.
This tool helps you to load the content of any HTML or valid URL into the text editor. Source Code Viewer loads complete data fetched by the server into the text editor. This webpage code viewer uses ACE Editor with HTML Theme to show the HTML data in colored format.
The developer or designer wants to see his masterwork and what code the server is sending to the client’s browser, and this tool can be a dream come true for the User.
To increase the website speed, developers minify the HTML code and send it to the browser to parse. This tool can format fetched HTML data and presents it in a human-readable format.
This functionality can also be achieved using the browser’s view source code, but it cannot be easy to read the code if the code is minified version and without the proper editor.
What can you do with the Source Code Viewer?
- It’s easy to use tool to load URLs. Enter valid URL into the input text box and hit enter or click on the View button.
- This Website code viewer can fetch data from any valid URL whether it could be a website or API or .css or .js file.
- If you think if there is any suspicious website and do not want to open it in the browser, you can get the source code of that site using this tool
How does View Website’s Code work?
This website sends the URL provided by the user to the server and the server fetches the URL using the curl method and returns the result to the website.