Tag area là gì
Tag area là một thẻ html xác định một vùng bên trong image-map. Các thẻ <area> luôn được lồng bên trong các thẻ <map>.
Các bạn có thể tìm hiểu thêm vào thẻ tag <map> trong html.
Cú pháp:
<map name=”tên map”>
<area shape=”hình dạng map” coords=”tọa độ map” href=”liên kết” alt=”” />
</map>
Các trình duyệt hộ trợ thẻ tag <area> trong html
| HTML Tag | |||||
|---|---|---|---|---|---|
| <area> | Yes | Yes | Yes | Yes | Yes |
Các duyệt trình website hiện nay đều hổ trợ thẻ area.
Lưu ý:
Sự khác nhau giữa HTML và XHTML
| HTML4.01 | XHTML1.0 | XHTML1.1 |
|---|---|---|
| Không cần kết thúc tag <area> | Cần khoảng trắng và ký tự “/” để kết thúc tag <area /> | Không hỗ trợ |
Cách sử dụng thẻ area trong html
Ví dụ 1
<img src="wp-content/uploads/2017/08/vi-du-tag-area.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="#" alt="Sun"> <area shape="circle" coords="90,58,3" href="#" alt="Mercury"> <area shape="circle" coords="124,58,8" href="#" alt="Venus"> </map>
Ở ví dụ này bạn có thể bấm vào các hành tinh khác nhau. Trên đay mình để là sun, mercury, venus.
Ví dụ 2:
<p><img src="wp-content/uploads/2017/08/vi-du-tag-area-2.gif" alt="planet" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="circle" coords="100,80,52" href="https://alantien.com/tag-area-la-gi.html" alt="Planet" /> </map></p>
Với ví dụ 2 này bạn có thể bấm vào hình sao thổ với link trỏ về chính bài viết này.
Css mặc định của tag area
area {
display: none;
}
Các thuộc tính của tag area trong html
Cách sử dụng: <area thuoctinh=”giatri” />
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| alt | Text | alt=”Đây là alt” | Xác định text alternate cho area. |
Các Thuộc tính tùy chọn thêm cho tag area
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| coords | Tọa độ | coords=”0,111,122″ | Xác định tọa độ của area. |
| href | URL | href=”index.html” | Xác định URL đến của một liên kết trong một area. |
| nohref | nohref | nohref=”nohref” | Xác định rằng một area không có liên kết liên quan. Không hỗ trợ trong phần lớn trình duyệt |
| shape | default 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 |
Lời kết
Qua bài viết cũng như các ví dụ bạn cũng hiểu ra được tag area là gì. Theo đánh giá của mình thì tag này chỉ được áp dụng trong map google. Và chúng ta sẽ tim hiểu kỹ về nó hơn trong tag <map> nhé. Bài viết mình dựa trên w3c nên hoàn toàn chính xác khi sử dụng. Các bạn có thắc mắc cứ gửi bình luận cho mình nhé.
