How To Build a Website with HTML

Introduction

If you are interested in learning how to build and design websites, Hyper Text Markup Language (HTML) is a great place to start. This project-based tutorial series will introduce you to HTML and its methods by building a personal website using our demonstration site (below) as a model. Once you learn the basics, you will know how change the website’s design and add personalized content. No prior coding experience is necessary to follow along the tutorials in this series.

HTML is the standard markup language used to display documents in a web browser. First developed by Tim Berners Lee in 1990 while working at the European Organization for Nuclear Research (CERN), HTML was one of the key innovative technologies used to publish the world’s first website on August 6, 1991. Thanks to a restoration project by CERN, you can now revisit the original website. Since that time, HTML has been significantly updated and expanded but its basic purpose to format and structure web pages remains the same.

Today, HTML is one of many tools used to build the web. Knowing how to write HTML will provide a strong foundation for your career as a web designer and prepare you to learn additional front-end web development skills like CSS and JavaScript.

In this tutorial series, you’ll learn how to create and customize a website using common HTML tags and techniques. After finishing this tutorial, you’ll have a site ready to deploy to the cloud.

Prerequisites

• A code editor like Visual Studio Code or Atom. For this tutorial series, we will be using Visual Studio Code as our default code editor but you may use any code editor you like. Certain instructions may need to be slightly modified if you use a different editor.
• A web browser like Firefox or Chrome. We will be using Firefox as our default browser but you may use any browser you like. Certain instructions may need to be slightly modified if you use a different web browser.
• Two different profile photos, images, or avatars for personalizing your site (optional).

Once you have your prerequisites ready, you will be ready to set up your HTML project in the next tutorial.

How To Set Up Your HTML Project With VS Code

To explore HTML in practice and begin building an HTML website, we’ll need to set up a new project using a text editor. This tutorial series uses Visual Studio Code, a free code editor available for Mac, Windows, or Linux, but you may use whichever code editor you prefer.

After opening your preferred text editor, open up a new project folder and name it html-practice. We’ll use this folder to store all the files and folders we create in the course of this tutorial series.

To create a new project folder in Visual Studio Code, navigate to the “File” menu item in the top menu and select “Add Folder to Workspace.” In the new window, click the “New Folder” button and create a new folder called html-practice as illustrated in the gif below:

Next, create a new file called index.html inside the html-practice folder. We’ll use this file through the tutorial series to experiment with HTML. If you are using Visual Studio Code, you can create a new file by using Right Click(on Windows) or CTRL + Left Click (on Mac) on the html-practice folder, selecting “New File”, and creating the file index.html as illustrated in the gif below:

You now have a project folder and file for exploring HTML. We’ll return to this file in the tutorials ahead.

Debugging and Troubleshooting CSS and HTML

Before we get started with our HTML exercises, be aware that precision is important when writing HTML. Even an extra space or mistyped character can keep your code from working as expected.

If your HTML code is not rendering in the browser as intended, make sure you have written the code exactly. To troubleshoot errors, check for extra or missing spaces, missing or misspelled tags, and missing or incorrect punctuation or characters. Each time you change your code, make sure to save your file before reloading it in the browser to check your results.

A Quick Note on Automatic HTML Support Features

Some code editors—such as the Visual Studio Code editor that we’re using in this series—provide automatic support for writing HTML code. For Visual Studio Code, that support includes smart suggestions and auto completions. While this support is often useful, be aware that you might generate extra code that will create errors if you’re not used to working with these support features. If you find these features distracting, you can turn them off in the code editor’s preferences.

We are now ready to begin learning how the CSS language works. In the next tutorial, we’ll begin exploring how CSS rules are used to control the style and layout of HTML content on a webpage.

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.

Copy

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.

How To Use and Understand HTML Elements

HTML documents are composed of HTML elements. Most HTML elements contain content (such as text or an image) along with HTML tags that tell the browser how to interpret the content (such as a heading or paragraph text). HTML elements can be used to add structure, semantics, and formatting to different parts of an HTML document. An HTML element is often created—but not always—by opening and closing HTML tags, which wrap around a piece of content.

Below is an illustration that labels each of the parts of an HTML element:

Let’s try exploring HTML in practice. Try pasting the following line into your “index.html” file that you created when Setting Up Your HTML Project:

Copy

In this example, the tag adds strong formatting by enclosing the text with a pair of opening and closing tags. Note that closing tags are always denoted by a forward slash (/).

Note: You may note that the tag acts very similar to adding bold styling to the text. You can achieve the same styling effect by using the bold tag, however the tag adds bold styling and semantic meaning that indicates the text is of strong importance. If you are using the bold styling because you want to note the importance of the text, make sure to use the tag, which will enable screen readers to announce their importance to the user.

Similarly, the emphasis tag adds italic styling and semantic meaning that indicates the text is emphasized. The italics tag only adds the italic styling to the text. If you are using the italic styling because you want to emphasize the text, make sure to use the tag, which will enable screen readers to announce their emphasis to the user.

To check the results of this HTML code, we can load the “index.html” file in our browser. Though your file is not online, the browser will still be able to interpret the HTML file as if it were a web page document. Make sure to save your “index.html” file before loading it in the browser as only saved updates will be rendered.

How To View an Offline HTML File In Your Browser

You can view an offline HTML file in the browser in several ways:

• Drag and drop the file into your browser
• CTRL + Left Click (on Macs) or Right Click (on Windows) to open the file with a browser
• Copy the full path of your file and paste the file in your browser bar

If you are using the Visual Studio Code text editor, you can copy the file path using CTRL + Left Click (on Macs) or Right Click (on Windows) on the file “index.html” in the left hand panel and selecting “Copy Path.” Then paste the path in your web browser as illustrated in the gif below:

Note: To load the file in the browser, it’s important that you copy the absolute path, (which refers to the file location relative to the root directory), rather than the relative path, (which refers to the file relative to the current working directory). In Visual Studio Code, “Copy Path” refers to the full file path. Be aware, however, that we will use relative paths of files in other parts of this tutorial.

After loading the file in your browser, you should receive a page that contains the following:

My strong text

Let’s try experimenting with other HTML elements. On the next line of your “practice.html” file, try adding the element, which adds emphasis.

Copy

Save the file and reload the file in the browser. You should receive something like this:

My strong text My emphasized text

The first phrase should be styled with strong formatting and the second phrase should be styled with emphasis. However, you may be surprised by the side-by-side placement of the two phrases. If you added My emphasized text to the second line of the text editor, you may have expected “My emphasized text” to show up on the line below “My strong text” in the web browser. However, certain HTML elements, such as and , require you to specify line breaks with additional HTML elements (if you desire lines breaks). We’ll explain why in the next tutorial.

How To Use Inline-level and Block-level Elements in HTML

This tutorial will teach you the difference between inline-level and block-level elements in HTML and how they affect a piece of content’s position on the page.

When arranging elements in an HTML document, it’s important to understand how these elements take up space on a webpage. Certain elements can take up much more space on the webpage than the content they contain. Understanding the behavior of different element types will help you anticipate how they affect the position of other elements on the page.

In general, there are two different types of elements—inline-level elements and block-level elements—whose spacing defaults behave differently from one another. Below, we’ll describe how the default settings of these elements determine their position on the webpage and relative to the position of nearby elements.

Inline-level Elements

Inline elements are elements whose horizontal width is determined by the width of the content they contain. The element and the element we covered in the last tutorial are both examples of inline elements.

We can use Firefox’s Web Developer Inspector to inspect the size of HTML elements on a webpage. (If you are using Chrome, you can use the Developer Inspect Elements tool instead but this tutorial will give instructions for Firefox’s Web Developer tool.)

Return to the index.html file that you loaded in your browser. If you need to reload it and don’t remember how, refer to the instructions Loading an HTML File in your Browser from the last tutorial.

Then navigate to the Tools menu item in the top menu bar and select “Web Developer/Inspector.” Selecting this menu item will open up the Inspector interface that allows you to inspect the HTML and CSS of a webpage. Next, hover your cursor over the text My strong text, which should highlight the text in light blue. This highlighting shows the full extent of the space occupied by the element that your cursor is hovering over. As you may have expected, the element’s occupied space is just large enough to contain its text content:

Unlike block-level elements, which we’ll cover in the next section, inline elements do not take up their own line of horizontal space. Thus, inline elements will rest side by side on a webpage if you do not specify a break with an additional HTML element, such as the line break
element. This sizing default is often convenient, as you may want to mark up single words in a paragraph with an inline element such as or without pushing subsequent text to the next line.

Try adding the
tag in between your two lines of code in the index.html file. (You will need to return to your file in the text editor.) Note that the
element only requires an opening tag and does not wrap around any text:

Copy

Save and reload the document in your browser to check your results. You should receive something like this:

My strong text

My emphasized text

Your two phrases should now be on separate lines as they are now separated by the line break element
.

If you use the Firefox Web Developer Inspector to check the size of the elements, you can confirm that the width of each of the text elements is still determined by the width of the text content:

Block-level Elements

Block-level elements behave differently than inline-level elements in that they take up an entire line of horizontal space on a webpage. This means that they automatically start on a new line and that they automatically push subsequent elements onto a new line as well.

For example, the HTML heading elements (

through ) are block-level elements that automatically place their content onto a new line and push any content that follows onto a new line. Each of these six heading elements represent a different heading size.

Let’s study how this works in practice. At the bottom of your index.html file, try pasting in the highlighted code snippet:

Copy

Save your file and reload it in the browser. You should receive something like this:

Let’s now inspect the block-level heading elements to study how they differ from the inline-level text elements above. Open up the Firefox Web Developer Inspector and hover over each of the elements to inspect their occupied space as indicated by the blue highlighting. You should be able to confirm that the occupied horizontal space of each of the inline-level elements is determined by its text content, while the occupied horizontal space of each of the block-level elements stretches across the entire web page:

Block-level elements will always push inline-level elements down to the next line, even if you write those HTML elements on the same line of the HTML document. To confirm this for yourself, try writing a block-level element and an inline-level element on the same line of your index.html file. Erase the existing content from your file and add the following code snippet:

Copy

Can you guess how this HTML code will render in the browser? Save your file and reload it in the browser. You should receive something like this:

Notice that the heading element

has started on a new line and pushed the subsequent text element to a new line even though the elements were written on the same line in the HTML document.

You should now have an understanding of how inline-level and block-level elements are positioned and how they affect the position of nearby elements. Remembering their distinct behaviors can be useful when arranging HTML elements in the future.

We’ll continue learning about new inline and block elements in the tutorials ahead.

How To Nest HTML Elements

This tutorial will teach you how to nest HTML elements in order to apply multiple HTML tags to a single piece of content.

HTML elements can be nested, meaning that one element can be placed inside another element. Nesting allows you to apply multiple HTML tags to a single piece of content. For example, try pasting the following code snippet inside your index.html file:

Copy

Save your file and reload it in the browser. (For instructions on creating an index.html file, please see our tutorial here or for loading the file in your browser, see our tutorial here.) You should receive something like this:

My bold text and my bold and emphasized text

Nesting Best Practices

Note that it is recommended to always close nested tags in the reverse order that they were opened.

Copy

As a counter example, the following HTML code contains tags that are not nested according to best practices, as the tag closes before the tag:

Copy

While not technically necessary for rendering your HTML in the browser, nesting your tags in the proper order can help improve the readability of your HTML code for you or other developers.

How To Use HTML Attributes

HTML attributes can be used to change the color, size, and other features of HTML elements. For example, you can use an attribute to change the color or size of a font for a text element or the width and height for an image element. In this tutorial, we’ll learn how to use HTML attributes to set values for the size and color properties of HTML text elements.

An HTML attribute is placed in the opening tag like this:

Copy

One common attribute is style, which allows you to add style properties to an HTML element. While it’s more common to use a separate stylesheet to determine the style of an HTML document, we will use the style attribute in our HTML document for this tutorial.

Using the Style Attribute

We can change multiple properties of an

element with the style attribute. Clear your “index.html” file and paste the code below into your browser. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project.

Copy

Before we load the file in our browser, let’s review each of the parts of this HTML element:

• h1 is the name of the tag. It refers to the largest-sized Heading element.
• style is the attribute. This attribute can take a variety of different properties.
• font-size is the first property we’re setting for the style attribute.
• 40px; is the value for the property font-size, which sets the text content of the element to 40 pixels.
• color is the second property we’re setting for the style attribute.
• green is the value for the property color, which sets the text content color to green

Note that the properties and values are contained by quotation marks, and that each property:value pair ends with a semicolon ;.

Save the file and reload it in your browser. (For instructions on loading the file in your browser, see our tutorial here.) You should receive something like this:

This text is 40 pixels and green.

You have now learned how to use the style attribute to change the font size and font color of a text element. Note that certain elements require attributes, such as the element which allows you to add a link to a text or image, and the element, which allows you to add an image to the document. We’ll cover those two elements in the next tutorials and learn about additional attribute usage for

How To Add Images To Your Webpage Using HTML

In this tutorial, we’ll learn how to use HTML to add images on a website. We’ll also learn how to add alternative text to images to improve accessibility for site visitors who use screen readers.

Adding an image with HTML

Images are added to an HTML document using the element. The element requires the attribute src which allows you to set the location of the file where the image is stored. An image element is written like this:

Copy

Note that the element does not use a closing tag. To try using the element, download our image of Sammy the Shark and place it in your project directory html-practice.

Note: To download the image of Sammy the Shark, visit the link and CTRL + Left Click (on Macs) or Right Click (on Windows) on the image and select “Save Image As” and save it as small-profile.jpeg to your project directory.

Next, erase the content of your index.html file and paste into the file. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project.

Then, copy the file path of the image and replace Image_Location with the location of your saved image. If you are using the Visual Studio Code text editor, you can copy the file path by using CTRL + Left Click (on Macs) or Right Click (on Windows) on the image file small-profile.jpeg in the left-hand panel and selecting “Copy Path.” For an illustration of the process, please see the gif below:

Note: Make sure to copy the relative or project file path of the image rather than the absolute or full file path of the image. The relative path refers to the file location relative to the current working directory (as opposed to the absolute path, which refers to the file location relative to the root directory.) While both paths will work in this instance, only the relative path would work if we decided to publish our website online. Since our end goal is to create a publishable website, we will start using relative paths now when adding elements to our document.

Save your index.html file and reload it in your browser. You should receive something like this:

Technically, you can also use links to images hosted online as file paths. To understand how this works, try replacing the image location with a link to our image of Sammy the Shark like this:

Copy

Save your file and reload it in the browser. The image should still load in your web document, but this time the image is being sourced from its online location rather than your local project directory. You can experiment with adding other online images by using their location links as the src attribute in the tag.

However, when building a website it is generally better to host your images in your project directory to ensure the sustainability of the site. If the image is taken down by its host or if its address changes, it will no longer render on your site.

Alternative Text for Accessibility

When adding an image, you should always include alternative text describing its content using the alt attribute. This text is typically not displayed on the webpage but is used by screen readers to communicate content to visually-impaired site visitors.

Copy

When adding alternative text, keep the following best practices in mind:

• For informative images, alternative text should clearly and concisely describe the subject matter of the image, without referring to the image itself. For example, do not write “Image of Sammy the Shark, DigitalOcean’s mascot” but “Sammy the Shark, DigitalOcean’s mascot.”
• For decorative images, the alt attribute should still be used but with a null value, as this improves the screen reader experience: .
• For a useful guide on determining whether an image is informative or decorative, visit https://www.w3.org/WAI/tutorials/images/decision-tree/

You should now have familiarity with how to add images to your HTML document and how to add alternative text to aid with accessibility. We’ll learn how to change the image size and style in the tutorial How To Add a Profile Image To Your Webpage later on in the series. In the next tutorial, we’ll learn how to add links to an HTML document.

How To Add Hyperlinks in HTML

This tutorial will walk you through the steps of adding hyperlinks to your webpage.

Hyperlinks can be added to text or images with the anchor link element . The tag requires the attribute href, which is used to specify the destination link. The element is used like this:

Copy

Try adding the code snippet below to your “index.html” file and changing the sample highlighted text with a real link, such as https://digitalocean.com/community:

Copy

(If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project. Save the file and load it in your browser.

You should receive an output like this:

You can also link images by wrapping an image element with an element like so:

Copy

Try testing the code snippet in your browser to check that it works. You should now understand how to add hyperlinks to text and images on your webpage.

How To Use a

, the HTML Content Division Element

The HTML Content Division element (

On its own, the

The

Copy

Notice that the

Copy

Save the file and reload it in the browser. (For instructions on loading the file in your browser, see our tutorial here.) You should receive a red box with a width of 300 pixels and a height of 200 pixels like this:

You can also add content to a

Copy

<div style="width:300px;height:300px; background-color:red;"> <div style="width:100px;height:100px; background-color:yellow;"> </div>iv> 

Copy

<div style="width:300px;height:300px;background-color:red;"> <div style="width:100px;height:100px; background-color:yellow;"> </div>iv>iv style="width:100px;height:100px; background-color:blue;">iv> 

Copy

How To Change the Color of HTML Elements

You can use HTML to modify the color of some elements and pieces of content of a webpage. For example, you can change the color of text, a border, or—as demonstrated in the tutorial on HTML Content Division—of a <div> element. The method for changing the color values of these pieces of content varies from element to element.

The color of text elements, such as <p> or <h1>, is modified by using the style attribute and the color property like so:

<p style="color:blue;">This is blue text.</p> 

Copy

Try writing this code in your index.html file and loading it in the browser. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project. For instructions on loading the file in your browser, see our tutorial here.)

You should receive something like this:

This is blue text.

The color of a border is modified by using the style attribute and the border property:

<img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="border: 10px solid green"/> 

Copy

Try writing this code in your index.html file and loading it in the browser. (Note that we are using an image that we are hosting online in this example. We have also specified that the border should be 10 pixels wide and solid (as opposed to dashed)).

You should receive something like this:

<div style="width:200px;height:200px;background-color:yellow;">iv> 

Copy

In these examples, the color value is defined by color names. Try changing the color of text, image borders and <div> elements using the following color names: black, white, gray, silver, purple, red, fuchsia, lime, olive, green, yellow, teal, navy, blue, maroon, and aqua.

Note that colors can also be specified by hexadecimal values. A hexadecimal color consists of six alphanumeric digits preceded by a pound symbol, such as #0000FF (blue), #40E0D0 (turquoise), or #C0C0C0 (silver). For this tutorial series, however, we will continue using color names.

You should now have a basic familiarity with how to change the color of text, image borders, and <