HTML5 area Tag - HTML5 area Element
HTML5 a ( <a> ) Tag or Element
HTML5 area Element
HTML5 area Tag
The HTML5 area tag defines a specific area within an image map. In other words a clickable area on image which is defined with HTML5 map tag. The area tags defined in map tag for image tag. The area tag is only child element of map tag.
The <a> or anchor tag defines a hyperlink, which is used to link from one page to another page.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
The <a> tag is always a hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink.
The <a> or anchor element can be used in two ways :
- To create a link to another document, by using the href attribute.
- To create a bookmark inside a document, by using the id attribute.
By default, links will appear as follows in all browsers :
- An unvisited link is underlined and blue in color
- A visited link is underlined and purple in color
- An active link is underlined and red in color
You can overwrite this using CSS.
What is an anchor Tag ?
An anchor tag is an HTML tag. It is used to define the beginning and end of a hypertext link. Search engines use the tag to determine the subject matter of the destination URL. Users click on the anchor text to reach the link target.
The anchor tag is essentially a tag that you can attach to a word or a phrase, except it brings readers down to a different section of the page as opposed to another webpage. You’re essentially creating a unique URL within the same page when you use this tag.
What is an anchor Tag in HTML ?
An anchor tag is an HTML tag. It is used to define the beginning and end of a hypertext link. Search engines use the anchor tag to determine the subject matter of the destination URL. Users click on the anchor text to reach the link target.
In another words, an anchor is a piece of text which marks the beginning and/or the end of a hypertext link. The text between the opening tag and the closing tag is either the start or destination (or both)of a link.
What are the benefits of anchor Tag ?
There are 3 benefits of anchor tag. Following are the benefits of anchor tag used in html.
No Scrolling : The biggest benefit to the anchor tag is not forcing website visitors to scroll down tons of information to find a particular section. If much more contents on the web page, it can be very difficult to find a certain section from all the contents.
Organize : Keep things in order on the web page. Instead of having to create several different web pages or splitting up a document, you can keep it all in one page.
Search Engine Use : Search engines redirect a user to a specific section of a webpage by using a anchor tag information which they crawled.
What is the Syntax of area Tag
<area shape="Shape of Area" coords="Coordinates of area on Image" href="Target URL" target="Target for URL to open" alt="Alt Text of area">
An area element creates a hyperlink in the document and its href attribute sets the link's target URL with specified coordinates.
What are the attributes or properties of HTML5 area tag ?
Following are all the attributes or properties of HTML5 <area> tag.
HTML5 area Tag Attributes
area tag attributes html5
download attribute
Value : filename
Specifies whether to download the linked resource instead of navigating to it, when the user clicks on the link.
Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value.
See Complete Tutorial on <a> Tag for a full description of the download attribute.
alt attribute
Value : string
A text string alternative to display on browsers that do not display images. This attribute is used only if the href attribute is present.
shape attribute
Value : rect, circle, poly, default
The shape of the associated hot spot. The specifications for HTML defines the values rect which defines a rectangular region, circle which defines a circular region, poly which defines a polygon and default which indicates the entire region beyond any defined shapes.
coords attribute
Value : comma separated values of coordinates as string
The coords attribute set the coordinates comma separated values of the shape attribute in size, shape, and placement of an <area>.
- rect : The coordinates values of top left and bottom right corners of the rectangle as comma separated values like x1,y1,x2,y2 .
- circle : The coordinates values as x,y,radius of circle.
- poly : The coordinates values of edges of polygon as comma separated values like x1,y1,x2,y2,..,xn,yn . If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon.
- default : Used to define the custom region.
href attribute
Value : URL
The hyperlink target for the defined area. The href value is a valid URL. This attribute can be omitted if the <area> element does not represent a hyperlink.
hreflang attribute
Value : language code
The hreflang attribute specifies the language of the linked document. This attribute may only be used when href is specified.
Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.
ping attribute
Value : 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.
The ping attribute specifies a list of URLs to be notified if the user follows the hyperlink. Specifies the URL to be notified if the user follows the hyperlink. Must be a space separated list of one or more valid URLs.
referrerpolicy attribute
Value : no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url
Specifies which referrer to send. The Referrer-Policy HTTP header controls how much referrer information (sent via the Referer header) should be included with requests. See Referrer-Policy for possible values and their effects as follows :
- Referrer-Policy: no-referrer
- Referrer-Policy: no-referrer-when-downgrade
- Referrer-Policy: origin
- Referrer-Policy: origin-when-cross-origin
- Referrer-Policy: same-origin
- Referrer-Policy: strict-origin
- Referrer-Policy: strict-origin-when-cross-origin
- Referrer-Policy: unsafe-url
Referrer-Policy Directives
no-referrer
The Referer header will be omitted entirely. No referrer information is sent along with requests.
no-referrer-when-downgrade (default)
This is the default behaviour if no policy is specified, or if the provided value is invalid. The origin, path, and query string of the URL are sent as a referrer when the protocol security level stays the same (HTTP→HTTP, HTTPS→HTTPS) or improves (HTTP→HTTPS), but isn't sent to less secure destinations (HTTPS→HTTP).
origin
Only send the origin of the document as the referrer.
For example, a document at https://www.hudatutorials.com/html5/ will send the referrer https://www.hudatutorials.com/
origin-when-cross-origin
Send the origin, path, and query string when performing a same-origin request, but only send the origin of the document for other cases.
same-origin
A referrer will be sent for same-site origins, but cross-origin requests will send no referrer information.
strict-origin
Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
strict-origin-when-cross-origin
Send the origin, path, and querystring when performing a same-origin request, only send the origin when the protocol security level stays the same while performing a cross-origin request (HTTPS→HTTPS), and send no header to any less-secure destinations (HTTPS→HTTP).
unsafe-url
Send the origin, path, and query string when performing any request, regardless of security.
rel attribute
Value : alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag
Describes the relationship between the document containing the hyperlink and the linked resource. This attribute should be used only if the href attribute is present.
The relationship of the linked URL as space-separated link types.
rel attribute values
| 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) |
| noreferrer | Requires that the browser should not send an HTTP referer header if the user follows the hyperlink |
| noopener | Requires that any browsing context created by following the hyperlink must not have an opener browsing context |
| prev | The previous document in a selection |
| search | Links to a search tool for the document |
| tag | A tag (keyword) for the current document |
target attribute
Value : _blank, _parent, _self, _top, framename
Defines a target to open the linked resource specified in the href attribute. Specifies where to open the linked document.
Where to display the linked URL, as the name for a browsing context a tab, window, or <iframe>.
target attribute values
| Value | Description |
|---|---|
| _blank | Opens the linked document in a new window or tab. usually a new tab, but users can configure browsers to open a new window instead. |
| _self | Opens the linked document in the same frame as it was clicked (this is default). The current browsing context. ( Default ) |
| _parent | Opens the linked document in the parent frame. The parent browsing context of the current one. If no parent, behaves as _self. |
| _top | Opens the linked document in the full body of the window. The topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as _self. |
Simple example on html5 a ( <a> ) or anchor tag or element.
<!DOCTYPE html><html> <body> <!-- The empty fragment ( href="#" ) to link to the top of the current page --> <h1>The empty fragment ( href="#" ) to link to the top of the current page</h1> <a href="#">click on this anchor element</a> </body></html> |
HTML5 a ( <a> ) or anchor tag or element example on external link.
<!DOCTYPE html><html> <body> <!-- HTML5 a ( <a> ) or anchor tag or element example on external link. --> <h1>HTML5 a ( <a> ) or anchor tag or element example on external link.</h1> </body></html> |
HTML5 a ( <a> ) or anchor tag or element example on internal link.
<!DOCTYPE html><html> <body> <!-- HTML5 a ( <a> ) or anchor tag or element example on internal link. --> <h1>HTML5 a ( <a> ) or anchor tag or element example on internal link.</h1> <p>This is <a href="yourhtmlpage.html">Internal Link</a> with html page reference.</p> <h2 id="my-topic">This is the ID reference heading</h2> <p>This is the id reference content.</p> <p>This is <a href="#my-topic">ID reference Link</a> with element id as reference followed by #.</p> </body></html> |