HTML Anchor Tags and Page Navigation
Basic Anchor Tags
The <a> tag creates hyperlinks that enable navigation between pages or sections.
Core Attributes
href: Specifies the destination URLtarget: Controls where the link opens
Target Values
| Value | Behavior |
|---|---|
_self |
Opens in the current tab (default) |
_blank |
Opens in a new tab |
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Link Demo</title>
</head>
<body>
<a href="page.html">Local Page</a>
<a href="">Refresh Current Page</a>
<a href="missing">Broken Link</a>
<a href="https://example.com" target="_self">Same Tab</a>
<a href="https://example.com" target="_blank">New Tab</a>
<a href="https://example.com" target="_blank">
<img src="images/photo.jpg" alt="Clickable Image" />
</a>
</body>
</html>
In-Page Anchors
When a page contains extesnive content, anchors allow quick navigation between sections.
Creating Anchors
Place <a name="anchor-id"> at the target location, then link with href="#anchor-id".
<html>
<head>
<meta charset="UTF-8">
<title>Product Catalog</title>
</head>
<body>
<a name="electronics"></a>
<h1>Electronics</h1>
<p>Product descriptions...</p>
<!-- repeated content -->
<a name="beauty"></a>
<h1>Beauty Products</h1>
<p>Item listings...</p>
<!-- repeated content -->
<a name="baby"></a>
<h1>Baby Care</h1>
<p>Product details...</p>
<!-- repeated content -->
<a name="books"></a>
<h1>Books</h1>
<p>Book listings...</p>
<!-- repeated content -->
<nav>
<a href="#electronics">Electronics</a>
<a href="#beauty">Beauty</a>
<a href="#baby">Baby Care</a>
<a href="#books">Books</a>
</nav>
</body>
</html>
Cross-Page Anchors
Link to a specific section on another page by combinign the filename with the anchor.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Navigation</title>
</head>
<body>
<a href="catalog.html#beauty">Jump to Beauty Section</a>
</body>
</html>
Syntax Summary
- Same page:
href="#section-id" - Different page:
href="page.html#section-id"
Anchors improve user expeirence on long pages by providing direct navigation without scrolling.
