On your website, having a multitude of HTML pages allows you to organize your content and enhance user experience.
To build multiple HTML pages:
- Add new HTML files
- Link them using the <a> tag, and make sure to use relative URLs
- Apply uniform navigation and styling to all pages
- Test every link carefully to make sure it functions properly.
- Use meaningful anchor text to describe the target page within each <a> tag.
Continue reading to learn how to build effective, properly structured multi-page websites using several tactics and best practices.
Table of Contents
How to Make Multiple Pages in HTML: Add a Second Page
Let’s make a new page to learn how to create multiple pages in HTML. Simply adding a second HTML page with a new file name will be what we do.
And how to make a second page in HTML? It’s simple; type in the file’s name after the.html extension. Check to ensure it differs somewhat from any other HTML files you have written.
Now that you know how to add a second page in HTML. Make one right now. For this project, you may call your second-page about.html if your first page is index.html.
Every HTML page has to have a fundamental structure, which you may copy and paste as follows:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <!-- Page Content --> </body> </html>
Now we can add content to our second page.
Linking the Pages
Now that you know how to make pages in HTML. Let’s link them together! Linking the pages together is necessary so users can navigate between them.
We create hyperlinks using the <a> tag and href attribute. For example, to link from index.html to about.html, we can add:
<a href="about.html">About</a>
Since the pages reside in the same folder, we use a relative URL (about.html) instead of the full URL.
We should add hyperlinks in the navigation of every page to link to all other pages. It creates a consistent navigation that users can rely on.
Passing Parameters
Passing parameters between pages allows you to pass in data that a page can use when it loads. You simply append the parameters to the URL. For example:
<a href="about.html?from=index"> About </a>
Then, on the about.html page, we can access the “from” parameter using JavaScript:
<script>
var fromPage = getParameterByName('from');
</script>
It allows you to show a customized message like “Welcome from the index page.”
See also : Create An Engaging HTML Chat Box For Your Website: Easy Steps
Effective Linking Practices For A Multi-Page HTML Site
Learning to make multiple pages in HTML isn’t complete until we also learn the best practices for linking. The following are the best practices to keep in mind –
Create a Navigation Bar
The easiest way to link multiple HTML pages is by creating a navigation bar on every page. It provides a consistent interface for users to navigate your website. Here’s a very simple navbar you can use –
<ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="products.html">Products</a></li> </ul>
This nav bar can be placed in a header <div> that you include on every page!
Only Use Meaningful Anchor Text!
The text inside your <a> tags should concisely describe the target page. After all, the user should know where they are going, right? While learning how to make multiple pages in HTML, we were fortunate enough to use the correct anchor text for our links! We labeled the hyperlink to our “About” page “about”! The user knows exactly where they are going.
Point to remember while learning to make multiple HTML pages – The text inside your <a> tags should concisely describe the target page. Let’s take a look at two examples to help you understand.
Good example:
<a href="products.html">Our Products</a>
The anchor text “Click here” is vague and does not provide any useful indication of what the linked page contains. Users have no idea where the link will take them.
Bad example:
<a href="products.html">Click here</a>
The ambiguous “Click here” anchor phrase offers no meaningful information about what the linked website contains. The destination of the connection is unknown to the user.
Ensure Portability With Relative URLs
Learning how to make multiple pages in HTML requires linking pages together. Using relative URLs makes those pages portable and easy to move to a new domain.
While convenient, absolute URLs (http://www.example.com/about.html) will break if you move your multiple pages in HTML to a different domain. On the other hand, relative URLs (like about.html) will continue to work.
That’s because relative URLs specify the path to the resource relative to the current page. So if you have an index.html page and an about.html page in the same folder, you can link to about.html like this:
<a href="about.html">About</a>
This relative URL will work no matter where that folder is located or what domain it’s on.
However, an absolute URL like this:
<a href="http://www.example.com/about.html">About</a>
It will only work if your pages are hosted at http://www.example.com. The link will break if you move that folder to a new domain.
So when learning to make multiple pages in HTML, use relative URLs in your hyperlinks. It ensures you remain linked and portable even if you move the site to a new hosting provider or domain name.
Relative URLs are a simple but powerful technique to build HTML multiple pages that work anywhere. So don’t forget to use them now that you’ve learned to make multiple HTML pages!
Testing, Testing, Testing – Make Sure All Links Work
Thoroughly testing all links is critical to creating a well-functioning multiple-page HTML website. Use tools like WAVE to scan your HTML for broken links. You can test links in several ways!
Manual Testing
The most basic method is clicking every link manually and verifying it takes you to the intended destination. While time-consuming, this ensures you “experience” every link from a user perspective.
Link Checking Tools
Free tools like WAVE can crawl your HTML and check for broken links, incorrect URLs, and other routing issues. These provide an objective “audit” of your links.
Testing on Different Devices/Browsers
Issues sometimes only appear in specific browsers or on mobile devices. Testing links across a variety of environments helps uncover these inconsistencies.
FAQs
Can I link to a PDF or image from an HTML page?
Yes! You can link to any file type using the < a > tag. For example:
< a href="resume.pdf" >Download resume< /a > You can also link directly to images - < a href="logo.png" > < img src="logo.png" alt="logo" > < /a >
How do I link to an external website from an HTML page?
You link to external websites as you link to internal pages – using the < a > tag and href attribute. Just specify the full URL of the external website. For example:
< a href="https://www.google.com" >Google< /a >
Summing Up
In conclusion, creating multiple pages in HTML involves using links with the <a> tag and creating separate HTML files for each page. It allows for organized and interconnected content.
Hi, I’m Geoff. I design. I develop. I do lots of things in between. What that really boils down to is that I make websites.
