HTML shape Attribute: Reference and Examples

The shape attribute is a small instruction attached to an HTML element. Its job is to shape of a clickable area in an image map. It is easier to remember when you can see it in a real piece of markup.

What shape is used for

Shape of a clickable area in an image map. The attribute appears inside an element’s opening tag. Depending on its definition, it may take a specific string, a number, an enumerated keyword, or be a boolean attribute.

The example below uses it in a area context. Other elements may support it too, or may give the same attribute a different meaning.

Example you can try

<img src="map.png" alt="Campus locations" usemap="#campus-map" width="500" height="300">
<map name="campus-map">
    <area shape="rect" coords="0,0,100,100" href="/library" alt="Library">
</map>

How the example works

Look for shape in the snippet. Here the example shows the value rect. This is a concrete input the browser can interpret; it is not just text shown to the reader.

The effect depends on the element and the browser. Make sure the value matches what the chosen element supports.

Values and important behavior

Common image-map shapes are rect, circle, poly, and default. Coordinate formats depend on the shape.

This detail matters most when the page receives user input, navigates to another document, or loads an external resource. In those cases, check the browser behavior and any server-side requirements separately.

Small practice task

Copy the code and change shape to another sensible value, or remove it entirely if it is optional. Test the difference in the browser and inspect any submitted value or network request.

Common Beginner Mistakes

• The effect depends on the element and the browser. Make sure the value matches what the chosen element supports.
• Using shape on an element that does not support it.
• Believing that an HTML hint or client-side check replaces real server validation or a security policy.

Key Takeaways

• shape is used to shape of a clickable area in an image map.
• The effect depends on the element and the browser. Make sure the value matches what the chosen element supports.
• Choose valid values and test the result instead of guessing what the browser will do.