Thẻ <area/> trong HTML

Thẻ <area/> trong HTML

  • Tag <area/> xác định một vùng bên trong image-map.
  • Image-map là hình trong đó có những khu vực có thể click được.
  • Các <area/> luôn được lồng bên trong tag <map>

Sự khác nhau giữa HTML4.01 và HTML5

HTML4.01HTML5
-Trong HTML5 có một số thuộc tính mới, và một số thuộc tính không được hỗ trợ.

Cấu trúc

<map name="tên map">
<area shape="hình dạng map" coords="tọa độ map" href="liên kết" alt="" />
</map>

Ví dụ

<p><img src="https://media.hoc.tv/medias/the-area-trong-html-5f6c8785c9c17.png" alt="planet" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="100,80,52" href="tag_area.php" alt="Planet" />
</map></p>

Kết quả:

planet Planet

Trình duyệt hỗ trợ

  • Internet Explorer 6
  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari


Thuộc tính

Cách sử dụng:

<area thuoctinh="giatri" />

Thuộc tính bắt buộc

Thuộc tínhGiá trịVí dụMô tả
altTextalt="Đây là alt"Xác định text alternate cho area.

Thuộc tính tùy chọn

Thuộc tínhGiá trịVí dụMô tả
Thuộc tính mới(Mới)
hreflangmã ngôn ngữ langhreflang="vi"Xác định ngôn ngữ cho mục tiêu liên kết
mediaTruy vấn mediamedia="screen"Xác định mục tiêu URL cho media/device.
Giá trị mặc định là: all.
relalternaterel="alternate"Liên kết tới một phiên bản thay thể của văn bản.
authorrel="author"Liên kết tới tác giả của văn bản.
bookmarkrel="bookmark"Sử dụng cho liên kết đán dấu trang (bookmark)
externalrel="external"Sử dụng cho liên kết ngoài trang.
helprel="help"Liên kết tới văn bản trợ giúp
licenserel="license"Liên kết tới thông tin bản quyền, văn bản cho phép.
nextrel="next"Liên kết kế tiếp.
nofollowrel="nofollow"Liên kết tới một tài liệu không xác nhận (không được phép), thường dành cho bộ máy tìm kiếm.
noreferrerrel="noreferrer"Ngăn không cho trình duyệt gửi một HTTP liên quan tới header nếu người dùng click vào liên kết.
prefetchrel="prefetch"Xác định mục tiêu văn bản nên được lưu trữ
prevrel="prev"Liên kết vừa qua.
searchrel="search"Liên kết tới công cụ tìm kiếm cho văn bản.
tagrel="tag"Xác định từ khóa cho tài liệu hiện hành.
typeKiểu MIMEtype="image/gif"Xác định kiểu MIME cho mục tiêu URL.
Thuộc tính như HTML4.01
coordsTọa độcoords="0,111,122"Xác định tọa độ của area.
hrefURLhref="index.html"Xác định URL đến của một liên kết trong một area.
shapedefault
rect
circle
poly
shape="rect"Xác định hình dạng của area.
target_blank
_parent
_self
_top
target="_blank"Xác định nơi để mở trang liên kết quy định tại các thuộc tính href.
Không được hỗ trợ trong DTD Strict
Thuộc tính không hỗ trợ trong HTML5
nohrefnohrefnohref="nohref"Không hỗ trợ trong HTML5.

Các thuộc tính Global Thẻ này hỗ trợ tất cả các thuộc tính Global được miêu tả trong chương: Tổng hợp thuộc tính trong HTML

Các thuộc tính sự kiện Thẻ này hỗ trợ tất cả các thuộc tính sự kiện được miêu tả trong chương: Tổng hợp sự kiện (Event) trong HTML

Bình luận