coding180 icon

Coding180

HTML Element: Link <a> -  Anchor tag

HTML Element: Link <a> - Anchor tag

Tutorials > HTML > Anchor Elements


One of the most important element that a web page has is the hyperlink <a>, this allows us to load another page in the browser. 

Normally, when a browser finds this HTML tag, it shows an underlined text, and when you click on it, the browser loads the page that you specified in anchor tag.

First, we will see what is the syntax to have a hyperlink to a page that is on the same site (that is, another page that we have developed).

The hyperlink element to another page on the same site has the following syntax:

<a href="page2.html">Link Text Here</a>

As we can see, we used anchor tag to define the opening <a> and closing </a> of the link.

What is between the opening and closing tag is the text that appears on the page (usually underlined).

The href property of the "a" element refers to the page that the browser should display if the visitor clicks on the hyperlink. 

anchor link a html - coding180

Let's implement two pages that contain hyperlinks to each other, the names of the HTML pages will be: page1.html and page2.html

The content of page1.html is:

<!DOCTYPE html>
<html>

<head>
    <title>Title of page 1</title>
    <meta charset="UTF-8">
</head>

<body>
    <h1>Home page.</h1>
    <a href="page2.html">News</a>
</body>

</html>

As we can see, the new thing in page1.html is the hyperlink to page2.html:

<a href="page2.html">News</a>

Every property takes the value that is found after the character "="

The value of the href property in this case is page2.html (it is another HTML file that must be found on our site and in the same directory), if we try it on our computer, place the two files in the same folder.

The second page2.html file has a hyperlink to the first page:

<a href="page1.html">Exit.</a>

To remember the name of this HTML tag:

<a> comes from anchor.

The second page in our example is:

page2.html

<!DOCTYPE html>
<html>

<head>
    <title>Title of page 2</title>
    <meta charset="UTF-8">
</head>

<body>
    <h1>News.</h1>
    <a href="page1.html">Exit.</a>
</body>

</html>

 


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel