There are two types of websites.
One is a single page website (not to be confused with a SPA) that has all its content on a single HTML web page or document HTML.
The other type is a website that has multiple pages (multiple HTML documents). Each HTML web page has different content. They may or may not share common styles, including header and footer elements.
Multi-Page Website Benefits
A website that you have the content to display to end users you can reap the benefits of a single page website. But there are many reasons why we see many multi-page websites on the Internet.
- A multi-page website better separates the content of the website. Instead of aggregating all of the website’s content on a single page using headers, a multi-page website can better manage and display content on different pages based on context.
- A multi-page website offers better user flow and user experience. Users use top navigation to navigate between the web pages of a website. The navigation menu makes it clear that such and such content is on such and such a page.
- A multi-page website is search engine friendly. When you have a lot of content that differs in context between them, having a multi-page website is a great idea. Not only can users better understand the contents of the website, but also the search engine bots that crawl your website can better segregate the contents based on web pages.
Creating a Multi-Page Website in HTML
Now that we know the benefits of a multi-page website, let’s make a simple one in HTML.
Step 1 – Creating our first HTML page
Open a code editor like Visual Studio Code, Sublime Text or Notepad. If you don’t have any of the text editors, open a notepad.
Next, create a basic HTML structure like the following (I’ll provide the source code at the end of the blog)
Save this notepad file in your preferred folder location and save it as index.html
Now, we will change the title and create a header for this web page
Step 2: Creating Two More Web Pages
Similar to how we created the home page, we will create two more web pages. The contact page and the about page. Our folder now looks like this.
Step 3: Link multiple website pages together in HTML
Now it’s time to link the multiple pages we’ve created on our website.
We’ll create a navigation menu that will link to all the pages.
First we’ll change the code in our index.html page to the following:
And we will copy this nav element to the other pages as well (about. html y contact.html)
Step 4: Launch our multi-page website
Now, go back to the folder where you saved all your files.
Click with el botón derecho en el archivo index.html y open this file with the preferred browser.
Result
This will open your multi-page website in the browser.
Use the navigation at the top to navigate between pages. This is how you can easily create multi-page websites.
Change the content of web pages to the content you want to add to your website.
Multi-Page Website In HTML – Source Code
Home Page (index.html)