Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

links
html
communitycreator

How to create links in HTML

Hammad Qayyum

What is HTML?

HTMLHyperText Markup Language is the standard markup language for web pages. With HTML, you can create your own website.

Links

Links on web pages allow users to navigate from one page to another.
In HTML, the < a > tag is used for hyperlinks. The syntax is given below:

Syntax

<a href="link">text on the link</a>

In the href attribute, we provide the website link to which a user will be navigated when they click on the text inside the tag in a website.

Example

An example of hyperlinks using the < a > tag is given below:

<a href="https://www.educative.io/">Visit Educative Website</a>

Display of links

In all browsers, links are displayed in the following ways:

  • The link is underlined and blue if it is unvisited.
  • The link is underlined and purple if it is visited.
  • The link is underlined and red if it is active.

Attributes in HTML links

We will now discuss some of the attributes used in the link tag in HTML.

The target attribute

Using the target attribute, we can change where the clicked link opens. By default, it is opened in the current browser window. The target attribute can have the following values:

  • _self: Opens the document in the same window.
  • _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.
<a href="https://www.educative.io/" target="_blank">Visit Educative Website</a>

The title attribute

The title attribute in the link tag in HTML is used to specify extra information about an element, if any. The information is mostly displayed when the mouse hovers over the element. The code is displayed below:

<a href="https://www.educative.io/" title="Go to W3Schools HTML section">Visit Educative Website</a>

Using an image as a link

We can use the following code to display a link on an image:

<a href="url">
<img src="image_source" alt="" style="width:42px;height:42px;">
</a>

Link to email address

We can also send emails to an address by clicking on a link on a website. The code is given below:

<a href="mailto:example@example.com">Send an email</a>

Absolute URLs vs. relative URLs

Absolute links are full web addresses in href attributes.

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

Following is the code:

<h2>Absolute URLs</h2>
<p><a href="https://www.example.org/"></a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML</a></p>
<p><a href="/css/default.asp">CSS</a></p>

RELATED TAGS

links
html
communitycreator
RELATED COURSES

View all Courses

Keep Exploring