logo-alantien

Tag base là gì | Thẻ Base và thuộc tính target trong html

Tác giả: Alan Tiến

Tag base là gì

Tag Base là một thẻ html được dùng trong việc xác định một đường dẫn cơ sở cho đường dẫn tương đối trong trang. Ngoài ra thẻ base còn dùng để định dạng kiểu mở liên kết cho tất cả các liên kết chưa được định dạng thuộc tính target.

Đọc qua câu định nghĩa chắc các bạn chưa hiểu được ý nghĩa của thẻ tag base. Mình sẽ đưa ra những ví dụ để giải thích cụ thể hơn cho từng trường hợp.

tag-base-la-gi

Trường hợp thứ nhất:

Thẻ base được sử dụng để xác định một đường dẫn cơ sở cho đường dẫn tương đối trong html. Đường dẫn cơ sở này sẽ nối với tất cả các đường dẫn tương đối ở website để trở thành đường dẫn tuyệt đối. Các bạn xem ví dụ ở dưới.

Tìm hiểu thêm:  Phân biệt đường dẫn tương đối, tuyệt đối trong html

Ở ví dụ này, mình sử dụng đường dẫn cơ sở là:”https://alantien.com/wp-content/uploads/2017/01/“.

Tiếp theo mình sử dụng đường dẫn tương đối ở thẻ img: “tao-lien-ket-bang-the-a-trong-html.jpg“.

Như vậy trình duyệt sẽ tự hiểu và nối đường dẫn cơ sở với đường dẫn tương đối lại. Và chúng ta sẽ có đường dẫn tuyệt đối như sau: “https://alantien.com/wp-content/uploads/2017/08/tag-area-la-gi.jpg“.

Nhưng các bạn chứ ý thêm là trong ví dụ trên mình có sử dụng thẻ <a> để và mình cho đường dẫn tuyệt đối vào: “https://alantien.com/a-href-la-gi-tao-lien-ket-bang-the-a-trong-html.html“. Vì đây đã là đường dẫn tuyệt đối nên trình duyệt không nối thêm đoạn đường dẫn cơ sở của mình vào nữa. Các bạn xem kết quả ở dưới nhé.

See the Pen Ví dụ về thẻ base trong html by alantien (@alantien) on CodePen.0

Trường hợp thứ hai

Thẻ base dùng để định dạng kiểu mở liên kết cho tất cả các liên kết chưa được định dạng thuộc tính target. Mình có một ví dụ như ở dưới

Như bạn đã thấy, ở ví dụ này mình sử dụng những thành phần sau:

Thẻ base : <base target=”_blank”>

Thẻ a thứ nhất: <a href=”https://alantien.com/web-development/hoc-html”>Học HTML</a>. Ở thẻ <a> này mình không cho thuộc tính target

Thẻ a thứ hai : <a href=”https://alantien.com/web-development/hoc-css” target=”_self”>Học CSS</a>. Còn ở thẻ này mình để thuộc tính target là _self.

Nhắc lại ý nghĩa của thuộc tính target trong html

  • _bank : Mở ra liên kết ở 1 tab mới
  • _self   : Mở ra liên kết ở tab hiện tại

Kết quả nhận được như sau. Các bạn có thể bấm vào để hiểu hơn.

Có lẽ không khó để nhận ra điều khác biệt giữa 2 thẻ a đúng không nào? Thẻ a thứ nhất vì không được gắn thuộc tính target nên trình duyệt sẽ lấy target của thẻ base. Ngược lại thẻ a thứ hai đã có thuộc tính target nên sẽ không bị ảnh hưởng.

Qua 2 trường hợp trên các bạn đã hiểu được tác dụng của thẻ base rồi. Ngoài ra các bạn có thể kết hợp 2 trường hợp lại làm một nữa. Xem ví dụ nhé.

Lưu ý:

Nếu bạn cần sử dụng thẻ <base> thì bạn phải để thẻ ở giữa cặp thẻ<head> </head>. Và thẻ <base> phải là phần tử con đầu tiên của thẻ<head>. Xem ví dụ

Cách trình duyệt hỗ trợ thẻ base trong html

HTML Tag
<base> Yes Yes Yes Yes Yes

Các trình duyệt hiện nay đều hỗ trợ tốt cho thẻ <base> hiện thị. Các bạn thoải mái sử dụng mà không cần lo điều gì nhé.

Các thuộc tính của thẻ <base> trong html

Cách sử dụng: <base thuoctinh=”giatri” />

Bảng thuộc tính

Thuộc tính Giá trị Ví dụ Mô tả
href URL href=”index.html” Xác định các đường cơ bản cho tất cả các đường tương đối trong trang.
target _blank
_parent
_self
_top
framename
target=”_blank” Xác định kiểu mở tất cả các liên kết trong trang.
Không được hỗ trợ trong DTD Strict

Lời kết

Trên đây là tất cả kiến thức mình biết về thẻ <base> trong html. Các bạn có thể áp dụng vào website của mình. Theo mình thì các bạn nên áp dụng cho trường hợp thứ 2. Vì đa số khi thêm một liên kết chúng ta đều không có thói quen thêm thuộc tính target trong html. Hãy ủng hộ mình bằng cách chia sẽ hoặc bình luận lại ý kiến nhé. Chúc các bạn thành công!

Tag base là gì | Thẻ Base và thuộc tính target trong html
4.6 (92%) 10 votes

Bạn có thể tìm thấy bài viết Tag base là gì | Thẻ Base và thuộc tính target trong html với các từ khóa sau:-,

like

Gửi bình luận

loading...
  • Key đang SEO Top