Introduction to Linking Pages in HTML
Link is simply defined as text, which is clickable so it helps to move from one page to another whenever this text has been clicked. So you give the link to any element like page, image or website too to move from one page to another. HTML link uses <a> tag with href attribute which is having path where actually want to jump. Any link included in HTML code by default shown in blue color, if this link is already visited by the user previously then it will be shown in purple color. We can able to change the color of this link by using CSS too. In this topic, we are going to learn about Linking Pages in HTML.
Syntax of Linking Pages in HTML
Let’s see how actually linking of pages can be done using HTML is as follows:
<a href=”url”> Text_Content </a>
In the above syntax, the anchor tag helps to define and open a new targeted page or document using a defined attribute like the target link.
This exactly works like the Absolute file path as we earlier have seen in HTML file path content.
We can also open a particular page or portion from the website by defining the simple path of that content using the same syntax.
If we have to open a specific page, then it’s also possible by using Relative file path like
One more interesting thing we can do using HTML link is we can open a blank browser window or open our webpage into a new window using syntax
<a href=”Browser’s _URL” target=”_blank”></a>
If we want to open our webpage in the parent window then it’s also possible using the syntax as follows:
<a href=”path” target=”_parent”> </a>
How to link the page by using the HTML?
As earlier, we have seen how to link webpage, images, and other documents by using an anchor tag with href attribute which is by defining both file path like Absolute as well as Relative.
We are also familiar with how to deal with targets for the link to do functionalities like opening new blank windows, opening the webpage in the parent window, opening page in the self window like by default we are using this, opening the document in full browser window using _top attribute and many more things.
Link to create a bookmark
Let’s see how to create bookmark anchors using the link in HTML. So these features work as a bookmark for our webpage, whenever we want to find something from large page data then simply define some text or document as a link so we can jump directly to this targeted location.
To define bookmark we have to add id as an attribute to specific element to where we actually want to jump than its value by passing sign called ‘#’ which is include in href within the tag <a>. This is as shown below:
<a href=”#home”> Homepage </a>
<h4 id=”home”> Home </a>
<h6>This code works as a bookmark, so can jump directly to the home
Section by clicking on link </h6>
One can also directly open particular section from another page simply defining that page’s url into the anchor tag with href attribute, this is as follows:
<a href=”Demo.html #contactus”> Contact US </a>
Link to download the document
With the help linking in HTML we can also create links that helps us to download documents. It has the same thing defining text as a link and just adds destination file’s path as URL, so whenever we are clicking this link connected documents or webpage automatically gets downloaded. So we can download files types like PDF, zip, jpg, etc.
<a href=”downloads/demo.pdf”> This will download file in PDF format </a>
<a href=”downloads/brochures.zip”> This will download file in zip
<a href=”downloads/dinjo.jpg”> This will download file as a Image</a>
Image as an HTML Link: One more feature of HTML link is, to consider the image as a link in HTML document, this can be defined as follows:
<a href=”demo.html”> <img src=”travelling.png alt=”Travel”> </a>
Examples of Linking Pages in HTML
Here are the following examples mention below
In this example, we are adding a simple HTML link to one for the website and another is a webpage that is locally stored in our system.
<title>Linking Pages in HTML</title>
<h2>HTML Page Link</h2>
<p>Stay stunned with us for the latest news and update across all over globe </p>
<h4><a href="https://timesofindia.indiatimes.com/">Latest News and Updates</a></h4>
<p>Open another webpage by linking pages in HTML</p>
<h4><a href="Webpage%20Design%20HTML.html">To browse new webpage click Here</a></h4>
For the first link, it will open the website
For the second link, it will open webpage stored at local system
This is the example saying that we are using the link to open the webpage in a new tab whenever it clicked and Image as a link to open a new document.
<title>Linking Pages in HTML</title>
<h2>linking Pages in HTML</h2>
<p>Learn and grow your Technical skills with Us. We have exciting courses for you.</p>
<h4><a href="https://www.educba.com/" target="_blankwindow">More About US</a></h4>
<h2>HTML Image as Page Link</h2>
<p>As we discussed we can give link to the image, so are giving link to the image here which will open another page.</p>
<img src="t3.jpg" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
First link to open another page in new target window:
Image as a link to open another webpage:
In this example, we are using Button as a link.
<h4>Linking Pages in HTML Using Button as a Link</h4>
<p>Most important thing we can do give the link to the button to open another page.</p>
<button onclick="document.location='HTML inline tags.html'">HTML Inline tags</button>
Whenever we are going to click on the button it will work as a link to open another page:
Finally, linking pages in HTML can be done by using <a> tag with a href attribute. This element is useful in various features to like to create a bookmark, to open the document in target blank tab, the same thing in parent tab, self tab, to create the image as a link, to create a button as a link and many more other.
This is a guide to Linking Pages in HTML. Here we discuss how to link the page by using the HTML along with the examples. You may also have a look at the following articles to learn more –