Thẻ area trong HTML

• Bùi Tấn Lực
• 21
• 26/09/2025

Thẻ area trong HTML nằm trong thẻ map với mục đích tạo ra những khối hình để gắn lên hình ảnh ở các vị trí khác nhau để click vào liên kết được, chi tiết như nào hãy cùng chúng tôi phân tích:

Thẻ area trong HTML

Chức năng của Thẻ area trong HTML

Thẻ area trong HTML nằm trong thẻ map với mục đích tạo ra những khối hình để gắn lên hình ảnh ở các vị trí khác nhau để click vào liên kết được hoặc rê chuột vào.

Thuộc tính shape và coords của thẻ area trong HTML

Thuộc tính shape giá trị rect dùng cho hình vuông, hình chữ nhật

coords="left,top,width,height"

left: Cách bên trái.

top: Cách bên trên.

width: Chiều rộng của khối.

height: Chiều cao của khối.

Thuộc tính shape giá trị circle dùng cho hình tròn

coords="toadox,toadoy,bankinh"

toadox: Tọa độ x của tâm hình tròn, cách từ trái qua.

toadoy: Tọa độ y của tâm hình tròn, cách từ trên xuống.

bankinh: Bán kính hình tròn.

Thuộc tính shape giá trị poly dùng cho hình đa giác

coords="x1,y1,x2,y2,...,xn,yn"

Mỗi góc nhọn của hình đa giác sẽ có tọa độ x,y.

x: tọa độ x, tính từ trái qua.

y: tọa độ y, tính từ trên xuống.

x1,y1 sẽ là 1 cặp tọa độ, x2,y2 sẽ là một cặp, bạn tạo bao nhiêu cặp cũng được.

Code Thẻ area trong HTML

<p>Rê chuột vào hình sau đó click</p>
<!--Tạo thẻ img có thuộc tính usemap giá trị là maphinh để gắn map có name maphinh lên hình -->
<img src="https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg" width="300" height="300" alt="map" usemap="#maphinh">
<!--Tạo thẻ map có name là maphinh-->
<map name="maphinh">
  <!--Hình vuông, hình chữ nhật-->
  <area shape="rect" coords="10,10,50,280" alt="CEO Bùi Tấn Lực" title="CEO Bùi Tấn Lực" href="https://webmoi.vn/ceo-bui-tan-luc/">
  <!--Hình tròn-->
  <area shape="circle" coords="250,60,50" alt="Thẻ area trong HTML" title="Thẻ area trong HTML" href="https://webmoi.vn/the-area-trong-html/">
  <!--Hình đa giác-->
  <area shape="poly" coords="300,300,200,300,200,200,300,200" alt="Code Thẻ area trong HTML" title="Code Thẻ area trong HTML" href="https://webmoi.vn/code-the-area-trong-html/"> 
</map>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ area trong HTML.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Thẻ area trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn