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

<html>
<head>
    <base href="https://alantien.com/wp-content/uploads/2017/01/">
</head>
<body>

    <img src="tao-lien-ket-bang-the-a-trong-html.jpg">

    <br><br><br>

    <a href="https://alantien.com/a-href-la-gi-tao-lien-ket-bang-the-a-trong-html.html" target="_blank">a href là gì | Tạo liên kết bằng thẻ a href trong html</a>

</body>
</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

<html>
<head>
    <base target="_blank">
</head>
<body>

    <a href="https://alantien.com/web-development/hoc-html">Học HTML</a>

    <br><br>

    <a href="https://alantien.com/web-development/hoc-css" target="_self">Học CSS</a>

</body>
</html>

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.

Học HTML

Học CSS

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é.

<html>
<head>
    <base href="https://alantien.com/wp-content/uploads/2017/01/" target="_blank">
</head>
<body>

    <img src="tao-lien-ket-bang-the-a-trong-html.jpg">

    <br><br><br>

    <a href="https://alantien.com/a-href-la-gi-tao-lien-ket-bang-the-a-trong-html.html">a href là gì | Tạo liên kết bằng thẻ a href trong html</a>

</body>
</html>

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ụ

<head>
    <base href="https://alantien.com/wp-content/uploads/2017/01/" target="_blank">
    <title>Học html căn bản</title>
    ...... 
</head>

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