Learn to link webpages via the anchor <a> element

HTML Cheatsheet

• Download HTML Cheatsheet (PDF)
• Star HTML Cheatsheet on Github
• Share HTML/CSS Cheatsheet Link: https://ilovecoding.org/blog/htmlcss-cheatsheet

CSS Cheatsheet

• Download CSS Cheatsheet (PDF)
• Star CSS Cheatsheet on Github
• Share HTML/CSS Cheatsheet Link: https://ilovecoding.org/blog/htmlcss-cheatsheet

Video Lesson Transcript

All right, now we are going to learn about a new element, called <a> element or anchor element. This is used basically to link one page to another, so let's do that.

The <a> Anchor Element

So over here I am going to simply remove a lot of the previous code we did, so our page is simple. It's easier for us to read the code.

I am going to simply create an <a> element, and inside I am going to put some text as children. For the text I am gonna to say "Click me please".

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      This is my first page
    </title>
  </head>
  <body>
    <h1>Hi My name is Aziz</h1>
    <a href="">Click me please</a>
  </body>
</html>

Now you notice that when I created this element, VS Code automatically pre-populated this particular attribute called href.

Now basically what happens is that whenever some user clicks on this particular text, this page is going to go to whatever is mentioned in the href attribute.

So let's say if you want to go to Google.com, you are going to simply put "https://www.google.com" as a value of the href attributre like such:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      This is my first page
    </title>
  </head>
  <body>
    <h1>Hi My name is Aziz</h1>
    <a href="https://www.google.com">Click me please</a>
  </body>
</html>

Save, refresh, and you see that the link is over here.

Now if I hover over the text, I will see on my footer that it says the link, which is google.com. When you click the link, you will see the loading sign, and now it goes to google.com.

Simple as that.

The target Attribute

Now this element has multiple options; let's say if I want to open this particular URL a new tab or a new window, not the same page. There is an option for that, which is called target.

So I do target="", and the value you want to provide is _blank, like such:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      This is my first page
    </title>
  </head>
  <body>
    <h1>Hi My name is Aziz</h1>
    <a target="_blank" href="https://www.google.com">Click me please</a>
  </body>
</html>

Now when you do that you refresh, and when you click the link you will see that it opens in a new tab.

This is very handy. Let's say if you have a web site, and you want to link to external pages for example Google.

So let's say you are on your home page which is your personal web site, and you want to link to an external page; that is when this thing comes handy, and you do not want people to leave your web site.

This is actually not a good practice to make all these links like that, but it's an option you have.

Internal Links

Now one more thing that I want to tell you, is that you cannot just link from the element to external pages, but it can also be internal pages of your web site.

So let's say I am going to create a new page inside our web site. I am going to just simply create an about page. I am going to simply write some basic HTML.

I am going to basically just copy the previous code from (index.html) and paste it in our about page. The title is going to be "about", and I am going to put an <h1> with the text "this is my about page".

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      About
    </title>
  </head>
  <body>
    <h1>This is my about page</h1>
  </body>
</html>

And now if I want to link from the home page to the about one, I can simply create another link.

I am going to mention the name of that location where this particular page lives. So since this page called about and it's in the same directory as the index page, I can simply put in about.html, and for the text I can say "Go to about".

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      About
    </title>
  </head>
  <body>
    <h1>This is my about page</h1>

    <a href="about.html">Go to about</a>
  </body>
</html>

Save, refresh, and now you see that link is over here.

Now, if I click this link it'll go to the About page, and from the About page we need to go back to the Home page.

So I am going to create a link that directs to "index.html", and for the text I am going to say "Go to home".

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      About
    </title>
  </head>
  <body>
    <h1>This is my about page</h1>
    <a href="index.html">Go to home</a> 
  </body>
</html>

Save, refresh, and now "Go to home" goes over here:

So that's pretty much it for this video about linking via the <a> element, and now in the next video I am going to tell you a little bit more about this href linking strategy.

All right, I am going to talk to you in the next video.