Constructing a link using HTML

So now we are going to learn how to construct a link using HTML

Above is the HTML structure of how a link is built using HTML and now I will explain each part in detail.

First we have the Tags, these are <a></a> Theses are the opening and closing tags that define the link code

You will notice that the first part of the code goes inside the first <a> Tag like this

<a href="http://www.w3schools.com"> so lets discuss this part of the code

The information between the tags is called the Elements, so information between the opening tag and the closing tags are the Elements of the code

Here is a table to explain the basic construction of elements

Quite often additional information is required to be added about the elements, this information is called an attribute

Introduction to attributes

Attribute = additional information about the element

Within the first <a> tag we see the letters (href=) this is known as an attribute and an attribute is used for any additional information that is needed to be added to the code. href means hyper text reference because it is denoting a web address and websites are created in hyper text so web address have the protocol HTTP which means Hyper Text Transfer Protocol

So lets take a look at some other attributes that are available in HTML

You can see (href) is used to specify a web address and also you can see an attribute that some of you may be familiar with called (alt) which is what we use when we want to give our images an alternative text and put our keywords in the image on our sites

Here is the part of the code.

<a href="http://www.w3schools.com">


In the next part of the code we see the URL and it is also enclosed in speech marks which gives it parameters which mean start and finish like speech marks in English which denote the opening and closing of a written speech quote

The URL is the one that the link is going to, in other words if you clicked this link it would take you to the specified URL in the code

Here is the second part of the code with the anchor text in it

<a href="http://www.w3schools.com">This is a link</a>


So now we have the next part of the link and that is called the anchor text and in this case you can see the words (This is a link) These words are called the anchor text and they are the words that you will see on the web page that will show up as a highlighted text which is clickable.

Put simply these are the words you actually click on, of course these words can be anything you like and then at the end we close the code with the </a> tag which is the closing tag for all links

So here is the construction of the link in steps

<a></a> = First the tags


<a href="http://www.w3schools.com"> = Then the elements and attributes go inside the first <a> tag


<a href="http://www.w3schools.com">This is a link</a> = Then the anchor text goes after the first tag then the closing </a> tag

Now the code for the link is complete

So now you know how a basic link is structured in HTML and what we will cover next is how to create links the easy way in Wordpress



Join the Discussion
Write something…
Recent messages
SowAndReap Premium Plus
Will ad to my fav and get back to it. Thanks for the HTML lessons.
Reply
atlanticus Premium
Thank you Barry, most helpful.
Reply
CarlaIves Premium
I missed the first two parts, Barry, so I am bookmarking this. It's something I desperately need. Thanks so much!
Reply
dynamite8 Premium
Thank you for posting, it is very helpful. I also appreciate you posting the links for 1, 2. Have a great day.
Reply
Incognito007 Premium
Great stuff Barry! :)

I didn't know about LSI, so I'm glad I went through your training.

All the best & Thanks for sharing such quality content.
Have a great day,
Tanguy
Reply
Top