Author: M Abo Bakar Aslam

Link Using Anchor Tag

HTML links, also known as hyperlinks, are essential for connecting web pages and enabling smooth navigation across content. In this section, you will learn how to use the anchor <a> tag to create different types of links, including internal page navigation, external links, and linking files using relative paths. Understanding these concepts is fundamental for building well-structured and user-friendly websites.

1. Anchor Link <a>
The most commonly used type of link is the anchor link, defined by the <a> (anchor) element. It allows you to create hyperlinks to other web pages, resources, or locations within the same page. Anchor links are essential for website navigation and connecting content.

<a href="https://www.google.com">Visit Google</a>

2. Internal (Same-Page) Link:
You can create links that navigate within the same page using anchor tags and a specific id attribute. This is useful for creating table of contents or navigation menus on long web pages.

<a href="#section6">Go to "Section 6" below</a>
<!-- Below section 6 is defined on same page having id attribute -->
<h2 id="section6">Section 6</h2>

3. External + ID:
You can use combination of both external link and ID. In this way, browser will open new web page and then navigate to specified ID (just as previous example).

<a href="https://edu2skill.wordpress.com/courses/html#links">Go to Section "Links" on another page</a>
<!-- OR -->
<a href="newFile.html#nameOfID">Visit nameOfID at newFile.html file</a>

4. If the file for linking page is in nested folder of currect page directory, then you can set value of href as given below. In this example, newFile.html is located in “subFolder” in currect directory.

<a href="/subFolder/newFile.html">Visit newFile.html file</a>

5. If the file for linking page is in one folder back of currect page directory, then you can set value of href as given below. In this example, newFile.html is located in “newFolder” that is located in one folder back of currect directory.

<a href="../newFolder/newFile.html">Visit newFile.html file</a>

6. If the file for linking page is in TWO folders back of currect page directory, then you can set value of href as given below. In this example, newFile.html is located in “newFolder” that is located in two folder back of currect directory.

<a href="../../newFolder/newFile.html">Visit newFile.html file</a>