The HTML anchor tag – or more correctly stated, the HTML anchor element – has been around since just about the dawn of time. Well… actually it’s only been around since the dawn of HTML, but it feels like forever to me since I’ve been coding web pages for so long. If you are super into HTML, this article on W3.org about the history of html is worth a read, even though it’s aging a bit (like the rest of us).
Anyway, about the html anchor element:
This element is pretty much the backbone of HTML, and consequently of much of the internet itself. Therefore, it’s important to master this element early on when you’re first learning how to code in HTML.
Anchor tags are used to link from one thing to another within a webpage, email, app, etc. The name “anchor” describes it’s function: what we’re doing here is creating an anchor from a source to another destination anchor – creating a way to link or anchor two things together. This anchor can be added to buttons, text, icons and images, files, email addresses, videos and more.
<a href=”somelink.html”>text here that people will click on</a>
The “a” in “<a>” stands for “anchor” of course, and the “href” piece of it stands for “hypertext reference”. The hypertext reference is the url you stick in-between the quotes after ‘a href=’.
Speaking of <a> tags… this brings back to mind the early days of html and the internet when most HTML tags were coded in capital letters. This type of thing was all over the place:
<H2>Heading Goes Here</H2>
<P>Here is an article about <A href="../mylink-here.html">text here that people will click on</A>.</P>
<BR>
<BR>
One annoying thing about those days is, web developers would sometimes code part of their HTML in capital letters and other parts in lowercase letters. The code still worked but visually it tended to look messy.
Then gradually that was phased out, and it is now a standard and a best practice to code HTML almost entirely using lowercase letters.
You can choose to wrap your anchor tags around just a single word or you could wrap them around an entire paragraph if you like. But (again with the best practices) it looks quite ugly on the front-end (in the browser) when this is done, so I wouldn’t recommend it!
Instead, it is best to link a short blurb or sentence or a few important words that really give the user an idea of what is behind the link they’re about to click on. That reduces user frustration and helps people to find the information they’re looking for as efficiently as possible.
Different things that anchor tags/links can do:
Remember the “href” that I mentioned above? That is called an html attribute. Attributes are awesome and incredibly useful and I love them! (I’m a little weird… )
For further info, W3schools has a handy-dandy list of attributes and which html elements they can be used with.
Attributes that go with the anchor tag include the following:
- “href” tells the code where to link to.
- “target” tells the link how/where to open; within the same window or if it should open a new window.*
- “type” tells the link what type of of element it is.
- “hreflang” indicates what language the web page or document is, that you’re linking to.
- “rel” gives more information about the destination link and/or gives the browser instructions on how to treat the link. Ex: by using rel=”nofollow” you’re telling search engines not to crawl the destination link and that you do not necessarily endorse it or trust it.
*To open a hyperlink in a new window use the target attribute along with “_blank”, like this:
<a href=”somelink.html” target=”_blank”>text here that people will click on</a>.
This is a very common method of hyperlinking nowadays (open things in new tabs/windows). I personally don’t like it when I’m clicking around some website and I end up with 15 different windows open, and believe that target=”_bank” shouldn’t be used as a general rule.
There’s also “_self”, which just opens the link inside the same browser window, and is not so commonly used. Browsers open links in the same window by default – as opposed to creating a new tab or window, so I’m not sure how useful this attribute is.
Different ways of linking using the anchor tag include the following:
- Linking text: <a href=”somelink.html”>text here that people will click on</a>
- Linking an image: <a href=”somelink.html”><img src=”my-image.jpg” alt=”alt tag here” style=”width:50px; height:50px;”></a>
- Linking to an email address: <a href=”mailto:codedragondd@gmail.com” target=”_blank”>Contact us at Code Dragon!</a>
- Linking a button: <a href=”somelink.html”><button>click this button</button></a>
Example:
One more incredibly useful thing you can do with html anchor tags is use them to create a link that will jump to a specific part of a webpage. If you are learning how to code in HTML, I wish you good luck- and try to stick with it – when you do learn it, you’ll be happy you did!
