WikiGalaxy

Personalize

HTML Links, Hyperlinks, and the Target Attribute

HTML links, also known as hyperlinks, are a cornerstone of the web, enabling navigation between web pages, external resources, and different sections within a single page. This chapter covers the key concepts, attributes, and functionalities of HTML links, including:

Hyperlink Basics
The href Attribute
The target Attribute
Internal vs. External Links
Anchor Links
Styling Links

HTML Links

Basic Link Structure

An HTML link is created using the <a> tag. The href attribute specifies the destination of the link.


<a href="https://www.example.com">Visit Example</a>

Linking to a Section on the Same Page

Use the id attribute to link to a specific section on the same page.


<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>

Opening Links in a New Tab

To open a link in a new tab, use the target="_blank" attribute.


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

Linking to an Email Address

Create a mailto link to allow users to send an email directly.


<a href="mailto:someone@example.com">Email Us</a>

Linking to a Phone Number

Use the tel: protocol to create clickable phone numbers.


<a href="tel:+123456789">Call Us</a>

Creating Image Links

Wrap an <img> tag inside an <a> tag to create an image link.


<a href="https://www.example.com"><img src="image.jpg" alt="Example Image"></a>

Linking to a PDF File

Use the href attribute to link to downloadable files like PDFs.


<a href="file.pdf">Download PDF</a>

Adding a Tooltip to Links

Use the title attribute to add a tooltip to a link.


<a href="https://www.example.com" title="Visit Example">Hover Over Me</a>

Linking to a Video

You can link directly to video files for direct download or streaming.


<a href="video.mp4">Watch Video</a>

Linking to Social Media

Create links to social media profiles by providing the appropriate URLs.


<a href="https://www.facebook.com/yourprofile">Facebook</a>

Creating Basic Links

The <a> tag is used to define a hyperlink. The href attribute specifies the URL the link points to.




<!DOCTYPE html>

<html>

<head>

<style>

.link-style {

color: green;

text-decoration: none;

font-size: 20px;

}

</style>

</head>

<body>

<a href="https://www.example.com" class="link-style">Visit Example</a>

</body>

</html>

Output:

A clickable "Visit Example" link in green text without underline.

Opening Links in a New Tab

The target attribute specifies where to open the linked document. A common value is _blank, which opens the link in a new tab.



<!DOCTYPE html>

<html>

<body>

<a href="https://www.wikipedia.org" target="_blank">Open Wikipedia in a new tab</a>

</body>

</html>

Output:

Clicking the link opens Wikipedia in a new browser tab.

Internal Links

Internal links navigate to another section of the same webpage using the id attribute as the target.



<!DOCTYPE html>

<html>

<body>

<h1 id="top">Top of the Page</h1>

<p><a href="#bottom">Go to Bottom</a></p>

<h1 id="bottom">Bottom of the Page</h1>

<p><a href="#top">Back to Top</a></p>

</body>

</html>

Output:

Two links that allow navigation between the top and bottom of the page.

External Links

External links point to resources outside the current website.



<!DOCTYPE html>

<html>

<body>

<a href="https://www.google.com" target="_blank">Search on Google</a>

</body>

</html>

Output:

A link to Google that opens in a new tab.

Link Styling with CSS

CSS can style links to enhance their appearance and improve user experience.



<!DOCTYPE html>

<html>

<head>

<style>

a {

color: blue;

text-decoration: underline;

}

a:hover {

color: red;

}

</style>

</head>

<body>

<a href="https://www.example.com">Hover over this link</a>

</body>

</html>

Output:

The link changes color to red when hovered.

Mailto Links

Mailto links open the user's default email client to compose a message.



<!DOCTYPE html>

<html>

<body>

<a href="mailto:info@example.com">Send Email</a>

</body>

</html>

Output:

Clicking the link opens an email client to send a message to info@example.com.

Download Links

Using the download attribute, a link can prompt the browser to download the linked file.



<!DOCTYPE html>

<html>

<body>

<a href="example.pdf" download>Download PDF</a>

</body>

</html>

Output:

The linked PDF file downloads when clicked.

Link with Images

Images can be used as hyperlinks.




<!DOCTYPE html>

<html>

<body>

<a href="https://www.example.com">

<img src="example-image.jpg" alt="Example Image" width="200">

</a>

</body>

</html>

Output:

An image that redirects to the specified URL when clicked.

Anchor Links for Long Pages

Anchor links allow navigation to specific sections of long pages.




<!DOCTYPE html>

<html>

<body>

<h2 id="section1">Section 1</h2>

<p><a href="#section2">Go to Section 2</a></p>

<h2 id="section2">Section 2</h2>

<p><a href="#section1">Back to Section 1</a></p>

</body>

</html>

Output:

Links navigate between sections of the page.

Accessibility with Links

Using descriptive text improves accessibility for screen readers.




<!DOCTYPE html>

<html>

<body>

<a href="https://www.example.com" aria-label="Learn more about our website">

Learn More

</a>

</body>

</html>

Output:

A link labeled for better accessibility.

Links are foundational to web navigation.

Mastering their use, including attributes like href and target, ensures effective and user-friendly websites. Styling and advanced link types, such as mailto and download links, enhance functionality and user experience.