How To Create Additional Webpages on Your HTML Website

Updated on August 9, 2021
How To Create Additional Webpages on Your HTML Website

When building a website, you may want to have more than one webpage. If you want to add and link to additional pages, you’ll need to first create a new html file in your website project directory. In this tutorial, we’ll learn how to create and link to an additional webpage on your website

Our demonstration website includes an “About” webpage. In this tutorial, we’ll walk you through the process of creating and linking to an “About” webpage, but you may change the title and the content of this page to fit your needs.

To add a new page to your website, create a new file named about.html and save it in your project directory html-practice. (If you have not been following the tutorial series, you can review instructions for setting up a new html file in our tutorial Setting Up Your HTML Project.)

Note: If you decide to choose your own name for the file, make sure to avoid character spaces, special characters (such as !, #, %, or others), and capital letters as these can cause problems later on. You must also include the .html extension.

Next, you’ll need to format the file by adding information that will help the browser interpret the file content. To format the file, add following code snippet at the top of the document:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">

Make sure to change the highlighted text with a title you want for you page. For an explanation of each of the HTML tags, please visit the earlier tutorial in this series Adding an HTML <head> Element To Your Webpage. Save the file before you continue.

Before adding any content to this page, let’s walk through the steps of adding a link to this page on your homepage.

First, return to your index.html file and add the following snippet below the subtitle of your site and above the closing </div> tag:

<p style="font-size: 20px; color:#1F9AFE;">
<a href="Webpage_FilePath">About this site</a>

Change the highlighted file path to the relative file path of your “about.html” file. 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.) If you are using the Visual Studio Code text editor, you can copy the relative file path by CTRL + Left Click (on Macs) or right-clicking' (on Windows) on the file icon and selecting Copy Relative Path.`

Note that we have also specified a font-size and color using the style attribute. Save your index.html file and reload it in the browser.

You should now have a link that directs to your about.html web page like this:

Webpage with link

If you receive an error, make sure that your file is in the same project directory as your index.html file and that there are no errors in your project path.

You should now know how to create and link to a new webpage on your website. You can use these same steps to create and link to additional webpages on your website. You can also add content to any new webpage in the same way you are learning to add content to your homepage.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

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.

About the authors
Default avatar

Senior Manager, DevEd

Open source advocate and lover of education, culture, and community.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel