Menu
HTML

Creating Links (<a>)

Creating links in HTML is easy. You use the <a> tag to link to another page or resource. Here’s how you do it:

To create a basic link, use the <a> tag with the href attribute, which specifies the URL of the page the link goes to.

<a href="https://www.codersmile.com">Visit Codersmile</a>

This will display as: Visit Codersmile

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

<a href="https://www.codersmile.com" target="_blank">Visit Codersmile in a new tab</a>

This will open the link in a new tab when clicked.

To create a link that opens an email client, use mailto: followed by the email address.

<a href="mailto:info@codersmile.com">Email Us</a>

This will open the default email client with the "To" field filled out.

 

Linking to a Section on the Same Page

You can also link to a specific section within the same page using an id attribute.

First, assign an id to the section you want to link to:

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

Then, create a link to that id:

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

This will scroll the page to the "Contact Us" section when the link is clicked.

 

Linking to a Section on Another Page

To link to a specific section on a different page, combine the URL of the page with the id.

<a href="https://www.codersmile.com/about.html#team">Meet Our Team</a>

This will take you to the "Team" section on the "About" page of codersmile.com.

 

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Links Example by codersmile.com</title>
</head>
<body>
<h1>Welcome to Codersmile.com</h1>
<p>Visit our <a href="https://www.codersmile.com">homepage</a> for more information.</p>
<p><a href="https://www.codersmile.com/tutorials" target="_blank">Check out our tutorials</a> to improve your coding skills.</p>
<p><a href="mailto:info@codersmile.com">Contact us via email</a> for any inquiries.</p>
<h2 id="resources">Resources</h2>
<p>We provide a variety of <a href="#resources">resources</a> to help you learn.</p>
<p>Learn more about our <a href="https://www.codersmile.com/about.html#team">team</a>.</p>
</body>
</html>

 

 

HTML