tag to define clickable areas in an image map for better SEO optimization.">

HTML Basics

HTML Introduction HTML Basic HTML Comments HTML Tags/Elements HTML Attributes HTML Formatting HTML Block and Inline HTML Charsets HTML Classes HTML Colors HTML Div HTML Headings HTML Id HTML Iframes HTML Images HTML File Paths HTML Tables HTML Layout HTML Lists HTML Links <a> HTML Paragraphs HTML Quotations HTML JavaScript HTML Emojis HTML URL Encode HTML Entities HTML Computercode HTML Symbols HTML Styles

HTML Forms

HTML Forms HTML Form Elements HTML Form Attributes HTML Input Attributes HTML Input Regex HTML Input Form Attributes HTML Input Types

HTML SEO

HTML Head HTML Page Title HTML Responsive HTML Semantics HTML Favicon

HTML Graphics

HTML Canvas HTML SVG

HTML Media

HTML Media HTML Audio HTML Video

HTML Reference

a abbr acronym address applet area article aside audio b base basefont bdi bdo big blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl DOCTYPE dt em embed fieldset figcaption figure font footer form frame frameset h1_-_h6 head header hgroup hr html i iframe img input ins kbd label legend li link main map mark menu meta meter nav noframes noscript object ol optgroup option output p param picture pre progress q rp rt ruby s samp script search section select small source span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr

HTML <area> Element

The <area> tag is used in conjunction with the <map> tag to define clickable areas in an image map. Each <area> element defines a clickable area within an image, such as a circle, rectangle, or polygon. When a user clicks on the defined area, they are directed to the specified URL.

Usage

To use the <area> tag, you must first define an image map with the <map> tag. Within the <map> tag, you can then define multiple <area> elements to create clickable regions on the image.

Example

Below is an example of how to use the <area> tag:

<img src="../../images/Logo_BluecodeAcademy_horizontal.png" usemap="#examplemap" />
<map name="examplemap">
    <area shape="rect" coords="0,0,50,50" href="#" />
    <area shape="circle" coords="100,100,50" href="#" />
    <area shape="poly" coords="200,200,250,250,200,300" href="#" />
</map>

Attributes

Attribute Description
shape Specifies the shape of the clickable area. Can be "rect" for rectangle, "circle" for circle, or "poly" for polygon.
coords Specifies the coordinates of the clickable area. The format varies depending on the shape (e.g. for a rectangle: "left,top,right,bottom", for a circle: "centerX,centerY,radius", for a polygon: "x1,y1,x2,y2,...").
href Specifies the URL that the user is directed to when clicking on the area.
alt Specifies alternate text for the area, to be displayed if the image cannot be loaded or viewed by screen readers.

Overall, the <area> tag is a valuable tool for creating interactive image maps on the web. By defining clickable areas within an image, you can provide users with a more engaging and intuitive browsing experience.