The HTML area rel attribute is a fundamental aspect used primarily within the map tag. It is vital for defining relationships between linked resources, specifically when using the area tag to create clickable regions on an image. In this article, we will dive deeply into the rel attribute, its syntax, various attribute values, browser support, practical examples, and related tags, making it easy for beginners to grasp.
What is the HTML area rel Attribute?
The rel attribute stands for “relationship” and is used to specify the relationship between the current document and the linked resource. When used in the area tag, it defines the kind of link that is being created, providing additional information for user agents, search engines, and accessibility tools.
Syntax
The syntax for the area tag with the rel attribute is straightforward:
<map name="mapname">
<area shape="shape" coords="coords" href="link" alt="description" rel="relationship">
</map>
In this example:
- shape: Defines the shape of the clickable area (e.g., rect, circle, poly).
- coords: Coordinates for the shape.
- href: Link to the resource.
- alt: Alternative text for the area.
- rel: The relationship between the linked resource and the document.
Attribute Values
The rel attribute can take various values. Below is a table summarizing some of the most common values:
| Value | Description |
|---|---|
| alternate | Indicates that the linked resource is an alternate version of the document. |
| bookmark | Specifies that the linked resource is a bookmark. |
| external | Indicates the linked resource is external to the current site. |
| nofollow | Signals to search engines not to follow the link. |
| noopener | Instructs the browser to open the linked document in a new tab without giving it access to the linking tab. |
| noreferrer | Prevents the browser from sending the referring URL to the new page. |
Browser Support
The rel attribute in the area tag is well-supported across all modern web browsers. Here is a quick overview of browser support:
| Browser | Support Status |
|---|---|
| Chrome | Supported |
| Firefox | Supported |
| Safari | Supported |
| Edge | Supported |
| Internet Explorer | Supported |
Example
Let’s put all of this information together into a practical example. This code creates an image map with the area rel attribute being used in multiple areas:
<html>
<head>
<title>Image Map Example</title>
</head>
<body>
<img src="image.jpg" usemap="#imagemap" alt="Description of image">
<map name="imagemap">
<area shape="rect" coords="34,44,270,350" href="https://www.example.com" alt="Example" rel="nofollow">
<area shape="circle" coords="500,100,30" href="https://www.anotherexample.com" alt="Another Example" rel="noopener noreferrer">
</map>
</body>
</html>
In this example:
- An image is linked to an image map defined by the name “imagemap”.
- The first area is a rectangular section that links to “example.com” with a rel value of “nofollow”.
- The second area is a circular section that links to “anotherexample.com” and uses rel values of “noopener” and “noreferrer”.
Related Tags
Below are related tags that you may find useful when working with the area rel attribute:
| Tag | Description |
|---|---|
| map | Defines a client-side image map. |
| area | Defines a clickable area in an image map. |
| img | Embeds an image in the document. |
FAQ
Q1: What does the rel attribute do in the area tag?
A1: The rel attribute specifies the relationship between the current document and the linked resource.
Q2: Can I use multiple rel values in the area tag?
A2: Yes, you can use multiple rel values, separated by spaces, to convey a complex relationship.
Q3: Is the rel attribute required in the area tag?
A3: No, the rel attribute is optional; however, it is good practice to use it for better semantic structure.
Q4: How do I style the area elements?
A4: You cannot directly style area elements themselves; instead, you can style the img or parent elements that contain the map.
Q5: Can I use the area tag with other HTML elements?
A5: The area tag should only be used in conjunction with the map tag and cannot be used independently.
Leave a comment