We can create hyperlinks using the anchor tag.
What is a Hyperlink?
A hyperlink is a link between web pages and it is used to connect one web page to another.
Ex:- <a href=”https://www.google.com”>Visit Google </a>
Anchor Tag Attributes
| Attribute | Value | Description |
| href | URL reference | Specifies the URL as a destination web page or a different section of the web page |
| download | filename | Specifies that the target will be downloaded when a user clicks on the hyperlink |
| media | media_query | Specifies what media/device the linked document is optimized for |
| hreflang | language_code | Specifies the language of the linked document |
| type | media_type | Specifies the media type of the linked document |
Anchor Tag Attributes
| Attribute | Value | Description |
| target | _blank _parent _top framename _self | Opens the linked document in a new window or tab Opens the linked document in the parent frame Opens the linked document in the full body of the window Opens the linked document in a named frame Opens the linked document in the same frame as it was clicked (this is the default) |
Ex:- <a href=”https://www.google.com”target=”_blank”>Visit Google </a>
Anchor Tag Attributes
href Attribute
Syntax: – <a href=“URL”>
- An absolute URL – points to another web site. Ex: – href=”http://www.google.com”
- A relative URL – points to a file within a web site. Ex:- href=“page1.html”
- Link to an element with a specified id within the page. Ex: – href=”#bottom”
- Other protocols. Ex:- https://, ftp://, mailto:, file:, etc..
- A script. Ex:- href=‘javascript:alert(“Hello”);’
Download Attribute
The download attribute specifies that the target will be downloaded when a user clicks on the hyperlink.
Ex:- <a href=”image/example.jpg”download=”nature”>
Media Attribute
The media attribute specifies what media/device the linked document is optimized for.
This attribute is used to specify that the target URL is designed for special devices (like iPhone and Android etc), speech, or print media.
| 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)” |
| Value | Description |
| 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 the 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)” |
| Value | Description |
| 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 the grid, and “0” otherwise. Example: media=”handheld and (grid:1)” |
| 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) |
- And
- Not
- ,(OR)
Ex:- media=”print and (resolution:300dpi)”>
hreflang Attribute
Type Attribute
http://www.iana.org/assignments/media-types/media-types.xhtml
rel Attribute
| Value | Description |
| alternate | Links to an alternate version of the document (i.e. print page, translated or mirror) |
| author | Links to the author of the document |
| bookmark | Permanent URL used for bookmarking |
| help | Links to a help document |
| license | Links to copyright information for the document |
| next | The next document in a selection |
| 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) |
| noreferrer | Specifies that the browser should not send a HTTP referer header if the user follows the hyperlink |
| prefetch | Specifies that the target document should be cached |
| prev | The previous document in a selection |
| search | Links to a search tool for the document |
| tag | A tag (keyword) for the current document |
Link Color
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
link – specifies the color of the hyperlink that has not been visited or clicked
before on a webpage
vlink – specifies the color of hyperlink that has been visited before on a web page
alink – specifies the color of currently active links