Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML rel Attribute
The rel attribute of the <area> element specifies the relationship between the current document and the linked document. This attribute was introduced in HTML5 for the <area> element and helps define the semantic relationship between clickable regions in image maps and their target destinations.
Syntax
Following is the syntax for the rel attribute in the <area> element −
<area rel="value" href="URL" shape="shape" coords="coordinates">
The value can be one or more space-separated keywords that define the relationship type.
Rel Attribute Values
The rel attribute accepts the following values that define different types of relationships −
- alternate − An alternate version of the document (e.g., print version, different language)
- author − Links to information about the author of the document
- bookmark − A permanent URL used for bookmarking this section
- help − Links to a help document or contextual help
- license − Links to copyright information or license terms
- next − Indicates the next document in a sequence or series
- nofollow − Instructs search engines not to follow or crawl this link
- noreferrer − Prevents the browser from sending HTTP referrer information
- prefetch − Hints that the target document should be preloaded for faster access
- prev − Indicates the previous document in a sequence or series
- search − Links to a search interface for the current document
- tag − Indicates that the href is a tag or keyword for the current document
Basic Example
Following example demonstrates the basic usage of the rel attribute in an image map −
<!DOCTYPE html>
<html>
<head>
<title>Area rel Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Learning Resources</h2>
<p>Click on different areas to explore tutorials with various relationships:</p>
<img src="/images/usemap.gif" alt="Tutorial Map" usemap="#tutorials" style="border: 1px solid #ccc;">
<map name="tutorials">
<area shape="poly" coords="74,0,113,29,98,72,52,72,38,27"
href="/perl/index.htm" alt="Perl Tutorial" target="_blank" rel="alternate">
<area shape="rect" coords="22,83,126,125" alt="HTML Tutorial"
href="/html/index.htm" target="_blank" rel="help">
<area shape="circle" coords="73,168,32" alt="PHP Tutorial"
href="/php/index.htm" target="_blank" rel="license">
</map>
</body>
</html>
In this example, each clickable area has a different rel value indicating its relationship to the current document.
Multiple rel Values
The rel attribute can accept multiple space-separated values to define multiple relationships simultaneously.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple rel Values</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Navigation Map</h2>
<p>This image map demonstrates multiple relationship types:</p>
<img src="/images/navbar.gif" alt="Navigation" usemap="#navigation" style="border: 1px solid #ddd;">
<map name="navigation">
<area shape="rect" coords="0,0,80,40"
href="/previous.htm" alt="Previous Page" rel="prev bookmark">
<area shape="rect" coords="80,0,160,40"
href="/next.htm" alt="Next Page" rel="next prefetch">
<area shape="rect" coords="160,0,240,40"
href="/search.htm" alt="Search" rel="search nofollow">
</map>
</body>
</html>
Here, each area uses multiple rel values: prev bookmark, next prefetch, and search nofollow to specify combined relationships.
Common Use Cases
| rel Value | Use Case | Example |
|---|---|---|
| alternate | Different format or version | Print version, mobile version, PDF |
| nofollow | External untrusted links | User-generated content, paid links |
| help | Contextual assistance | Help documentation, tutorials |
| next/prev | Sequential navigation | Pagination, multi-part articles |
SEO and Accessibility Benefits
Using the rel attribute provides several benefits −
-
Search Engine Optimization − Values like
nofollowandalternategive search engines important hints about link relationships -
User Experience − Values like
prefetchcan improve page loading performance - Semantic Clarity − Helps browsers and assistive technologies understand the purpose of links
-
Privacy − The
noreferrervalue prevents referrer information leakage
Example − SEO-Focused Implementation
<!DOCTYPE html>
<html>
<head>
<title>SEO-Optimized Image Map</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>External Resources</h2>
<img src="/images/external-links.gif" alt="External Links" usemap="#external" style="border: 1px solid #999;">
<map name="external">
<area shape="rect" coords="0,0,100,50"
href="https://example.com/sponsored" alt="Sponsored Content"
rel="nofollow noreferrer" target="_blank">
<area shape="rect" coords="100,0,200,50"
href="/about-author.htm" alt="About Author"
rel="author bookmark">
<area shape="rect" coords="200,0,300,50"
href="/license.htm" alt="License Terms"
rel="license help">
</map>
</body>
</html>
This example shows best practices for external links, author information, and license details using appropriate rel values.
Conclusion
The rel attribute in <area> elements provides semantic meaning to image map links, helping search engines, browsers, and users understand the relationship between the current document and linked resources. Using appropriate rel values improves SEO, accessibility, and user experience while providing important hints about link behavior and content relationships.
162 Views
