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: <tagname>. 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 HTML</h1>

<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">link</a>.</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.

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.