HTML CODES & EXAMPLES

HTML Links

Learn how to create internal links, external links, email links, telephone links, download links and clickable buttons using HTML.

← HTML Paragraph Start Learning →

What are HTML Links?

Understanding the anchor element

HTML links are created using the <a> element, also known as the anchor element. Links allow users to navigate from one webpage to another, open documents, send emails, make phone calls and jump to specific sections of a page.

Basic Link Syntax

The simplest HTML hyperlink

link.html

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

Output:

Visit Website

The href Attribute

Specify where the link should go

The href attribute specifies the destination URL of the link.

href-example.html

<a href="https://www.sncec.in/">
  Visit SNCEC Website
</a>

Internal Links

Link to another page on the same website

Internal links connect pages within the same website. They are useful for website navigation and content organization.

internal-links.html

<a href="/about-us/">
  About Us
</a>

<a href="/courses/">
  Courses
</a>

<a href="/contact/">
  Contact Us
</a>

External Links

Link to another website

external-links.html

<a
  href="https://www.google.com/"
  target="_blank"
  rel="noopener noreferrer">

  Open Google

</a>

Tip: Use target="_blank" when you want an external page to open in a new browser tab.

Open Link in New Tab

Using the target attribute

new-tab.html

<a
  href="https://www.sncec.in/"
  target="_blank"
  rel="noopener noreferrer">

  Open SNCEC in New Tab

</a>

Email Link

Create a clickable email address

Telephone Link

Create a clickable phone number

phone-link.html

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

Download Link

Create a link for downloading a file

download.html

<a
  href="/files/course-brochure.pdf"
  download>

  Download Course Brochure

</a>

Page Section Links

Jump to a specific section on the same page

anchor-link.html

<a href="#courses">
  View Courses
</a>


<h2 id="courses">
  Our Courses
</h2>

<p>
  Explore computer and professional courses.
</p>

Link Title

Add additional information with the title attribute

title-attribute.html

<a
  href="/courses/"
  title="View all available courses">

  Courses

</a>

Button-Style Link

Make an anchor element look like a button

button-link.html

<a
  href="/courses/"
  class="course-button">

  Explore Courses

</a>


<style>

.course-button{
  display:inline-block;
  padding:12px 20px;
  background:#1769d5;
  color:white;
  text-decoration:none;
  border-radius:8px;
}

.course-button:hover{
  background:#0d55b5;
}

</style>

Important Link Attributes

Common attributes used with the anchor element

href

Specifies destination

href=”/about-us/”

target

Specifies where to open link

target=”_blank”

title

Provides additional information

title=”About Us”

download

Requests file download

download

rel

Defines relationship

rel=”noopener”

Practical Navigation Example

Create a simple website navigation menu

navigation.html

<nav>

  <a href="/">Home</a>

  <a href="/about-us/">About Us</a>

  <a href="/courses/">Courses</a>

  <a href="/shop/">Shop</a>

  <a href="/contact/">Contact</a>

</nav>