The The most important attribute of the By default, links will appear as follows in all browsers:
|
<a href="https://horje.com">Visit Horje.com!</a>
Attribute | Value | Description |
---|---|---|
download | filename | Specifies that the target will be downloaded when a user clicks on the hyperlink |
href | URL | Specifies the URL of the page the link goes to |
hreflang | language_code | Specifies the language of the linked document |
media | media_query | Specifies what media/device the linked document is optimized for |
ping | list_of_URLs | Specifies 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. |
referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
Specifies which referrer information to send with the link |
rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
Specifies the relationship between the current document and the linked document |
target | _blank _parent _self _top |
Specifies where to open the linked document |
type | media_type | Specifies the media type of the linked document |
Example:
HTML
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">
</a>
<a href="https://horje.com" target="_blank">Visit Horje.com!</a>
Example:
HTML
<a href="mailto:[email protected]">Send email</a>
Example:
HTML
<a href="#section2">Go to Section 2</a>
<h2 id="section2">Section 2</h2>
Example:
HTML
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>
Download file when clicking on the link (instead of navigating to the file):
The download
attribute specifies that the target (the file specified in the href
attribute) will be downloaded when a user clicks on the hyperlink.
The optional value of the download
attribute will be the new name of the file after it is downloaded. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).
If the value is omitted, the original filename is used.
The numbers in the table specify the first browser version that fully supports the attribute.
<a download="filename">
Value | Description |
---|---|
filename | Optional. Specifies the new filename for the downloaded file |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The a download attribute</h1>
<p>Click on the image to download it:<p>
<a href="https://horje.com/avatar.png" download>
<img src="https://horje.com/avatar.png" alt="Horje" width="104" height="142">
</a>
<p><b>Note:</b> The download attribute is not supported in IE or Edge (prior version 18), or in Safari (prior version 10.1).</p>
</body>
</html>
The href attribute specifies the link's destination:
The href
attribute specifies the URL of the page the link goes to.
If the href
attribute is not present, the <a>
tag will not be a hyperlink.
Tip: You can use href="#top"
or href="#"
to link to the top of the current page!
<a href="URL">
Value | Description |
---|---|
URL | The URL of the link.
Possible values:
|
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The a href attribute</h1>
<p>An absolute URL: <a href="https://horje.com/">Horje</a></p>
<p>A relative URL: <a href="tag_a.asp">The a tag</a></p>
</body>
</html>
The hreflang attribute specifies the language of the document in the link:
The hreflang
attribute specifies the language of the linked document.
This attribute is only used if the href
attribute is set.
Note: This attribute is purely advisory.
<a hreflang="language_code">
Value | Description |
---|---|
language_code | A two-letter language code that specifies the language of the linked document. To view all available language codes, go to our Language code reference. |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The a hreflang attribute</h1>
<p><a hreflang="en" href="https://horje.com">Horje.com</a></p>
</body>
</html>
A link with a media attribute.
The media
attribute specifies what media or device the linked document is optimized for.
This attribute is used to specify that the target URL is designed for special devices (like iPhone), speech or print media.
This attribute can accept several values.
Only used if the href
attribute is present.
Note: This attribute is purely advisory.
<a media="value">
Value | Description |
---|---|
and | Specifies an AND operator |
not | Specifies a NOT operator |
, | Specifies an OR operator |
Value | Description |
---|---|
all | Default. Suitable for all devices |
aural | Speech synthesizers |
braille | Braille feedback devices |
handheld | Handheld devices (small screen, limited bandwidth) |
projection | Projectors |
Print preview mode/printed pages | |
screen | Computer screens |
tty | Teletypes and similar media using a fixed-pitch character grid |
tv | Television type devices (low resolution, limited scroll ability) |
Value | Description |
---|---|
width | Specifies the width of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (min-width:500px)" |
height | Specifies the height of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (max-height:700px)" |
device-width | Specifies the width of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (device-width:500px)" |
device-height | Specifies the height of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (device-height:500px)" |
orientation | Specifies the orientation of the target display/paper. Possible values: "portrait" or "landscape" Example: media="all and (orientation: landscape)" |
aspect-ratio | Specifies the width/height ratio of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)" |
device-aspect-ratio | Specifies the device-width/device-height ratio of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)" |
color | Specifies the bits per color of target display. "min-" and "max-" prefixes can be used. Example: media="screen and (color:3)" |
color-index | Specifies the number of colors the target display can handle. "min-" and "max-" prefixes can be used. Example: media="screen and (min-color-index:256)" |
monochrome | Specifies the bits per pixel in a monochrome frame buffer. "min-" and "max-" prefixes can be used. Example: media="screen and (monochrome:2)" |
resolution | Specifies the pixel density (dpi or dpcm) of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="print and (resolution:300dpi)" |
scan | Specifies scanning method of a tv display. Possible values are "progressive" and "interlace". Example: media="tv and (scan:interlace)" |
grid | Specifies if the output device is grid or bitmap. Possible values are "1" for grid, and "0" otherwise. Example: media="handheld and (grid:1)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The a media attribute</h1>
<p>
<a href="https://horje.com/" media="print and (resolution:300dpi)">Open media attribute page for print</a>
</p>
</body>
</html>
Specifies the height of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (max-height:700px)"
Example:
HTML
<a href="att_a_media.asp?output=print"
media="screen and (max-height:700px)">
Open media attribute page for print.</a>
Specifies the width of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (device-width:500px)"
Example:
HTML
<a href="att_a_media.asp?output=print"
media="screen and (device-width:500px)">
Open media attribute page for print.</a>
Specifies the width of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-width:500px)"
<a href="att_a_media.asp?output=print"
media="print and (resolution:300dpi)">
Open media attribute page for print.</a>
Specifies the height of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (device-height:500px)"
Example:
HTML
<a href="att_a_media.asp?output=print"
media="screen and (device-height:500px)">
Open media attribute page for print.</a>
Specifies the orientation of the target display/paper.
Possible values: "portrait" or "landscape"
Example: media="all and (orientation: landscape)"
Example:
HTML
<a href="att_a_media.asp?output=print"
media="all and (orientation: landscape)">
Open media attribute page for print.</a>
Specifies the width/height ratio of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (aspect-ratio:16/9)"
Example:
HTML
<a href="att_a_media.asp?output=print"
media="screen and (aspect-ratio:16/9)">
Open media attribute page for print.</a>
Specifies the device-width/device-height ratio of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (aspect-ratio:16/9)"
Example:
HTML
<a href="att_a_media.asp?output=print"
media="screen and (aspect-ratio:16/9)">
Open media attribute page for print.</a>
Specifies the bits per color of target display.
"min-" and "max-" prefixes can be used.
Example: media="screen and (color:3)"
Example:
HTML
<a href="att_a_media.asp?output=print"
media="screen and (color:3)">
Open media attribute page for print.</a>
Specifies the number of colors the target display can handle.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-color-index:256)"
Example:
HTML
<a href="https://horje.com/view/1367/how-to-add-html-a-media-aspect-ratio-attribute"
media="screen and (min-color-index:256)">
Open media attribute page for print.</a>
Specifies the bits per pixel in a monochrome frame buffer.
"min-" and "max-" prefixes can be used.
Example: media="screen and (monochrome:2)"
Example:
HTML
<a href="https://horje.com/view/1367/how-to-add-html-a-media-aspect-ratio-attribute"
media="screen and (monochrome:2)">
Open media attribute page for print.</a>
Specifies the pixel density (dpi or dpcm) of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="print and (resolution:300dpi)"
Example:
HTML
<a href="att_a_media.asp?output=print"
media="print and (resolution:300dpi)">
Open media attribute page for print.</a>
Specifies scanning method of a tv display.
Possible values are "progressive" and "interlace".
Example: media="tv and (scan:interlace)"
Example:
HTML
<a href="att_a_media.asp?output=print"
media="tv and (scan:interlace)">
Open media attribute page for print.</a>
Specifies if the output device is grid or bitmap.
Possible values are "1" for grid, and "0" otherwise.
Example: media="handheld and (grid:1)"
Example:
HTML
<a href="att_a_media.asp?output=print"
media="handheld and (grid:1)">
Open media attribute page for print.</a>
Notify https://horje.com, when a user clicks on the link.
The ping
attribute specifies a list of URLs to be notified if the user follows the hyperlink.
When the user clicks on the hyperlink, the ping
attribute will send a short HTTP POST request to the specified URL.
This attribute is useful for monitoring/tracking.
The numbers in the table specify the first browser version that fully supports the attribute.
<a ping="URL">
Value | Description |
---|---|
URL | Specifies the URL to be notified if the user follows the hyperlink. Must be a space separated list of one or more valid URLs |
Example:
HTML
<a href="https://horje.com/" ping="https://horje.com/">
Set the referrerpolicy for a link.
The referrerpolicy
attribute specifies which referrer information to send when the user clicks on the hyperlin
The numbers in the table specify the first browser version that fully supports the attribute.
<a referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|same-origin|strict-origin-when-cross-origin|unsafe-url">
Value | Description |
---|---|
no-referrer | No referrer information is sent |
no-referrer-when-downgrade | Default. Sends the origin, path, and query string if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP is not ok) |
origin | Sends the origin (scheme, host, and port) of the document |
origin-when-cross-origin | Sends the origin of the document for cross-origin request. Sends the origin, path, and query string for same-origin request |
same-origin | Sends a referrer for same-origin request. Sends no referrer for cross-origin request |
strict-origin-when-cross-origin | Sends the origin if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, and HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP) |
unsafe-url | Sends the origin, path, and query string (regardless of security). Use this value carefully! |
Example:
HTML
<a href="https://horje.com/" referrerpolicy="origin">WWE</a>
no-referrer | No referrer information is sent |
Example:
HTML
<a href="https://horje.com/" referrerpolicy="no-referrer">Open A Link</a>
Default. Sends the origin, path, and query string if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP is not ok)
Example:
HTML
<a href="https://horje.com/" referrerpolicy="no-referrer-when-downgrade">Open a Link</a>
Sends the origin (scheme, host, and port) of the document
Example:
HTML
<a href="https://horje.com/" referrerpolicy="origin">Open a Link</a>
Sends the origin of the document for cross-origin request. Sends the origin, path, and query string for same-origin request.
Example:
HTML
<a href="https://horje.com/" referrerpolicy="origin-when-cross-origin">Open a Link</a>
Sends a referrer for same-origin request. Sends no referrer for cross-origin request.
Example:
HTML
<a href="https://horje.com/" referrerpolicy="same-origin">Open a Link</a>
Sends the origin if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, and HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP).
Example:
HTML
<a href="https://horje.com/" referrerpolicy="strict-origin-when-cross-origin">Open a Link</a>
Sends the origin, path, and query string (regardless of security). Use this value carefully!
Example:
HTML
<a href="https://horje.com/" referrerpolicy="unsafe-url">Open a Link</a>
A link with a rel attribute.
The rel
attribute specifies the relationship between the current document and the linked document.
Only used if the href
attribute is present.
Tip: Search engines can use this attribute to get more information about a link!
<a rel="value">
Value | Description |
---|---|
alternate | Provides a link to an alternate representation of the document (i.e. print page, translated or mirror) |
author | Provides a link to the author of the document |
bookmark | Permanent URL used for bookmarking |
external | Indicates that the referenced document is not part of the same site as the current document |
help | Provides a link to a help document |
license | Provides a link to licensing information for the document |
next | Provides a link to the next document in the series |
nofollow | Links to an unendorsed document, like a paid link. ("nofollow" is used by Google, to specify that the Google search spider should not follow that link) |
noopener | Requires that any browsing context created by following the hyperlink must not have an opener browsing context |
noreferrer | Makes the referrer unknown. No referer header will be included when the user clicks the hyperlink |
prev | The previous document in a selection |
search | Links to a search tool for the document |
tag | A tag (keyword) for the current document |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The a rel attribute</h1>
<p><a rel="nofollow" href="https://horje.com/">Horje.com</a></p>
</body>
</html>
Provides a link to an alternate representation of the document (i.e. print page, translated or mirror).
Example:
HTML
<a rel="alternate" href="https://horje.com">Horje.com</a>
Provides a link to the author of the document.
Example:
HTML
<a rel="author" href="https://horje.com">Horje.com</a>
Permanent URL used for bookmarking.
Example:
HTML
<a rel="bookmark" href="https://horje.com">Horje.com</a>
Indicates that the referenced document is not part of the same site as the current document.
Example:
HTML
<a rel="external" href="https://horje.com">Horje.com</a>
Provides a link to a help document.
Example:
HTML
<a rel="help" href="https://horje.com">Horje.com</a>
Provides a link to licensing information for the document.
Example:
HTML
<a rel="license" href="https://horje.com/">Horje.com</a>
Provides a link to the next document in the series.
Example:
HTML
<a rel="next" href="https://horje.com/">Horje.com</a>
Links to an unendorsed document, like a paid link.
("nofollow" is used by Google, to specify that the Google search spider should not follow that link)
Example:
HTML
<a rel="nofollow" href="https://horje.com/">Horje.com</a>
Requires that any browsing context created by following the hyperlink must not have an opener browsing context.
Example:
HTML
<a rel="noopener" href="https://horje.com/">Horje.com</a>
Makes the referrer unknown. No referer header will be included when the user clicks the hyperlink.
Example:
HTML
<a rel="noreferrer" href="https://horje.com/">Horje.com</a>
The previous document in a selection.
Example:
HTML
<a rel="prev" href="https://horje.com/">Horje.com</a>
Links to a search tool for the document.
Example:
HTML
<a rel="search" href="https://horje.com/">Horje.com</a>
A tag (keyword) for the current document.
Example:
HTML
<a rel="tag" href="https://horje.com/">Horje.com</a>
The target attribute specifies where to open the linked document.
The target
attribute specifies where to open the linked document.
<a target="_blank|_self|_parent|_top|framename">
Value | Description |
---|---|
_blank | Opens the linked document in a new window or tab |
_self | Opens the linked document in the same frame as it was clicked (this is default) |
_parent | Opens the linked document in the parent frame |
_top | Opens the linked document in the full body of the window |
framename | Opens the linked document in the named iframe |
<!DOCTYPE html>
<html>
<body>
<h1>The a target attribute</h1>
<p>Open link in a new window or tab: <a href="https://horje.com" target="_blank">Visit Horje!</a></p>
</body>
</html>
Opens the linked document in a new window or tab.
Example:
HTML
<a href="https://horje.com" target="_blank">Visit Horje!</a>
Opens the linked document in the same frame as it was clicked (this is default).
Example:
HTML
<a href="https://horje.com" target="_self">Visit Horje!</a>
Opens the linked document in the parent frame.
Example:
HTML
<a href="https://horje.com" target="_parent">Visit Horje!</a>
Opens the linked document in the full body of the window.
Example:
HTML
<a href="https://horje.com" target="_top">Visit Horje!</a>
Opens the linked document in the named iframe.
Example:
HTML
<a href="https://horje.com" target="framename">Visit Horje!</a>
The type attribute specifies the media type of the linked document:.
The type
attribute specifies the Internet media type (formerly known as MIME type) of the linked document.
This attribute is only used if the href
attribute is set.
Note: This attribute is purely advisory.
<a type="media_type">
Value | Description |
---|---|
media_type | The Internet media type of the linked document. Look at IANA Media Types for a complete list of standard media types. |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The a type attribute</h1>
<p>
<a href="https://horje.com" type="text/html">Horje.com</a>
</p>
</body>
</html>
Read Full: | HTML Tag |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 9 months ago |
Uploaded by: | Admin |
Views: | 9 |
Ref on: | View |