HTML Anchor Tag Explained

Anchor tags, or ‘a’ tags, can be used to link to other webpages from a single webpage. Anchor tags can also be used to link to section within the same page, which will scroll the user to a particular element within the page.

Anchor tags have opening and closing tags. The contents of the anchor tag contain the text that is going to be displayed on the page, and be the hyperlink on the webpage. The href property is used to specify where the link will direct the user too. Below is a code snippet that links a user to the homepage of Google, and will redirect the user to that webpage. The anchor tag below will link to Google, but the displayed text on the webpage will be “Link to Goodgle”.

<a href="">Link to Google</a>

You can also link to other local webpages that you have created using anchor tags. the href property will be populated with a relative path, relative to the current html document. The code snippet below shows two links, one to an about page within the same directory of the current html page, and another to a contact page, within a pages directory/folder that is in the same location of the current html file.

<a href="/about.html">About Page</a>
<a href="/pages/contact.html">Contact Page</a>

Anchor tags can also be used to open links in a new tab or a new browser window. Using the target attribute and setting the value to ‘_blank’ will ensure that the link will open in a new tab or window. The link can point to an external page, such as Google, or another local webpage on your website.

<a href="" target="_blank">Open a new tab</a>

Leave a Reply