The <a> tag is used to insert hyperlinks to other pages, or files, locations within the same page, email addresses, or any different URL. You can use both text and image as a hyperlink.
In the browser, hyperlinks differ in their appearance and color. By default, HTML links appear as underlined blue text. When you hover your mouse over a link, it turns red (active link). Links that are already clicked (visited links) become purple.
You can change the color of links, remove underline or change the color of the links using CSS styles.
The “download”, “media”, “hreflang”, “target”, “rel”, and “type” attributes will be present only if the “href” attribute is present.
Until you define another target, a linked page is shown in the current browser window.
Tóm Tắt
Syntax
The <a> tag comes in pairs. The content is written between the opening (<a>) and closing (</a>) tags.
Attributes
The <a> tag can have attributes that provide additional information about it.
The
href
attribute
The href is a required attribute of the <a> tag. It defines a link on the web page or a place on the same web page, where the user navigates after having clicked on the link. The value of the attribute is either an anchor or a URL. The anchor points to the ID (unique identifier) of the part of the web page referenced. Before the ID we put a hash (#).
It looks like this:
<a href="url">the link text</a>
<a href="#a">the link text</a>Example of the HTML
<a>
tag with the
href
attribute:
<
html
>
<
head
>
<
title
>Title of the document</
title
>
</
head
>
<
body
>
<
a
href
="https://www.w3docs.com/"
>W3docs.com</
a
>
</
body
>
</
html
>Try it Yourself »
Result
W3docs.com
Click on the link, and you will be redirected to the home page of our website.
Using the href attribute of the <a> tag with the <img> tag you can make a linked image.
Example of the HTML
<a>
tag for creating a linked image:
<
html
>
<
head
>
<
title
>Title of the document</
title
>
<
style
>
img
{
height
: 90vh
;
}
</
style
>
</
head
>
<
body
>
<
a
href
="https://en.wikipedia.org/wiki/France"
>
<
img
src
="https://images.unsplash.com/photo-1549144511-f099e773c147?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
alt
="France"
>
</
a
>
</
body
>
</
html
>Try it Yourself »
The
target
attribute
The target attribute is used to tell the browser where to open the document (by default, links open in the current window).
The target attribute can have the following values:
- _blank– opens the link in a new window.
- _self-opens the link in a current window.
- _parent – opens the document in the parent frame.
- _top – opens the document in full width of the window.
Example of the HTML
<a>
tag with the
target
attribute:
<
html
>
<
head
>
<
title
>Title of the document</
title
>
</
head
>
<
body
>
<
a
href
="https://www.w3docs.com/"
target
="_blank"
>W3docs.com</
a
>
</
body
>
</
html
>Try it Yourself »
Result
W3docs.com
The
rel
attribute
This attribute sets the relationship of the current document to the linked one. The attribute values can be as follows:
- alternate – an alternative version of the document.
- author– reference to the author of the document or article.
- bookmark – a permanent link to be used for bookmarks.
- nofollow – links to an unendorsed document (this instructs the search engines that the crawler should not follow that link).
No follow value
If you want to create a nofollow link, use rel=”nofollow”. This informs search engines that you don’t support the content at the other end of the link. The nofollow attribute value is generally used on paid links and advertising. Sometimes the unfollow is considered to be a tag or attribute, but in fact, it’s a value of the rel attribute.
Example of the
rel
attribute with the “nofollow” value:
<
html
>
<
head
>
<
title
>Title of the document</
title
>
</
head
>
<
body
>
<
p
>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</
p
>
<
p
>This text is from <
a
href
="https://www.lipsum.com/"
rel
="nofollow"
target
="_blank"
>Lorem Ipsum</
a
>.</
p
>
</
body
>
</
html
>Try it Yourself »
Attributes
Attribute
Value
Description
charset
char_encoding
Defines the character-set of a linked document.
Not used in HTML5.
coords
coordinates
Defines the coordinates of a link.
Not used in HTML5.
download
filename
Defines that the target will be downloaded when a hyperlink is clicked.
href
URL
Defines the URL of the linked document.
hreflang
language_code
Defines the language of the linked document.
media
media_query
Defines what media/device the linked document is optimized for.
name
section_name
Defines the name of an anchor.
Not used in HTML5.
ping
list_of_URLs
Defines a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking.
rel
alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag
Defines the relationship between the target object and the linked document.
rev
text
Defines a reverse link, the inverse relationship of the “rel” attribute.
Not used in HTML5.
shape
default
rect
circle
poly
Defines the shape of the hyperlink.
Not used in HTML5.
target
_blank
_parent
_self
_top
Defines where to open the linked document.
type
media_type
Defines the media type in the form of a MIME- type for the linked URL.
The <a> tag also supports the Global Attributes and the Event Attributes.
