How to Create Links and Buttons in HTML

Creating links and buttons is a fundamental part of building interactive and navigable web pages. Whether you are linking to another website, another section of the same page, an email address, or making a button behave like a hyperlink, HTML and CSS give you a wide range of tools. In this comprehensive guide, we will walk through how to create hyperlinks, style them, remove underlines, open them in new tabs, and use buttons as links, using clean and SEO-friendly practices.

1. How to Create a Hyperlink in HTML

The basic structure for a hyperlink uses the <a> tag. Here’s the syntax:

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

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

This creates a clickable link labeled “Visit Example” that redirects the user to https://www.example.com.

If you’re wondering how to make a hyperlink, this is the most straightforward way.

2. How to Create a Link to a Specific Part of a Page (Anchor Link)

You can link to a specific section using an ID attribute:

<!-- Target Section -->
<h2 id="about">About Us</h2>

<!-- Link -->
<a href="#about">Go to About Section</a>

<!-- Target Section -->
<h2 id="about">About Us</h2>

<!-- Link -->
<a href="#about">Go to About Section</a>

This is commonly referred to as an anchor link, and it’s how you link to a particular section on a webpage.

3. How to Create an Email Hyperlink

To create a hyperlink to an email in HTML, use the mailto: protocol:

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

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

When clicked, this will open the default mail client with a new email draft addressed to the provided email.

4. Open Link in a New Tab

Use the target="_blank" attribute:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example in New Tab</a>

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example in New Tab</a>

This answers how to open link in new tab in HTML and is also a way to open the link in new tab in HTML.

Note: Always include rel="noopener noreferrer" when using _blank for security and performance.

5. Remove Underline from Link in CSS

By default, links are underlined. If you want to remove underline from link in CSS, use text-decoration: none;.

a {
  text-decoration: none;
}

a {
  text-decoration: none;
}

This covers all variations like:

• css a href remove underline
• remove a href underline css
• css remove underline from link

6. Change Link Color in HTML and CSS

To make a hyperlink black or change its color:

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

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

You can also use pseudo-classes to modify hover states:

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

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

This is how you change link color HTML, and css change link color.

7. How to Use a Button as a Link in HTML

Buttons can behave like links by using JavaScript or wrapping an <a> tag around them:

Option 1: <a> inside a button look-alike

<a href="https://www.example.com" class="btn">Go to Site</a>

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

<a href="https://www.example.com" class="btn">Go to Site</a>

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

Option 2: Using JavaScript

<button onclick="window.location.href='https://www.example.com'">Go to Site</button>

<button onclick="window.location.href='https://www.example.com'">Go to Site</button>

This is commonly referred to as using a button as a link to a page.

8. Capture the HTML from a Link Using JavaScript

You can get the HTML or text content of a link using JavaScript like this:

<a id="myLink" href="https://example.com">Click Me</a>

<script>
  const link = document.getElementById('myLink');
  console.log(link.outerHTML);  // Gets full HTML of the link
</script>

<a id="myLink" href="https://example.com">Click Me</a>

<script>
  const link = document.getElementById('myLink');
  console.log(link.outerHTML);  // Gets full HTML of the link
</script>

This is useful when you want to capture the HTML from a link in JavaScript.

9. Embed a Link into Text

To embed a link into text:

<p>Check out our <a href="/services">services</a> for more details.</p>

<p>Check out our <a href="/services">services</a> for more details.</p>

This method is used when you want to embed a link in text naturally without disrupting reading flow.

10. Different Types of Links in HTML

• External link – goes to another website
• Internal link – links to a section of the same site
• Anchor link – jumps to a specific part of the same page
• Email link – opens the email client
• Phone link – dials a phone number on mobile

Example:

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

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

SEO Tip: Always Use Descriptive Anchor Text

Avoid vague text like “click here.” Instead, use text like:

<a href="/pricing">View Our Pricing Plans</a>

<a href="/pricing">View Our Pricing Plans</a>

This improves both usability and SEO.

Conclusion

Understanding how to create links and buttons in HTML—and how to style and modify them using CSS—gives you powerful control over user navigation and experience. From creating clickable text to removing underlines, opening new tabs, or using buttons as links, you now have a complete guide to do it all.

If you’ve ever asked questions like how do I make a hyperlink, how to make a link to a website, or how to embed a link, this article should serve as a definitive answer.

FAQs