The simplest way to link HTML pages is with an anchor tag and the href attribute

To link from one HTML page to another, you use the anchor tag — written as <a> — with an href attribute that points to the file you want to open. The href tells the browser which page to load when someone clicks the link. The text between the opening and closing tags is what the reader sees and clicks on.

Here is the basic structure: <a href="about.html">Go to About</a>. When you save this in your HTML file and open it in a browser, the words "Go to About" appear as a clickable link. Clicking it loads the about.html file.

The href value can be a filename in the same folder, a path to a file in a different folder, or a full web address. The browser handles the rest — it finds the file and displays it.

Key Takeaways

  • Use the anchor tag <a href="filename.html">Link text</a> to create a clickable link between HTML pages.
  • The href attribute can point to a file in the same folder, a subfolder using a path like href="pages/contact.html", or a file on a different website.
  • The text between the opening and closing anchor tags is what appears as the clickable link on the page.
  • Relative paths (like href="about.html") work when both files are on your computer or server; absolute paths (like href="https://example.com/about.html") work anywhere.

Linking to a file in the same folder

When your HTML files sit in the same folder, you only need to write the filename in the href. If you have index.html and about.html in the same folder, the link in index.html looks like this: <a href="about.html">About Us</a>.

This is called a relative path because it describes where the file is relative to the current page. The browser looks in the same folder as the page you are viewing and finds about.html there. This method works on your computer while you are building the site and continues to work after you upload everything to a web server, as long as the folder structure stays the same.

Linking to a file in a different folder

If your pages are organized into subfolders, you need to tell the browser how to navigate the folder structure. If you have a folder called "pages" inside your main project folder, and contact.html is inside that folder, the link looks like this: <a href="pages/contact.html">Contact</a>.

To go up one level to a parent folder, use two dots and a forward slash: <a href="../index.html">Home</a>. This tells the browser to go up one folder level and then look for index.html. If you need to go up two levels, write ../../filename.html. This system works the same way whether you are testing on your computer or the site is live on the internet.

Linking to a page on a different website

To link to a page outside your own site, use the full web address in the href. This is called an absolute path. For example: <a href="https://www.example.com/about">Visit Example</a>.

Always include https:// at the start so the browser knows you mean a web address and not a file on the current computer. If you write only href="www.example.com" without the https, the browser will look for a folder called www.example.com on your server instead of going to the internet.

Opening a link in a new tab or window

By default, clicking a link replaces the current page with the new one. If you want the link to open in a new tab instead, add the target="_blank" attribute: <a href="about.html" target="_blank">About Us</a>.

This is useful when linking to external websites so the reader does not leave your site. It is less common for internal links between your own pages, since most readers expect those to replace the current page. Some developers add rel="noopener noreferrer" as well for security reasons when opening external links in a new tab, though this is more important for links to untrusted sites.

Linking to a specific section within a page

You can link directly to a heading or section inside an HTML page using an anchor — a named location within the page. First, add an id attribute to the element you want to link to: <h2 id="contact-section">Contact Us</h2>.

Then link to that section using a hash symbol followed by the id name: <a href="about.html#contact-section">Jump to Contact</a>. When someone clicks this link, the browser loads about.html and scrolls down to the element with id="contact-section". You can also link to a section on the current page: <a href="#contact-section">Contact Us</a>.

Common mistakes when linking HTML pages

The most frequent error is a typo in the filename or path. If you write href="aboutus.html" but the file is actually named about.html, the link will break. Filenames are case-sensitive on most web servers, so About.html and about.html are different files. Test every link in your browser before considering the site finished.

Another common mistake is forgetting the file extension. Writing href="about" instead of href="about.html" will not work. Also, if you move files into different folders after creating links, the relative paths break. This is why planning your folder structure early saves time later.

When linking to external sites, forgetting the https:// is a frequent problem. The browser will treat it as a relative path and look for a local folder instead of going to the internet. Always test external links by clicking them to make sure they actually load the page you intended.

Frequently Asked Questions

Can I link to a PDF or image file the same way I link to HTML?

Yes. The anchor tag works the same way for any file type. <a href="document.pdf">read PDF</a> or <a href="photo.jpg">View Photo</a> both work. The browser will either display the file or prompt the user to read it, depending on the file type and browser settings.

What is the difference between href and src?

The href attribute is used in anchor tags to create links. The src attribute is used in image tags and script tags to load a file directly into the page. You use href when you want the user to click and navigate; you use src when you want the file to load automatically as part of the page.

Do I need to use forward slashes or backslashes in file paths?

Always use forward slashes in href paths, even on Windows computers. Write href="pages/about.html", not href="pages\about.html". Forward slashes work on all operating systems and web servers. Backslashes only work on Windows and will break your links when the site goes live on a web server.

What happens if I link to a file that does not exist?

The browser will try to load the file, fail, and usually show a 404 error page. The link will not work, and readers will see an error instead of the page you intended. This is why testing links before publishing is important — broken links hurt the user experience and make your site look unfinished.

Can I link to a specific line number in another HTML file?

No, not directly. You can only link to elements that have an id attribute. If you want to link to a specific line, add an id to an element near that line — a heading, paragraph, or div — and link to that id instead using the hash method described above.