A Complete Guide to HTML Linking: How to Create and Use Links in Your Website

The infrastructure of the internet makes the web and the entire collection of webpages and websites possible. Webpages become interconnected when we use linking also known as hyperlinks. The clickable text within a hyperlink (the entire unit as a whole) is known as hypertext (a part of the whole). That is where HTML (Hypertext Markup Language displays its special capabilities.

In this guide we will be exploring linking and how to link to webpages on your website, a fundamental part of the web.

Let's analyze the basic structure of the hyperlink.

<a href="https://matthewseiwert.com">Click here to navigate to matthewseiwert.com</a>

We are using the <a></a> element to build a hyperlink. "Click here to navigate to matthewseiwert.com" is what is known as the hypertext.

You can use links throughout a website. For instance a list of links can be used for a navigation menu, the footer section, or a section on a resources page.

How to internal and external link using HTML

Linking to an internal page on your website versus an external website are very similar but with internal linking you can shorten url to just the relative path.

<a href="/blog">Click here to navigate to matthewseiwert.com blog</a>

Just like external links you can still use the full url also known as the absolute path.

<a href="https://matthewseiwert.com/blog">Click here to navigate to matthewseiwert.com blog</a>

It is more common to just use the relative path for internal links. Be sure to use internal links throughout your content when it makes sense to help with SEO and a better user experience. You are essentially helping users get to the information that are looking for easier and also help the user learn more about a topic that they want to learn more about on your website.

How to open links in a new tab in the browser using HTML

To open a link in a new tab we want to add an additional attribute to your hyperlink.

<a href="https://matthewseiwert.com" target="_blank">
  Click here to navigate to matthewseiwert.com
</a>

The target attribute makes this possible. Essentially it is saying where we want the link to open in the browser once clicked. The value _blank is the convention used to say open in a new tab. If the value was instead _self the link would open in the current tab. This is already the default behavior so we don't need to specify this in our code.

For added security and performance you'll also want to add additional attribute.

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

The rel attribute stands for relationship and it specifies the relationship between the current document and the linked resource. When using the target attribute you are making the window.opener JavaScript object available and using the noopener value helps prevent malicious attacks. The noreferrer value prevents the linked resource from knowing about where the user came from (the referrer url) providing added privacy.

How to anchor link in HTML

An anchor link is used when you want to link to a part of the same page that you are on.

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

<h2 id="section1">Section 1</h2>
<p>This is the content of Section 1.</p>

There are two pieces to anchor linking: the hyperlink and the id. We already know how to build a hyperlink, but what is different know is the id we add to the href attribute. The id is an HTML attribute that is used to uniquely identify an element. On the flip side you also have a **class **which is an HTML attribute used to uniquely identify a group of elements. We won't cover the class attribute in this guide, but you may often find yourself using the id and class attribute in CSS and JavaScript.

So to complete the anchor link set up you'll want to add an id attribute to whichever section of the page you want your link to navigate to. Once the id attribute is added be sure to add the value to the **href ** attribute.

How to style hyperlinks using HTML

To style any HTML you'll want to use CSS. When you start getting into CSS frameworks like Tailwind CSS, keep in mind that these frameworks are built on top of CSS to make your life easier.

You can use the style attribute (an HTML attribute) to apply CSS rules inside an HTML element known as inline style or link to an external stylesheet. With vanilla CSS I would generally recommend using a external stylesheet.

Once your external stylesheet is linked to your HTML document within a folder you can target and style your link tags by referencing your hyperlinks directly:

a {
    text-decoration: none;
}

In my external link I am targeting all hyperlinks on my website and removing the default underline the appears for links in the browser. You can also use id and class to target specific link/s or use the child combinator ">" to target link/s within a specific parent container.

/*id*/
#section1 {
    text-decoration: none;
}

/*class*/
.social-links {
    text-decoration: none;
}

/*child combinator*/
.social-links > a:first-child {
    text-decoration: none;
}

When styling an element with an id be sure to use # in front of the id name. For a class be sure to use . in front of the class name. The class example I am removing the default underline for all links with the social-links class. For the child combinator example I am removing the default underline for only the first link that appears in my list of social links using the combinator with the pseudo-class first-child.

Final Thoughts

You now have a greater understanding of how powerful links can be along with all the versatility hyperlinks have in HTML. Before diving into CSS it is important to ensure your HTML is spot on and effective for the types of projects you will be building now and in the future.