< anchor >
Not a button. (Surprise!)
Without the anchor element, moving about the web would be an entirely different experience today. Often called the ‘link tag’ (which it is not), the anchor tag is the element that connects all our pages, documents, and sites together, making us one big, happy web family! Ha!
Since this series is all about refreshing our HTML knowledge, I am going to try diligently to call this, <a>, an anchor, and this, <link> a link element. They are completely different and serve completely different purposes in an HTML document.
If you have read the post about the button element, you will recognize this:
I am confident that everyone reading has seen a link styled as a button, and a button styled as a link. I hope someday, for the purposes of bringing recognizable meaning back to interface objects on a page, that links and buttons will once again have specific, different styles to help the user differentiate between the two.
Stylistically, anchor elements have been contorted into all kinds of colors, shapes and sizes. As this series is committed to using the native functionality, features, and visual cues that HTML affords us my strong suggestion is two simple things: do not make a link look like a button, and, use an underline to give the user a near foolproof visual cue what the text does.
What matters with any interface design, application build, or software created is that the user has an expectation of experience met consistently throughout that particular app/website/software. So if there are contexts within which styling an anchor element as a button can make visual sense, do so, but do it consistently and for good reason.
Mechanically, an anchor element is intended mainly for navigation, but can also aid in downloading files, writing an email, or giving access to anything available via the web.
Semantically, an anchor element can only have inline elements within its bounds. Please do not put a div inside an anchor.
It is important to understand though, that inline elements, such as span, are more than welcome inside an anchor element, and can be very handy at times, to target special items, or pieces of visual rendering that are optional during a component build.
To underline, or not underline? That’s a question for your designer, and is a great way to make them happy, if only for a day.
What must be considered for a11y purposes is the contrast of any state color of the anchor element’s text. So be diligent, and make sure that the colors chosen for unvisited (default), visited, and hover all pass color contrast tests.
Since color contrast does not solve for color blindness tests, then you might land back on the “should we underline or not underline” question, and you may make your designer sad when you tell them that one of the best ways to render a visual clue to the user that the text in question is, indeed, a navigation object that links to another place, the underline is your friend.
There are two useful link types available to use: tel and mailto.
The telephone link type works best on phone devices. Depending on your browser of choice and personal settings, telephone links can also work on laptops and desktops. But its main purpose is most beneficially experienced while using a phone. An example: <a href=“tel:312-773-0847”>calling chicago</a>
The email link works on any device, and will automatically open up a new email in your native email application with the “To:” address already populated with the value provided in the link. As this can be sometimes an abrupt and/or disruptive experience, contact forms are a quite valid alternate choice, along with all the benefits a contact form can provide - more specific feedback, validation, etc. An example: <a href="mailto:spam@spamspameggshamandspam.co.uk">send in an order</a>
Another aspect of the anchor element is the ability to define referrer policy. This policy helps with security, and can also help or hinder SEO analytics, depending on how they are used.
Anytime the anchor element is to be used to link to an external source, these three attributes are important to know and use, for reasons that involve security and SEO. All of these attributes are set using ‘rel’ in the anchor element declaration. An example: <a href="somewhere.com" rel="no opener noreferrer nofollow">go away</a>
Noopener prevents malicious attacks whenever a new browser window is opened, and should always be used whenever `target=“blank”` is in effect. Does not affect SEO.
Noreferrer is similar, but disallows the external source being linked to know the origin of the link. In other words, if you link to a site using ‘noreferrer’, they are not given the domain from which you linked to them. This will affect SEO analytics, so be aware of that.
Nofollow is for spiders/robots, and tells them to not continue and add the page linked to page ranking algorithms. This is highly useful for forums, comment sections, and is actually mandated by Google and others on any advertisement links.
All of these are pertinent when linking to external sources. Using them well can help greatly in providing your users with a consistent and enjoyable web experience.
Wrapping things up, what I learned most about comparing the button element with the anchor element is that <button> is meant for actions and <a> is meant mostly for navigation to internal and external material. The most consistent way to let your users know which is which is through consistent visual cues.
Reference:
- WHATWG
- the-anchor-element
- caniuse.com
- mdn-html_elements_a
- MDN Docs
- Web/HTML/Element/a