HTML5 Website Coupons

Anchor tags are arguably the most important HTML element, because linking is what makes the internet work. Without links, the internet would just be a giant collection of documents with no way to navigate or connect them in a meaningful way. Can you imagine if you had to actually type out the URL of every page you wanted to visit? You wouldn’t be able to send your friends links to funny memes, or browse a collection while online shopping. Today we will cover some of the basics of the almighty anchor or A tag, and we also have a great offer from Codecademy for you as well.

Exclusive Codecademy discount codes

If you really want to go deep into learning HTML and other languages as well as get certified then I can’t recommend Codecademy enough. You can sign up for a Pro level subscription for less by using Codecademy discount codes, or there are several basic courses available for free. If you aren’t familiar, Codecademy is an online learning platform that teaches markup & coding languages like HTML, PHP, Javascript, jQuery, SQL, Python, Ruby, C++, and more. You can also choose specialized programs such as Web Development, Data Science, Machine Learning, Game Development, and others that will teach you all of the languages you will need to know as well as how to use them together. Their interface is intuitive and easy to use, and there is a split screen code editor/preview window so you can see how changes you make to your code affect it live. I found it very useful when I was learning.

Link to external pages with anchor elements

This is probably the most common use of an anchor tag, and it’s pretty straight forward. There is technically only one attribute you need to use which is the ‘href’ attribute, although it’s a good idea to use more. Here it is in it’s most basic form:

<a href="http://www.example.com/example-page">This is where your anchor text goes</a>

Nothing fancy there, just a link and some text. By the way, you can put links around pretty much any HTML element, not just plain text. Images and headers are also commonly surrounded with an anchor tag to create a link. There are actually quite a few attributes you can include in an anchor tag, but here are the most common:

• href – used to specify what will be linked to, can be an extrernal link or an internal link or anchor which we will cover below
• target – used to specify where the link should open, most common value is ‘_blank’ to open in a new tab or window, if you want to use the same tab or window just omit this attribute from your anchor tag
• rel – short for ‘relationship’, the most common value you will see in this is ‘nofollow’. This means that the Google spider should not follow the link and use it to evaluate your website. You might use this if you want to link to an external page but not endorse it and have it’s quality potentially negatively impact yours. If you are interested in all the possible values for the rel attribute please check out the W3 Schools page on it

So to dress up our example from above a little, a fairly basic anchor tag linking to an external page might look something like:

<a href="http://www.example.com/example-page" target="_blank" rel="nofollow">This is where your anchor text goes</a>

Link to internal pages with anchor elements

The process for linking to an internal page is almost exactly the same as an external page. The main difference is that you can drop the domain name (although you don’t have to), and just link to the page itself. That might look like this:

<a href="/example-page">This is where your anchor text goes</a>

Because you will likely want the page to open in the same window and want the Google spider to crawl the page you are linking to you will leave out the target and rel attributes.

To create a link to an internal anchor on the same page, you use the id attribute

Let’s say you have a particularly long page, and you want to put a table of contents up at the top so that people can jump down to the relevant section for them. To accomplish this you will still use an anchor tag, and instead of a page you will link it to another anchor further down the page. You assign each anchor its own anchor name, using the id attribute. Usually you put this on a header tag, but it could be anything. Remember that id tags are always unique, they should be the only element on that page with that exact id. This is different from the class attribute which can be applied to many elements on a page.

An internal anchor linking to an id further down the page might look something like this:

<a href="#jump-to">This is where your anchor text goes</a>

<p>Some other content</p>

<ul>
<li>Some more content</li>
<li>Some more content</li>
</ul>

<h3 id="jump-to">The content you want to link to</h3>

Again because you would likely want to keep the user on the same tab or window you will omit the target attribute. Please note that you need to include the hash symbol or ‘#’ in front of the id name in the anchor tag, just like in your stylesheet as this is what identifies it as an id.

And that’s a very basic overview of the anchor tag!