Multi-Page HTML Sites

3 min readMar 5, 2021

This will be a simple introduction into building multi-page HTML sites. Eventually once you get the hang of us you can then learn more advanced ways to create multi-page sites later on.

Creating Multiple Pages

A basic HTML site, as created in Intro, is structured something like this:

my-sample-project/
├── README.md
├── index.html
└── css
    └── styles.css

Here we have:

A project directory called my-sample-project. It contains:

A README.md file.
An index.html homepage.
A css subdirectory with a custom styles.css stylesheet.

This example site has only one page: index.html. But not all sites are single-page. In fact, many traditional sites offer multiple areas users can navigate between.

Multi-Page Project Structure

So if we want this website to contain multiple pages, in addition to the index.html homepage we want the “About” and “Contact” pages too. So how would we add these pages? by creating two corresponding HTML files:

my-sample-project/
├── README.md
├── index.html
├── html
│   ├── contact.html
│   └── about.html
└── css
    └── styles.css

You will see that the index.html remains in the top-level of the directory, and the additional HTML files are in an html subdirectory. This is because the browser looks for an index.html in the main directory, so it knows what to load first.

Each of the new files will looks similar to HTML files we’ve create before with standard boilerplate <html>, <head>, and <body> tags containing whatever page-specific content we want.

Linking Between Pages

Now that we finally have a “About” and “Contact” pages set up, we need a way to access those other pages from the homepage. Thankfully, we can do this with a simple <a> tag.

To create a link navigating from index.html (homepage) to the contact.html (contact page), for example we use the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>Example Homepage</title>
  </head>
  <body>
    ...
    <a href="html/contact.html">Contact Information</a>
    ...
  </body>
</html>

This is similar to <a> links created in into, but with a file path internal to our project instead of an external online URL. When clicked, this link will display the contents of our contact.html file.

To add other navigational links to other pages within our project directory like for example the “About” page, we will still follow the same process:

<!DOCTYPE html>
<html>
  <head>
    <title>Example Homepage</title>
  </head>
  <body>
    ...
    <a href="html/contact.html">Contact Information</a>
    <a href="html/about.html">About</a>
    ...
  </body>
</html>

Styling Multi-Page HTML Sites

To style multiple pages in a site, each HTML file needs a stylesheet linked. In a smaller project, we’d create one central stylesheet and it link in the <head> of each HTML document like so:

Index.html file

<!DOCTYPE html>
<html>
  <head>
    <title>Example Homepage</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    ...
    <a href="html/contact.html">Contact Information</a>
    <a href="html/about.html">About</a>
    ...
  </body>
</html>

contact.html file

<!DOCTYPE html>
<html>
  <head>
    <title>Contact</title>
    <link href="../css/styles.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    ...
  </body>
</html>

about.html file

<!DOCTYPE html>
<html>
  <head>
    <title>About</title>
    <link href="../css/styles.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    ...
  </body>
</html>

You will notice that the file path to the stylesheet in index.html is different than it is in the other html files, because the index.html resides in the top-level of the directory, and contact.html and about.html resides in an html subdirectory. So their file paths to the stylesheet are preceded with “..” to exit out of the html directory before entering into the css directory.

And of course as projects increase in size, and/if when pages have their own dedicated styles that apply only to them, we can also create a dedicated stylesheet for specific pages, like this:

my-sample-project/
├── README.md
├── index.html
├── html
│   ├── contact.html
│   └── about.html
├── css
│   ├── contact.css
│   ├── about.css
│   └── styles.css
└── js
    ├── jquery-1.11.2.js
    └── scripts.js

Here, styles.css would contain universal styles for all pages, whereas about.css and contact.css contain styles applicable only to contact.html and about.html pages, respectively. These dedicated stylesheets could then be linked in relevant HTML files, after the universal stylesheet:

contact.html

<!DOCTYPE html>
<html>
  <head>
    <title>Contact Us</title>
    <link href="../css/styles.css" rel="stylesheet" type="text/css">
    <link href="../css/contact.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    ...
  </body>
</html>

about.html

<!DOCTYPE html>
<html>
  <head>
    <title>About Us</title>
    <link href="../css/styles.css" rel="stylesheet" type="text/css">
    <link href="../css/about.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    ...
  </body>
</html>

This is just the surface for now, there are other ways of sustainably separating styles in to multiple modular stylesheets. Stay Tuned!!