HTML Terminology & Links

Links are used on almost every website and are also fairly easy to understand, so they are a good place to begin learning HTML.

Before I dive into explaining HTML links, here is some basic HTML terminology that I will be using:

TAG
HTML is based on tags. A tag is surrounded by less than and greater than symbols. The name of the tag is actually an HTML command that does something specific.

ATTRIBUTE
An attribute is found inside of a tag and provides additional information/variables for the tag command. Each attribute should be separated from other attributes and/or the tag name by a space. The name of the attribute is followed by an equal sign and then the value of the attribute is surrounded by quotes. Single or double quotes are both fine to use, but you should make a habit of using one or the other (I typically do double quotes for HTML and single quotes for other coding, like PHP).

CLOSING TAG
Some (but not all) HTML tags require closing tags - the others are self-closing. A closing tag looks exactly like the opening tag, except that there is a forward slash in front of the tag name.

HTML Link Basics
Now I can show you a real HTML link example to demonstrate that terminology. Here is a full HTML link, which I will explain in more detail below:

<a href="http://ryanstevensonplugins.com/" target="_blank">Ryan Stevenson Plugins</a>

This line of HTML code begins with a less than symbol: <

The tag name for an HTML link is: A

You can see a lower-case a after the less than symbol - this is the tag name for the link. It is OK to use either lower-case or upper-case for your tag names and tag attributes.

After the tag name is a space and then a tag attribute, href.

This attribute name is followed by an equal sign: =

Next, you can see double quotes surrounding the website address: http://ryanstevensonplugins.com/

That website address URL is where the visitor will be taken when they click the link.

Next is another space followed by another tag attribute: target.

Just like the href attribute, this attribute is followed by an equal sign with the value surrounded by double quotes.

The target attribute tells how to open the link URL in the visitor's browser. If you do not specify the target attribute for an HTML link tag, _self is the default value used. I have used _blank as my value for this example, but here are all of the accepted values of the target attribute:

After the closing double quote for the target attribute value, there is a greater than symbol to end the opening link tag: >

Next, you will see some text: Ryan Stevenson Plugins

That text is the anchor text used for the link, which is the text that is turned into a clickable link when viewed on a website. I just used simple text for this example, but you can actually use complicated text and even additional HTML coding inside of the link if needed. As a practical example, you could also have an image HTML tag here.

Finally, to end the link, you need a closing tag. This closing tag specifies the ending of the link anchor text. It is nothing more than the tag name with a forward slash in front of it and then all of that surrounded by less than a greater than symbols: </a>