How To View The Source Code of an HTML Document

**Part of the 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.

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:

HTML Document

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:

Gif of how to inspect source code using Firefox

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.

#html