Back in college, I was tasked with making an HTML site for an introductory computer class. One of the requirements was to add an external link. I no longer remember where the links led to, and I have only a fuzzy memory of making the website about my cat.
However, something I didn’t forget was just how easy it was to create an external link:
The anchor tag
<a … ></a>The href attribute
The target
I had this belief that linking to another website contained these three elements and little more. However, like many things on the web, even linking to another site has become a bit more complicated.
Back in the HTML Days
I didn’t keep the code for my first website, but if I had, the link would have looked something like this:
<a href="http://www.somewebsiteaboutcats.com">Link to cats</a>
The <a> stands for anchor. The href attribute (short for hypertext reference) is equal to the address of where we want our link to send the user to. This address is the target, and doesn’t have to be an external website. It could be an internal link, a pdf, a phone number, an email address, among other things.
The text between the <a> tags should indicate the link’s destination.
In the 90s, and much of the early 2000s, links looked like the kind you might see in Fogcam--a website that maintains the oldest operating webcam and an old school interface. Here the links are blue and underlined. When I click on one, it flashes red for the duration of the click event, and purple once I return to the page.
Linking behavior hasn't changed since Fogcam was created. Likely, if you clicked on Fogcam, you were taken to that site. Depending on your browser and the website you’re visiting, however, the look of those links has definitely changed.
The Style Debate
The default behavior of links is to appear blue when they’re unclicked, purple for previously clicked, and red for links in the process of being clicked. Regardless of having been clicked or not, the default link is underlined.
However, many websites choose to change this default behavior for a variety of reasons. For example, as of writing this, Dev.to does not underline in-text links and the links I click on do not turn purple or red.
Webfx and Usability.gov disagree on the necessity of underlined links. There’s a preponderance of alternatives to underlined links, from changing colors to on-hover events.
Opponents of the underline argue that underlines hurt user readability. Supporters attest that convention aids accessibility.
In some ways, the underlined link debate has become the Oxford Comma of the Internet age.
How Links Affect SEO
Regardless of your thoughts on underlining links, one relatively new feature of the link is the role it plays in SEO.
Backlinks , or the amount of links that link back to a site, is one way of boosting SEO. The key to getting backlinks? Write good content that people will want to link back to.
But good content by itself doesn’t necessarily mean that a user will link back to it, or see it. Promoting articles through social media channels, posting articles at the right time of day--when users are more likely to see them, and creating partnerships in your content space are all ways to increase backlinks.
Linking to credible and well-known websites and providing meaningful content between the <a> tags can also provide a boost to SEO.
Links and Security
However, perhaps the most explicit rule when it comes to adding links is the use of the rel tag and the "noreferrer noopener" targets.
Before I set out to build a portfolio website, someone recommended that that the links to my projects should open in new tabs. After all, I didn't want people being led down a rabbit hole of projects only to have a difficult time finding my portfolio site again.
The HTML attribute for opening a link in a new tab is target="_blank" on the <a> tag.
But using target="_blank" by itself is dangerous and can leave the window open for malicious activity.
In order to protect users, use rel="noreferrer noopener" when using linking through to a new tab.
Put together, the link would look like this:
<a href="https://linktomyproject.com" target="_blank" rel="noopener noreferrer"> My Project </a>
Using the rel tag won’t affect negatively SEO rankings either.
Summary
Links remain a vital part for many websites. SEO matters like never before, and links can negatively or positively affect rankings. Being intentional about what we link, where we link to, and how we link is an essential part of a coder's or writer's thought process.
Further Reading
About
rel=noopenerWhat problems does it solve? - Mathias BynensDesigning the Perfect Hyperlink — It’s Not as Simple as You Think. - WebFX
Everything You Need to Know About rel=”noopener noreferrer” Tags: Purpose, Benefits and SEO Impact - Clever Solution
Is the Underlined Link Hurting Readability? - UX Booth
Learn the Basics of Quality Link Building for SEO - Wordstream
Links Style Guidelines - Readability Guidelines
Should All Links be Underlined? - Usability.gov
Underlined Links - a11y 101
Top comments (0)