In this tutorial, we will illustrate two methods for linking text:
- Linking the text to another HTML page
- Linking the text to a section on the same page.
Link the text to Another Page
To establish a link from an HTML document to another HTML page that is within the same working directory, the following steps need to be adhered to in order to seamlessly connect the two HTML pages. By following these guidelines, it becomes effortless to link one HTML page to another.
To begin, the initial step involves entering the HTML code into a text editor or accessing an already existing HTML file in the desired text editor to incorporate a hyperlink to another HTML page.
<!Doctype Html>
<Html>
<Head>
<Title>
Add a link in Html to move on another Web Page
</Title>
</Head>
<Body>
Hello User! <br>
How are You?
If you want to know how to add an image in Html then click on the following link:
<br>
How to add an image in Html.
</Body>
</Html>
Step 2: Next, position the cursor at the beginning of the text intended to be linked and insert the anchor tag <a> at that location.
<a> That Text which we want to create as a link
Step 3 involves completing the anchor tag closure at the conclusion of the desired text to be linked, as demonstrated in the example below.
<a> That Text which we want create as link </a>
Step 4: In this step, we need to include the "href" attribute to the anchor tag. This involves inserting the href attribute within the opening <a> tag. Subsequently, we must specify the URL path of the HTML page we intend to link to. Refer to the provided code snippet or HTML block for guidance on how to format the path correctly.
<!Doctype Html>
<Html>
<Head>
<Title>
Add a link in Html to move on another Web Page
</Title>
</Head>
<Body>
Hello User! <br>
How are You?
If you want to know how to add an image in Html then click on the following link:
<br>
<a href="how-to-insert-image-in-html"> How to add a image in Html. </a>
</Body>
</Html>
In the final step, it is necessary to store the HTML code in the identical folder or location where the associated HTML page is stored, and subsequently execute the code. The provided screenshot illustrates the result of the aforementioned HTML code:
Link the text to section on the same page
To create a hyperlink to a specific section on the same webpage, adhere to the steps outlined below. By following these instructions, it is possible to seamlessly link to another section within the same page.
To begin, the initial step is to input the HTML code into a text editor or access the current HTML file in the text editor where we intend to navigate to a particular section within the HTML page.
Step 2: Next, position the cursor at the beginning of the specific section intended for linking. Subsequently, utilize the anchor tag with the id attribute, denoted as <a>.
<a id="any_text_or_character">The Section of a page we want to link</a>
Step 3: Next, position the cursor at the beginning of the text you wish to turn into a link. Subsequently, insert the anchor tag <a> at that location.
<a> That Text which we want to create as a link for reaching the specific part
Step 4 involves finalizing the anchor </a> tag at the conclusion of the text designated to be transformed into a hyperlink, as illustrated in the example below.
<a> That Text which we want to create as a link for reaching the specific part </a>
Step 5: The next action is to include the "href" attribute to the anchor tag. This involves inserting the href attribute within the opening </a> tag. Additionally, we need to specify the id of the particular section within the same page. To achieve this, append the id followed by a # sign in the href attribute. This process is detailed in the subsequent code snippet or HTML example.
<!Doctype Html>
<Html>
<Head>
<Title>
Add a link to move to a specific prt on same page.
</Title>
</Head>
<Body>
Hello User! <br>
How are You?
How to add Link in Html <br>
Here, we will describe how to link the text in two different following ways: <br>
<a href="#1">1. Link the text to an another Html Page <br>
</a>
<a href="#2">2. Link the text to the section on the same page.
</a>
<br>
<br>
<a id="1"> Link the text to Another Page </a> <br>
If we want to add or insert the link in Html document for linking to an another Html page with the current working page then we have to follow the steps which are given below. Using the following steps we can easily link the another Html page.<br>
<br>
<a id="2">Link the text to section on the same page</a>
<br>
If we want to link a text to the particular part of the same page follow the steps which are given below. Using the following steps we can easily link the another section in the same page.
</Body>
</Html>
In the final step, it is necessary to save the HTML file and then run it. Below is a screenshot displaying the result of the HTML code mentioned above: