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

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

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

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

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

  • Dịch Vụ

    Khóa Học Viết Bài Chuẩn SEO Tại Nhà TPHCM

    Viết 5 bài chuẩn seo với hơn 1000 từ trong một...

    Khóa học thiết kế website WordPress tại nhà

    Khóa học thiết kế website WordPress tại nhà dành cho những...

    Thiết kế website wordpress giá rẻ: dịch vụ chuyên nghiệp – chuẩn #1

    Bạn đang muốn tìm dịch vụ thiết kế website wordpress giá...

  • Tự học wordpress

    Tạo nút gọi điện thoại đẹp đơn giản với Plugin Call Now Animate

    Hôm nay mình sẽ hướng dẫn các bạn tạo nút gọi...

    Cài đặt wordpress trên xampp bảo mật nhất

    Cài đặt wordpress trên xampp rất đơn giản những hôm nay...

    Hướng dẫn tạo form liên hệ với Contact Form 7 đơn giản

    Với form liên hệ đẹp sẽ giúp website của bạn trở...

    Plugin kk star ratings tạo đánh giá 5 sao trên kết quả tìm kiếm google

    Chắc nhiều bạn thắc mắc tại sao website của người khác...

    Sửa lỗi Briefly Unavailable for Scheduled Maintenance trên WordPress

    Hiện nay rất nhiều bạn đang gặp lỗi “Briefly Unavailable for...

  • Học HTML Căn Bản

    Tag basefont là gì | thẻ basefont trong html

    Tag basefont là gì Tag basefont là một thẻ html căn...

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

    Tag base là gì Tag Base là một thẻ html được...

    Thẻ định dạng font chữ và văn bản trong html 5

    Trong bài này mình sẽ tổng hợp các thẻ định dạng font...

    Tag audio là gì | Thẻ audio chèn âm thanh trong html 5

    Tag audio là gì Tag audio là một tag đặc biệt...

    Tag aside là gì | Ý nghĩa và cách sử dụng thẻ aside trong html 5

    Thẻ tag aside là gì? Tag aside là một thẻ tag...

    Tag article là gì | Cách sử dụng thẻ article trong html 5

    Tag article là gì Tag article là một thẻ mới trong html 5...

    Tag area là gì | Cách sử dụng thẻ Area trong html

    Tag area là gì Tag area là một thẻ html xác...

    Tag Address là gì | Cách sử dụng thẻ Address trong HTML

    Tag Address là gì Tag Address là một thẻ html được...

    Tag acronym là gì | cách sử dụng tag acronym trong html

    Tag Acronym là gì Tag Acronym là một tag html được...

  • Key đang SEO Top