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
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
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
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
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
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
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>).