#10 HTML Links

Website without links are impossible now a day. Links allows users to move to one page to another.

HTML Links - Hyperlinks

HTML links are hyperlinks. You can click on it to jump one web page to another. When you move the mouse over a link, the mouse arrow will turn into a little hand.

Not only text but you can also make button and image as a link. We will see.

HTML Links - Syntax

<a> anchor tag used to define hyperlink. See the following syntax.

<a href="url">link text</a>

Most important attribute of <a> tag is href. Which indicates the link’s destination.

link text is visible to the user to click on it. Clicking on the link text will send the reader to the specified URL address.

See the Pen link html by Arpit (@soniarpit) on CodePen.

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

You can use CSS to style links according to you

HTML Links - The target Attribute

By default linked page will open in current browser tab. To change this can specify target for the link

The target attribute specifies where to open the linked page or document.

  • _self - Default. Opens the document in the same window/tab as it was clicked
  • _blank - Opens the document in a new window or tab
  • _parent - Opens the document in the parent frame
  • _top - Opens the document in the full body of the window

Try this example in your system.

See the Pen link targets html by Arpit (@soniarpit) on CodePen.

Absolute URLs vs. Relative URLs

In the above examples, we used Absolute URLs means we specified the full URL in href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the “https://www” part)

See the Pen absolute and relative url by Arpit (@soniarpit) on CodePen.

It is very easy to make image as a link. Just put <img> tag inside <a> tag

See the Pen img link by Arpit (@soniarpit) on CodePen.

HTML <a> tag provides you the option to specify an email address to send an email. While using tag as an email tag, you will use mailto: email address along with href attribute. Following is the syntax of using mailto instead of using HTTP.

example, try it by your self, tell me in the comment what happens.

<a href = "mailto: [email protected]">Send Email</a>

You can specify a default email subject and email body along with your email address. Following is the example to use default subject and body.

<a href = "mailto:[email protected]?subject = Feedback&body = Message">
Send Feedback
</a>

See the example you can understand how to make the button as a link.

See the Pen button as link html by Arpit (@soniarpit) on CodePen.

In the first button we used little bit of javascript. And in second button we use button tag inside anchor tag.

The title attribute specifies extra information about an element.

The information is most often shown as a tooltip text when the mouse moves over the element.

Just hover over the link you will see the content which is describe in title attribute

See the Pen link title by Arpit (@soniarpit) on CodePen.

Bookmark link allows user to jump to specific section within a page. Bookmarks can be useful if a web page is very long.

We use `id` attribute to create bookmark link.

See the Pen bookmark link html by Arpit (@soniarpit) on CodePen.

More on Absolute URLs and Relative URLs

<!-- Use a full URL to link to a web page -->
<a href="https://www.codesnail.com/html-tutorial">HTML tutorial</a>

<!-- Link to a page located in the html folder on the current web site -->
<a href="/pages/about.html/">About</a>

<!-- Link to a page located in the same folder as the current page -->
<a href="home.html">Home</a>

Hope you like this tutorial. Happy coding :)

Previous: #9 HTML Phrase tags

Next: #11 HTML Images