Anchor Tag

Links are what make the web work. The <a> tag, short for anchor, is used in HTML to create hyperlinks that connect one page to another, or even to specific parts of the same page.

Basic Use

The anchor tag requires an herf attribute, which tells the browser where the link goes. The clickable part (link text or element) is placed between the opening and closing <a> tags.

				
					<a href="https://learnwitharshyan.com">Visit learnwitharshyan</a>

Common Attributes

herf: Specific the URL or location of the link.
target: Controls how the linked document opens.

You can use target like this:

				
					<a href="https://learnwitharshyan.com" target="_blank">Open in New Tab</a>

_blank: Opens in a new tab or window.
_self: Opens in the current tab.
_parent and _top: Used in frames

Linking to Page Sections

You can also use <a> to jump to a specific section on the same page. This is done by linking to an element’s id.

Add an id to the target element:

				
					<h2 id="contact">Contact Us</h2>

Create a link to that id using #:

				
					<a href="#contact">Go to Contact Section</a>

When clicked, it scrolls directly to the “Contact Us” heading.

Styling Link States

Browsers style links differently based on their state:

Unvisited: Blue and underlined
Visited: Purple and underlined
Active (being clicked): Red

With CSS, you can change these styles to match your design:

				
					a {
  color: darkblue;
  text-decoration: none;
}

a:hover {
  color: orange;
  text-decoration: underline;
}

Summary

Use <a> to create links to web pages, files, or sections.
Use href to define the target, and target=”_blank” to open in a new tab.
Use id #id to jump to specific parts of a page.
Style links with CSS for better visual control.