Thẻ area trong HTML
Bùi Tấn Lực - 868
- 26/09/2025
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>
Những lưu ý quan trọng khi sử dụng thẻ area trong HTML
Thẻ area giúp xác định các vùng có thể nhấp trên hình ảnh, nhưng chỉ hoạt động hiệu quả khi được cấu hình đúng. Việc sử dụng không đúng cách có thể khiến liên kết không hoạt động, giảm trải nghiệm người dùng hoặc gây khó khăn cho công cụ hỗ trợ truy cập. Trước khi đưa vào website, hãy kiểm tra kỹ cách kết hợp giữa các thành phần liên quan và khả năng hiển thị trên nhiều thiết bị.
Cần kết hợp đúng với thẻ map và thuộc tính usemap
Thẻ area không hoạt động độc lập mà phải được đặt bên trong map. Đồng thời, hình ảnh cần liên kết đến map thông qua thuộc tính usemap. Nếu một trong hai thành phần bị thiếu hoặc tên tham chiếu không trùng khớp, toàn bộ vùng liên kết sẽ mất tác dụng.
Để hạn chế lỗi, nên:
- Đặt area bên trong map.
- Đảm bảo tên trong usemap trùng với name của map.
- Kiểm tra lại liên kết sau khi chỉnh sửa mã nguồn.
- Thử nhấp từng vùng để xác nhận hoạt động chính xác.
Luôn khai báo alt để tăng khả năng truy cập (Accessibility)
Mỗi vùng liên kết nên có nội dung mô tả rõ ràng bằng thuộc tính alt. Điều này giúp các công cụ đọc màn hình hiểu được mục đích của từng vùng, đồng thời hỗ trợ người dùng khi hình ảnh không thể tải.
Nội dung alt nên ngắn gọn, mô tả đúng chức năng của vùng liên kết thay vì sử dụng các từ chung chung như "Bấm vào đây" hoặc "Link".
Kiểm tra tọa độ coords khi thay đổi kích thước hình ảnh
Thuộc tính coords được xác định dựa trên kích thước của hình ảnh tại thời điểm tạo image map. Khi hình ảnh bị thay đổi kích thước hoặc thay bằng phiên bản khác, các tọa độ có thể không còn chính xác.
Sau mỗi lần thay đổi ảnh hoặc điều chỉnh giao diện, hãy kiểm tra lại toàn bộ vùng nhấp để đảm bảo người dùng luôn truy cập đúng vị trí mong muốn.
Hạn chế sử dụng image map trên giao diện responsive
Image map truyền thống không tự động thích ứng khi hình ảnh co giãn theo nhiều kích thước màn hình. Điều này có thể khiến vùng liên kết bị lệch trên điện thoại hoặc máy tính bảng.
Nếu website ưu tiên thiết kế responsive, nên cân nhắc sử dụng các giải pháp hỗ trợ tự động điều chỉnh tọa độ hoặc lựa chọn phương pháp khác phù hợp hơn với giao diện linh hoạt.
Khi nào nên dùng area và khi nào nên thay thế bằng SVG hoặc CSS
Thẻ area phù hợp với các hình ảnh có số lượng vùng liên kết cố định, ít thay đổi và không yêu cầu hiệu ứng tương tác phức tạp. Đây là lựa chọn đơn giản cho sơ đồ, bản đồ hoặc hình minh họa có nhiều khu vực cần dẫn đến các trang khác.
Trong khi đó, SVG hoặc CSS sẽ phù hợp hơn khi cần:
- Hiển thị tốt trên mọi kích thước màn hình.
- Tạo hiệu ứng khi rê chuột hoặc nhấp.
- Điều chỉnh hình dạng vùng liên kết linh hoạt.
- Dễ bảo trì khi giao diện thường xuyên thay đổi.
Việc lựa chọn đúng giải pháp ngay từ đầu sẽ giúp website dễ mở rộng, tối ưu trải nghiệm người dùng và giảm thời gian chỉnh sửa về sau.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ area trong HTML.
- 0 Bình luận
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 *
