Examples of Links on Websites: HTML Hyperlinks

If you want to know about the different types of links on websites, here is a quick tutorial with examples. HTML code is included.

When you link to another website or even your own site, the HTML code you use is important. The tag options and anchor text affect Search Engine Optimization (SEO) and user experience.

1. Simple External Link

The simplest external link is like this example where you add an HTML link to text.

The simplest external link is like this example where you add an <a href=”https://www.w3schools.com/html/html_links.asp”>HTML link</a> to text.

You may notice that HTML links consist of a starting tag and closing tag. The starting tag looks like this: ‘<a href=””>’. The closing tag is just ‘</a>’.

A simple external link only has two elements that you need to worry about. One is the target URL (or web address) on a different (external) website. The target URL goes inside the quotes in the starting tag.

The other bit is the anchor text. This is plain text usually and goes between the starting and closing tags. The anchor text is “HTML link” in the example.

A simple external link is good for the target (or destination) page in terms of SEO. All the “link juice” is passed along. Clicking the link takes the user directly to the page.

The anchor text affects SEO, especially for the target page. You can read more about choosing the anchor text in this MOZ anchor text SEO article.

Users can see the link easily as long as the highlight color for hyperlinks is quite different from normal text color. If not, you can always bold the text.

2. Link that Opens in a New Tab

You can make a link open in a new tab by adding a “target equals blank” attribute.

You can make a link <a href=”https://www.w3schools.com/tags/att_a_target.asp” target=”_blank”>open in a new tab</a> by adding a “target equals blank” attribute.

The ‘target=”_blank”‘ attribute is how you force a new tab or window to open when a user clicks or taps the hyperlink. Just add that little piece of HTML code inside the opening tag.

As a rule-of-thumb, use this code for external links – where the target page is on a different site. That way, your site won’t disappear from the user’s radar.

For internal links, you normally avoid doing this. Users can then seamlessly move between pages without generating large numbers of open tabs.

3. No-Follow Link

In cases where you want Google to essentially ignore a link, you can devalue the link – and effectively not endorse it – by setting the rel attribute to “nofollow”.

In cases where you want Google to essentially <a href=”https://www.searchenginejournal.com/when-to-use-nofollow-on-links/383468/” rel=”nofollow”>ignore a link</a>, you can devalue the link – and effectively not endorse it – by setting the rel attribute to “nofollow”.

Use “nofollow” selectively. The source site normally doesn’t gain anything from no-following links.

You may need to use “nofollow” to avoid Google penalizing your site for things like having lots of paid-for links. Follow the link in the text above (no pun intended) for more information. The article also covers “sponsored” and “ugc” (short for User-Generated Content) attributes, which are similar to “nofollow”.

4. Link from an Image

51 Links

To link from an image, just wrap the link code around the image code.

<a href=”https://www.51links.com/”><img src=”https://www.51links.com/wp-content/uploads/links-pic.png” alt=”51 Links”/></a>

You can create a clickable image by placing the image code inside the link code, as in the above example.

Essentially, the image code goes in place of the anchor text. Search engines then recognise the alt tag for the image as the anchor text for the link.

5. Internal Link

For an internal link, meaning a link to the same domain, you can use a shortened, relative link.

For an internal link, meaning a link to the same domain, you can use a shortened, <a href=”/examples-of-links-on-websites-html-hyperlinks/”>relative link</a>.

With internal links, which never leave the website, you can shorten the target URL in the HTML code. You don’t need HTTPS or the domain name. Just start with the slash that follows the domain name in the URL.

A relative link is different from an absolute link, where you simply specify the URL’s full path – as we’ve done in all previous examples.

Using relative links has pros and cons, though the choice probably doesn’t matter all that much under normal circumstances.

6. Within-Page Link

You can link to a certain place on a page using the id attribute. First, name a piece of HTML code on the page, such as this paragraph.

<p id=”this-paragraph”>You can link to a certain place on a page using the id attribute. First, name a piece of HTML code on the page, such as this paragraph.</p>

Then, link to the named place using a URL that trails with the hash character and the name you chose.

Then, <a href=”https://www.51links.com/examples-of-links-on-websites-html-hyperlinks/#this-paragraph”>link to the named place</a> using a URL that trails with the hash character and the name you chose.

Using the id attribute is handy for skipping to certain places on a page, such as when you place a table of contents at the top of a long page.

The id attribute can be applied to different types of HTML code. Common ones are a paragraph (e.g. <p id=”para1″>), a heading tag (e.g. <h2 id=”my-heading”>) and a div tag (e.g. <div id=”section3″>).

The URL link with the trailing hash code can be used both within the page, or from other pages and websites. If linking from the same page, you can use a short relative link (e.g. <a href=”#this-paragraph”>go to para</a>).