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.

About Link Building for SEO

Link building is the process of acquiring hyperlinks (backlinks) from other websites to your own website. These links can be considered as “votes” for your website, and can help to improve the search engine rankings of your site. It may be part of a Search Engine Optimization (SEO) strategy.

Link building can be done through a variety of methods, such as creating valuable content that other sites will want to link to, reaching out to other webmasters to request links, or by participating in link exchanges with other sites. Here is an outline of strategies and methods.

1. Content creation: Create valuable and informative content that other websites will want to link to. Examples: blog posts, infographics, videos, and other types of multimedia.
2. Outreach: Reaching out to other websites and webmasters to request links. Examples: guest blogging, broken link building, and other forms of link request.
3. Paid guest posts: Paying a website to publish an article or blog post that includes a link back to your own website. This is a form of link building that can be used to acquire high-quality links and improve search engine rankings.
4. PBNs (Private Blog Networks): A link building strategy that involves creating a network of websites that are used to link back to a main website. These websites are often set up on expired domains.
5. Social media: Use social media to promote content and acquire links. Examples: sharing links on Twitter, Facebook, and other social networks, as well as participating in social media communities and forums.
6. Local citations: Acquire links from local business directories and other websites that list local businesses.
7. Brand mentions: Acquire links from other websites that mention your brand or business without linking to it.
8. Competitor analysis: Analyze your competitors’ backlink profile (e.g. using Ahrefs), and try to replicate their link building efforts.

However, it’s important to note that Google and other search engines have become increasingly strict about the types of links that they consider to be “good” or “bad”. Some link building techniques can be considered as spammy or manipulative, and can result in penalties or other negative consequences.

What <a href=""> Means

<a href=""> is an HTML tag used to create a hyperlink. The <a> stands for “anchor” and the href attribute specifies the URL or location of the file to which the link points. The text or content between the opening <a> tag and the closing </a> tag is displayed on the page and is clickable, allowing users to navigate to the link’s destination.

For example, the following code creates a link to the Google homepage:

<a href="https://www.google.com">Google</a>

When this code is rendered in a web browser, the word “Google” will be displayed as a clickable link that directs the user to the Google homepage when clicked on.

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.

The target attribute is an HTML attribute that is used in conjunction with the <a> tag to specify where to open the linked document.

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

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

<a href=”https://51links.com/”><img src=”https://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://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>).

7. Download Link

A download link is a hyperlink that, when clicked, allows the user to download a file from the internet. The file can be of any type, such as an image, document, or program.

The href attribute of the <a> tag is used to specify the location of the file to be downloaded. The download attribute can also be used to specify a name for the downloaded file, instead of using the original file name.

For example, the following code creates a link to download a file named “example.pdf”:

<a href="example.pdf" download>Download example.pdf</a>

When clicked on, the user’s browser will prompt them to save the file “example.pdf” to their computer.

Keep in mind that in order for the file to be downloaded, the file must be stored on a web server and accessible via a URL.

Web Pages Other Sites Link To

Certain types of web pages other webmasters like to link to, whereas others may be ignored. Gaining incoming links is important to make your website prominent in search results. Key examples of linkable web pages include the following.

1. Informative: These pages provide valuable information on a specific topic and are often well-researched, well-written, and well-organized. They may include things like how-to guides, tutorials, reviews, and other types of educational content.
2. News: Pages with breaking news or updates on current events. They may include stories, articles, or reports on a wide range of topics.
3. Resource page: A web page with useful resources, such as tools, templates, or guides that can help users with a specific task or process.
4. Entertainment: A page providing a form of entertainment, such as videos, games, music, or images. They are often shared and linked to by other websites or social media.
5. Authority: A web page considered a reliable source of information. They are often linked to by other websites in the same industry or niche. Such a page is often written by an expert with a good reputation in their field.
6. Social: These pages are often linked to by other websites because they have a large following or a good reputation on social media platforms. They include blogs, social media profiles, or any other pages that are updated frequently, have a high number of followers, or are interactive.
7. E-commerce: A page may be often linked to by other websites because it provides a way to purchase products or services online. They include pages from retail websites, online marketplaces, or any other pages that facilitate online sales.

Offering unique content that people want to cite is the best way to gain dofollow backlinks naturally. Here’s an example of information people want to cite. “According to the World Wildlife Fund, the African Elephant population has decreased by over 111,000 in the last decade (Source: World Wildlife Fund, “African Elephant Population Declines by 111,000 in a Decade,” November 2020).”