Blog Post: Basic Proper A-Links

Red Deer & Blackfalds Web Design Writes:

When writing the proper HTML Markup for your website (or possibly your clients website) it is necessary to make the necessary minor adjustments to allow for optimal output. This article will focus primarily on building proper a:links in your website, and common errors made in both the HTML and CSS.

The following is the proper way to build an a:link:

<a href=”/insert-link-here” rel=”nofollow” target=”_blank” class=”link-example”>Link Text</a>

Now you will notice that two basic additional attributes were set, and those were: rel=”follow” and target=”_blank”. Each of these serves an additional purpose when building links on a webpage.

  1. rel=”nofollow” – tells Google not to index this particular link on a webpage. Or rather, it notifies the Crawlers to not follow this link. This can help save Google Juice by not seeping out links on a specific page you may be trying to SEO.
  2. target=”_blank” – tells the browser that when clicked this link should open up in an additional tab. This is important if linking to an outside website, because you do not want your visitors to find themselves browsing the internet, leaving your site to visit another, and then never coming back to utilize your service and/or product.

Another common mistake made on some links is to not have the proper :hover CSS. In terms of User Experience (UX), when someone visits your website and hovers over a link (or what they expect to be a link) they expect certain things to happen. These expectations are subtle and subconscious; however, still very important in the grand scheme of things. They are looking for two basic things:

  1. Change of Colour/Format – whether you’ve constructed a beautiful button, or are just using a basic link inside of an article, upon hovering your prospective client still expects something to happen.
  2. Cursor – when you hover a link, basic UX tells us that the cursor on your computer should change from an “arrow” to a “pointer”. Refer to the examples below to see what I mean.

Bad Link CSS: LINK TEXT
Good Link CSS: LINK TEXT

See the difference? The good link changes colour and the format of the cursor, while the bad link does not change anything; however, both links reach the same destination. It is these small items that make all the difference in Web Development & Design and improving the UX of your website.

a.good-link-example:hover {color: green; cursor: pointer;}

PS: If the picture in this article made sense to you, then you are a true gamer!

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)