Home > Article > Web Front-end > How do we include an anchor in HTML?
How do we include an anchor in HTML?
- WBOYforward
- 2023-08-31 15:21:06878browse
In this article, we will perform the task of how to include anchors in HTML. Let’s dive into this article to understand anchors in HTML.
The anchor element is used to link the source anchor to the target anchor. The target is the resource to which the source anchor is connected, while the source is the text, image, or button that points to another site.
Hyperlinks are one of the key technologies that make the Internet an information highway.
To better understand how to include anchors in HTML, let’s look at the following example
Example 1
In the example below, we will create a Jump Anchor link.
<!DOCTYPE html>
<html>
<head>
<style>
.main-content {
height: 90vh;
text-align: justify;
}
</style>
</head>
<body>
<h2 id="tutorials">Tutorials Point</h2>
<p class="main-content">
Tutorials Point originated from the idea that there exists a class of readers who
respond better to online content and prefer to learn new skills at their own pace
from the comforts of their drawing rooms.The journey commenced with a single tutorial
on HTML in 2006 and elated by the response it generated, we worked our way to adding
fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web designing to academics
and much more.</p>
<p>Click To
<a href="#tutorials">Jump</a>.
</p>
</body>
</html>
When running the above script, an output window will pop up showing the text used in the above script and the mentioned anchor tag "Click to jump", which allows the user to jump to the page when pressed start.
Example 2
Considering the following scenario, we are creating an example of linking to an anchor from another web page.
<!DOCTYPE html>
<html>
<body>
<h2 id="Tutorials">TutorialsPoint</h2>
<p>Tutorials Point originated from the idea that there exists a class of readers
who respond better to online content and preferto learn new skills at their own
place from the comforts of their drawing rooms.</p>
<p>
<a href="https://www.tutorialspoint.com/market/index.asp">Go To The Course Page.</a>
</p>
<p>
<a href="https://www.tutorialspoint.com/latest/ebooks">Search For Ebooks.</a>
</p>
</body>
</html>
When the script is executed, it will generate an output showing the text used in the above script and the link attached to the web page using anchor tags. When the user clicks on the link, it opens a new page.
Example 3: Using JavaScript
Look at the following example where we will create a link to javascript.
<!DOCTYPE html>
<html>
<body>
<a href="javascript:alert('Welcome To TutorialsPoint!');">Click To Execute</a>
</body>
</html>
When the given script is executed, it will provide an output that includes a link placed on the web page using an anchor with the text "Click to execute".
If the user clicks on the link, the script is triggered and the warning "Welcome to Tutorial Point" is displayed.
The above is the detailed content of How do we include an anchor in HTML?. For more information, please follow other related articles on the PHP Chinese website!