Basic HTML: The A Tag

The <a> tag is a very common piece of HTML. It allows you to link to other websites or within a website. There are quite a few things you can to with the <a> tag. It is synonymous with the term called hyperlinking.

Basic uses of the <a> tag

Linking within and to outside sites

<a href="http://yourlinkhere.com">Your Link Name Here</a>

Of course, you can also add a title for SEO

<a href="http://yourlinkhere.com" title="Your Link Name Here">Your Link Name Here</a>

Jumping from one part of the site to somewhere else on the page, also known as an anchor tag or anchor link. The most common uses are FAQs and clicking to go to the top of the page.

More uses of the <a> tag

You can use the <a> tag to specify the link as nofollow, author, and more.

Here is a list of them:

• alternate
• author
• bookmark
• help
• license
• next
• nofollow
• noreferrer
• prefetch
• prev
• search
• tag

In using any of these, it tells you how the link relates to the current page you are on.

Example:

<a href="http://yourlinkhere.com" rel="nofollow">You Link Name Here</a>

CSS Styling with the <a> tag

Depending on how you use the <a> tag, you can:

• Style its color
• Font size
• Font type
• Padding and Margin
• How much it indents
• If it is linked to an image as a background
• Text spacing
• Transform letters to all capital letters or lowercase
• It is has a different color or has an underline when you hover over it with your mouse

…and more.

Styling the <a> tag is not difficult. Here are a few scenarios.

Styling <a> for color:

This is a visual example of changing the link to black.

If you want to style the link color to be black –

a {
color: #000000;
}

The number is a hexagonal color, which allows your browser to translate the link to the exact color you desire.

Styling <a> for font size:

If you want your link’s font size to be 24 pixels, which is normally used for a mid-sized heading tag –

This is a Visual example of styling a link’s text to be 24 pixels tall.

a {
font-size: 24px;
}

Styling <a> for font type:

If you want your link to be the Arial font type –

a {
font-family: Arial, serif;
}

As a not, you see Arial and serif. In the case your visitor may not have Arial, it will fall back on the serif font. It is always a good idea to have a backup font in place. 😉

Styling <a> for padding and/or margin:

Paddings and margins give space to your element. Padding actually gives a area of space around your text space from other words or elements on your web page. Margin actually moves the image up, down, left, or right, and usually more for positions the text.

If you want your link to have a padding from the next link. In this example, I want 5 pixels padding on the top and bottom, and 10 pixels padding on the left and right.

Format for padding in this case if you want to write it out would be: top, left, right, bottom. It is also called: padding-top, padding-left, padding-right, and padding-bottom.

a {
padding: 5px 10px 10px 5px;
}

If you wanted your link to have a margin from the top of another element (example: a margin of 10 pixels), it would be:

a {
margin-top: 10px;
}

Same concept goes for margins on top, left, right, and bottom, but they are also written out as: margin-top, margin-left, margin-right, and margin-bottom.

Styling <a> for indenting your text:

If you want to put an indent on your text, much like in writing a book or story, you can use the following example:

Visual example of indenting text 20px.

a {
text-indent: 10px;
}

Styling <a> for an image:

You can indeed link to an image. This requires that you define the size of the image. You can do a lot more, especially if you are using an image as a background too. Both of these examples are below:

Example – just linking to an image

<a href="http://linktoyourpage.com"><img src="http://linktoyourpage.com/imagelink.jpg" alt="Name of your Image"></a>

Example – using an image as a background

The HTML – The HTML to your link would need a class element to describe it. That class would be used in your CSS.

<a href="http://linktoyourimage.com" class="button">Button</a>

The CSS

a.button {
display:block;
width: 150px; 
height:50px; 
background: url('path/to/image/here')no-repeat;
color: #ffffff; 
font-size: 20px; 
text-align: center; 
padding-top:15px;
}

Button

Styling <a> for text-spacing:

Visual example of text spacing

a {
text-spacing: 1px;
}

Styling <a> for making the text lowercase or uppercase:

Visual example of all uppercase lettering

a {
text-transform: uppercase;
}

Visual example of all lowercase lettering

a {
text-transform: lowercase;
}

Styling <a> for hovering:

If you want to give your text a hover effect, like a different color:

The regular color is black, but in hovering, the text turns red.

a {
color: #000000;
}

a:hover {
color: #c00000;
}

Styling <a> for underlining the link:

This is a visual example of how to style a link to be underlined.

a }
text-decoration:underline;
}

There is a lot more you can do with the <a> tag when it comes to styling, but this is merely a brief overhead of the basics.