HTML anchor tags, written as <a>, are used to create hyperlinks in a webpage. These links help users move from one webpage to another, jump to sections within the same page, or even open email or phone applications. The anchor tag uses the href attribute to define the destination of the link. The text or content between <a> and </a> is what users see and click on.
<a>, an href attribute (which tells the browser where to go), link text, and an end tag </a>.https://www.example.com to link to other websites.about.html.id, for example #contact-section.mailto: in href to open the default email app.tel: in href to start a phone call on mobile devices.target="_blank" to open links in a new tab, often with rel="noopener noreferrer" for security.The basic syntax of an anchor tag looks like this:
<a href="destination-url">Link text shown to the user</a>
Common attributes used with anchor tags:
href – The URL or link target (page, section, email, phone, etc.).target – Where to open the link (e.g., _self, _blank).rel – Relationship between the current page and the linked resource. Important for security when using _blank.id (on target elements) – Used together with href="#idValue" for in-page navigation.Below is an example showing different types of anchor tags in one place.
<!-- Link to an external website -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example.com</a>
<!-- Link to an internal page on the same website -->
<a href="about.html">About Us</a>
<!-- Link to a section in the same page -->
<a href="#contact-section">Jump to Contact Section</a>
<!-- Email link -->
<a href="mailto:info@example.com">Send Email</a>
<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>
a:link {
color: blue; /* Unvisited link */
}
a:visited {
color: purple; /* Visited link */
}
a:hover {
text-decoration: underline;
color: darkorange; /* When mouse is over the link */
}
a:active {
color: red; /* While the link is being clicked */
}
Try hovering or clicking the links above to see how they behave. In a full project, you can apply CSS pseudo-classes like a:hover and a:active to change their appearance based on user interaction.
This is the contact section of the page. When you click on the "Jump to Contact Section" link above, the browser scrolls directly to this area using the in-page anchor href="#contact-section".
target="_blank" only when you really need to open a new tab, and always add rel="noopener noreferrer" for security and performance.id that exactly matches the link’s href (for example, href="#contact-section" and id="contact-section").mailto: links to open the default email app with the address already filled in.tel: links so mobile users can tap to call without typing the number.CSS pseudo-classes help you style anchor links based on their state:
a:link – styles unvisited links.a:visited – styles links that the user has already visited.a:hover – styles links when the user hovers over them.a:active – styles links while they are being clicked.Apply these in your stylesheet and then hover or click the links in the page to see the styles in action.
rel="noopener noreferrer" for safety.about.html and one to contact.html in your project.id="faq". Add some dummy FAQ content there.mailto: and a phone link using tel: for a contact page.a:link, a:visited, a:hover, and a:active to give your links a clear and consistent style.HTML anchor tags are the core of web navigation. With the <a> tag and its href attribute, you can link to external sites, internal pages, sections within the same page, and even email or phone apps. Attributes like target and rel control how links open and how secure they are. Combined with CSS pseudo-classes such as a:hover and a:active, you can create clear, interactive, and user-friendly links throughout your website.