ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
XHTML Tutorial - Index
XHTML Tutorial - Introduction to XHTML
XHTML Tutorial - Formatting
XHTML Tutorial - Links
XHTML Tutorial - Images
XHTML Tutorial - Forms
XHTML Tutorial - Tables
XHTML Tutorial - Frames
XHTML Tutorial - Style Sheets
XHTML Tutorial - Advanced Tags

Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses


  Home > Courses, Tutorials & eBooks > XHTML Tutorial > Images
Previous  Next

XHTML Tutorial - Images

                                                                             Page 2 of 2

Area Tag

The area tag defines a region in an image map. This tag has to include various attributes, as it cannot work alone. It requires the href attribute to link to another document.

In XHTML the area tag should be properly closed. It is done so putting a (/) backslash after the word area, i.e. <area/>.

<area attributes/>

Attributes of Area Tag


Href tag indicates the URL, which the <area> tag links to. It is used in a similar way as the anchor tag.

<area href=”image1.jpg” />


The alt attribute in the <area> tag works just like it works in the <img> tag. It indicates the alternative text that is to be displayed if the browser does not display the picture.

<area href=”image1.jpg” alt=”my image” />


The cords attribute is the coordinate attribute. This tag is used with the shape attribute (the shape attribute has been described later). It specifies the coordinates of the area that has to be clicked and indicates where the shape is located in the image map. The Coords tag is necessary when the shape attribute is set to Rect, Circle or Poly. It is not used if the shape is set to Default.


<area href=”image1.jpg” alt=”my image” coords=”6,116,97,44”/ >



The shape attribute indicates what type of shape the area is. The shape of the map must be set to the following values:

  • Rect

Rect indicates that the area is a rectangle. For a rectangle, the cords attribute consists of two pair of x/y coordinates. The first pair sets the coordinates of the upper left corner of rectangle. The second pair sets the coordinates of the lower right corner of rectangle.

<area href=”image1.jpg” alt=”my image” shape=rect cords=”6,116,97,44” />

  • Circle

Circle indicates that the area is a circle. For a circle, the first two numbers in cords attribute indicate the coordinates of the centre of the circle. The last number indicates the radius of the circle.

<area href=”image1.jpg” alt=”my image” shape=circle cords=”60,40, 44” />

  • Poly

Poly indicates that the area is a type of polygon. For a polygon, each pair of coordinate in cords indicates the single corner of the polygon.

<area href=”image1.jpg” alt=”my image” shape=poly cords=”150,217, 190,257, 150,297, 110,257” / >

In this chapter you have learnt:

  • The image tag is used to display an image in an XHTML document.
  • Src is the source attribute of the image tag. It indicates the location or the path of the picture to be displayed on the web page.
  • The align attribute sets the alignment or the position of the picture in relation to the text around it.
  • Mapped image contains some regions that act as links to other documents.
  • The area tag defines a region in an image map. The href tag indicates the URL that the <area> tags links to.
  • The shape attribute in an image map indicates what shape the area is.


Review Questions

Question 1

Which tag is used to display an image in an HTML document?


Image Tag

Question 2

Which is the most important attribute of image tag?


Src attribute

Question 3

Which attribute is used to display an alternative text if the picture is not displayed on the web browser?


Alt attribute

Question 4

What is a mapped image?


It’s an image which contains some regions that act as links to other documents.

Question 5

Which tag defines a region in an image map?


Area Tag

What's Next

The next chapter will acquaint you with the basic concept of forms in a web page. It will further illustrate how to make different types of forms that collect information from the user.

Hop over to the next chapter to get a close up on forms.



Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
© ExpertRating 2015. All Rights Reserved.