Dissecting The Link

Hyperlinks are the foundation of the web. Links allow us to connect web pages and content within the same website or to an external website creating a complex network of information. We’re all familiar with links but maybe not with the HTML markup of a link and all its capabilities.

HTML is the backbone of every website and allows us to see content in the browser. It consists of a series of “tags”. Links are built with anchor tags. All tags may include “attributes” that provide additional information – some optional, some required. The only required attribute for an anchor is the “href” or hypertext reference which is the URL for the link. By saying it is required means it will fail HTML validation without it. The clickable area of a link can contain text, images, and other types of content. The basic structure of an anchor tag is as follows:

<a href="www.hallme.com">Go Back Home</a>

It contains an opening anchor tag where we specify all its attributes, content providing the clickable area of the link and a closing anchor tag.

First we’ll take a look at attributes specific to anchor tags and how links are managed in the WordPress editor.

HREF

As previously mentioned, the HREF specifies the destination of the link or the URL. Below are a few different ways of specifying the URL or using a protocol.

  • https://www.hallme.com/blog/ – This is an absolute URL which includes the domain and the path.
  • /blog/ – This is a relative URL which includes only the path. This links to a destination on the current website or domain.
  • #top – This is referencing the ID of an HTML tag within the current page. A couple of use cases would be quickly jumping to the top of the page or to a specific place in a table of contents.
    <h2 id="top">Top of page!</h2>
    <a href="#top">Go to top</a>
  • mailto:someone@example.com?Subject=Hello – This launches the default desktop application for handling email and auto-populates an email address. It can also specify a subject line.
  • tel:555-555-5555 – This initiates a phone call. It is only really useful on a mobile device and even without the “tel” protocol most mobile devices nowadays are smart enough to recognize and enable a link on a phone number. On a desktop it will look for a suitable application to handle this such as Skype.

Title

It is important to keep in mind that the text between the opening and closing anchor tags does not need to include a URL. That task is often best designated to the HREF attribute. The clickable text can naturally fit into the context of a paragraph rather than using text like “click here” or “www.hallme.com” to designate a link. Often it is best to use styles to highlight a link for instance underlining or using a different text color.

There are times where “Learn More” or “Read More” are apt text for buttons but do not provide enough context as to the content of the link. In those cases it is important to use the title attribute to provide additional information to both the user and search engines. The user will see this text in the browser when hovering over the link.

<a href="/about-us/" title="Learn More About Our Awesome Company">Learn More</a>

OR

<a href="/blog/author/john-doe/" title="Read more posts by John Doe">Read More</a>

Target

The target specifies where the linked document should be opened. The following are a list of the possible values and what each does.

  • _blank – Opens the linked document in a new window or tab. This is a best practice for linking to a document like a PDF or an external website.
  • _self – Opens the linked document in the same frame as it was clicked. It is generally not necessary to specify as it is the default action.
  • _parent – Opens the linked document in the parent frame.
  • _top – Opens the linked document in the full body of the window.
  • framename – Opens the linked document in a named frame.

Download

This specifies that the link should be saved to the user’s computer rather than just displayed in the browser. Keep in mind this is not yet widely supported in all browsers. The value may be omitted or used to rename the file.

<a href="test.jpg" download="cool.jpg">Download</a>

Rel

The rel specifies the relationship between the current document and the linked document. This attribute provides little relevance to the user or browser but can provide important metadata for search engines.

  • alternate – Provides a link to an alternate representation of the document (i.e. print page, translated or mirror).
  • author – Provides a link to the author of the document.
  • bookmark – Permanent URL used for bookmarking.
  • external – Indicates that the referenced document is not part of the same site as the current document.
  • help – Provides a link to a help document.
  • license – Provides a link to copyright information for the document.
  • next – Provides a link to the next document in the series.
  • nofollow – Links to an unendorsed document like a paid link.
  • noreferrer – Requires that the browser should not send an HTTP referer header if the user follows the hyperlink.
  • noopener – Requires that any browsing context created by following the hyperlink must not have an opener browsing context.
  • prev – The previous document in a selection.
  • search – Links to a search tool for the document.
  • tag – A tag (keyword) for the current document.

WordPress

WordPress recently updated the way links are added in the editor and added link validation.

Link Modal
Left: WordPress 4.2; Right: WordPress 4.1

In version 4.2 WordPress removed the field to easily add a title attribute to a link. To add extra attributes to links it’s important to have a working knowledge of HTML. The HTML code can be modified in the “Text” tab of the editor whereas the “Visual” tab renders the HTML like it would on the front-end of the website.

Link Validation
Left: The new inline link editor; Right: An example of a link that failed validation

For more information on internal link building for SEO purposes read more here.