Area Element Tutorial

<area>

Introductory Text

The area element represents an active area of an image map. These elements have no content but specify the geometric regions of the image map and the href link associated with each region.

The key element used in an image map is the alt attribute; it is necessary. Further, since an image map area is not an image, indicating that this alt text identifies a link (even though no anchor element is present).

Caveats:: The link is not an anchor link and does not have visible text.; The alt attribute—for Accessibility—is assigned to the area but does not have content.; The image alt attribute will be seen when the image does not show but the area alt attribute will not.; If the image does not show, browsers may or may not render the active areas even when no link is displayed (depending on the browser, e.g., Safari renders an active area).

The area element is considered an empty element; consequently, it does not use an “Open / Close” tag pair, i.e., <[INSERT ELEMENT NAME]></[INSERT ELEMENT NAME]> as all other elements are required to have because empty elements either “generate content” as when <hr> displays a horizontal rule due to the User Agents rendering it; or, when “content” is provided by an external source as seen in the img element.

HTML 4.01 does not require self-closing; whereas, xHTML 1.0 requires an XML self-closing mechanism. HTML 5 allows either. xHTML 1.0 states, Include a space before the trailing / and > of empty elements, e.g. <br />, <hr /> and <img src="karen.jpg" alt="Karen" />. Also, use the minimized tag syntax for empty elements, e.g. <br />, as the alternative syntax <br></br> allowed by XML gives uncertain results in many existing user agents. [Elementary Emphasis.]

[Note: This article by Jukka Korpela thoroughly exposes the mysteries (and, conundrums) of the element: Empty elements in SGML, HTML, XML, and XHTML.]

Element tag:: <area>
Closure:: HTML 4.01 - <area>, i.e., No change; HTML 5 - Either closure type; xHTML 1.0 - <area(Single space) />

Use Examples

Example [Basic (Mystery Navigation)]:

Selected Navigation

[Note: Titles have been included for mystery removal.]

Code:


<p><img src="/images/tutorials/vague-Navigation_blocks.jpg" alt="Selected Navigation" »
width="264" height="575" usemap="#vague_Navigation_blocks_Map"></p>;
<map name="vague_Navigation_blocks_Map" id="vague_Navigation_blocks_Map"> 
<area shape="rect" alt="Elementary Standards Error Page Link" coords="64,503,91,529" »
href="/error-page" title="An Elementary Error Page"> 
<area shape="rect" alt="W3C HTML WG Top 200 (Alexa) Sites Summary Results Link" »
coords="99,463,126,477" href="http://www.elementary-group-standards.com/ »
w3c-html-wg-top-200-alexa-sites-quality-assurance-survey-elementary-standards.html" »
title="The W3C HTML WG Top 200 (Alexa) Sites">
<area shape="rect" alt="An Elementary Standards Public Service Announcement Link" »
coords="64,428,104,456" href="/service-announcements/elementary-announcement-017" »
title="Elementary Service Announcement No. 17">
<area shape="rect" alt="Web Standard Article Directory Link" coords="67,394,94,410" »
href="/web-standards" title="Web Standards">
<area shape="rect" alt="HTML Article Directory Link" coords="121,358,149,375" »
href="/html" title="HTML">
<area shape="rect" alt="CSS Article Directory Link" coords="55,334,97,380" href="/css" »
title="CSS">
<area shape="rect" alt="Search Engine Marketing Article Directory Link" »
coords="114,319,146,345" href="/seo" title="Search Marketing">
<area shape="rect" alt="Typography Article Directory Link" coords="68,303,88,323" »
href="/typography" title="Typography">
<area shape="rect" alt="Miscellaneous Article Directory Link" coords="67,278,85,302" »
href="/formaldehyde" title="Formaldehyde">
<area shape="rect" alt="Anchor Element Tutorial Link" coords="114,265,153,305" »
href="/html-elements/inline/address-element" title="Anchor Element Tutorial">
<area shape="rect" alt="Applet Element Tutorial Link" coords="68,256,82,274" »
href="/html-elements/inline/applet-element" title="Applet Element Tutorial">
<area shape="rect" alt="Bold Element Tutorial Link" coords="64,226,84,247"; »
href="/html-elements/inline/bold-element" title="Bold Element Tutorial">
<area shape="rect" alt="Heading Element Tutorial Link" coords="55,176,91,211" »
href="/html-elements/inline/heading-element" title="Heading Element Tutorial">
<area shape="rect" alt="Italic Element Tutorial Link" coords="125,146,155,171" »
href="/html-elements/inline/italic-element" title="Italic Element Tutorial">
<area shape="rect" alt="Preformatted Element Tutorial Link" coords="70,145,88,158" »
href="/html-elements/inline/preformatted-element" title="Preformatted Element Tutorial Link">
<area shape="rect" alt="Quote Element Tutorial" coords="67,126,86,139" »
href="/html-elements/inline/quote-element" title="Quote Element Tutorial Link">
<area shape="rect" alt="Small Element Tutorial Link" coords="94,110,129,131" »
href="/html-elements/inline/small-element" title="Small Element Tutorial">
<area shape="rect" alt="Big Element Tutorial Link" coords="70,79,94,106" »
href="/html-elements/inline/big-element" title="Big Element Tutorial Link">
<area shape="rect" alt="HTML Element Attributes Link" coords="59,50,92,75" »
href="/html-element-attributes" title="HTML Element Attributes">
<area shape="rect" alt="CSS Typography for Il Pleut by Guillaume Apollinaire Link" » 
coords="62,27,95,37" href="/vague/il-pleut-typography-made-with-css" »
title="'Il Pleut' Typography Made With CSS">
</map>

[Note: See Image Map lacking image test for what various browsers do with the map when the image is removed from the map above. The map areas remain in the source code: Safari and Chrome will render invisible—Truly Mystery—links; Firefox (Mac/PC) and IE6 will not render links; Opera (Mac/PC) render the links individually even though they appear to be one very long line: they are single links.]

Content Model/Assigned Attributes

Element-Type:

Empty

Attributes: