Tìm kiếm

HTML/CSS | Thuộc tính target

Học HTML, CSS từ Zero Tới Hero
  • Thuộc tính target
  • Tạo file HTML trên máy tính
    • Hệ điều hành Windows
    • Hệ điều hành MacOS
    • Lưu ý
  • Khi nào nên sử dụng target=“_blank”
  • Vấn đề bảo mật và hiệu năng khi dùng target=“_blank”

Tài nguyên trong bài học:

#Thuộc tính target

Thuộc tính target sử dụng trong thẻ <a> quyết định trang web được mở từ trang hiện tại hoặc mở trong một tab mới của trình duyệt.

Có 2 giá trị được sử dụng phổ biến:

  • _self là mở liên kết từ trang hiện tại (mặc định)
  • _blank là mở liên kết trong tab mới

Ví dụ:

<p>
    <!-- Mở liên kết từ trang hiện tại -->
    <a href="https://www.truongcongly.com">Mở Trương Công Lý từ trang hiện tại</a>
</p>
<p>
    <!-- Mở liên kết trong tab mới -->
    <a href="https://www.truongcongly.com" target="_blank">Mở Trương Công Lý trong tab mới</a>
</p>

Kết quả:

Mở Trương Công Lý từ trang hiện tại

Mở Trương Công Lý trong tab mới

#Tạo file HTML trên máy tính

Phần lớn các liên kết trên khóa học HTML CSS Pro này được xử lý mở trong tab mới, để tránh đưa học viên rời khỏi khóa học này. Cách xử lý này có thể làm trải nghiệm sử dụng thẻ <a> tại đây chưa đúng với cách hoạt động mặc định của nó.

Vì vậy, chúng ta sẽ tạo file HTML trên máy tính và chạy nó trực tiếp với trình duyệt. Tùy vào hệ điều hành của bạn, hãy làm theo các hướng dẫn dưới đây (xem chi tiết trong video bài học).

#1. Hệ điều hành Windows

Với Windows, mở Notepad và dán code HTML sau vào:

<!DOCTYPE html>
<html lang="vi">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Thẻ a trong HTML</title>
    </head>
    <body>
        <p>
            <!-- Mở liên kết từ trang hiện tại -->
            <a href="https://www.truongcongly.com">Mở F8 từ trang hiện tại</a>
        </p>
        <p>
            <!-- Mở liên kết trong tab mới -->
            <a href="https://www.truongcongly.com" target="_blank">Mở F8 trong tab mới</a>
        </p>
    </body>
</html>

Tiếp theo, lưu file với tên và đuôi mở rộng là index.html. Sau khi lưu, nhấn đúp chuột vào file để mở trực tiếp trên trình duyệt.

#Hệ điều hành MacOS

✅ Video hướng dẫn: https://youtu.be/Fp5s43YQHjY

#Lưu ý

Khóa học HTML CSS Pro này có trình viết code tích hợp sẵn (màn thử thách). Trong những chương đầu, hiếm khi bạn phải tự tạo file HTML ở bên ngoài như vậy.

Ý nghĩa của việc làm trên là:

  • Bạn hiểu file HTML có thể tạo với trình soạn thảo cơ bản
  • Bạn hiểu file HTML có thể chạy trực tiếp bởi trình duyệt
  • Bạn hiểu thẻ <a> hoạt động mặc định như thế nào

Từ sau bài học này cho tới chương Cài đặt và sử dụng VS Code phần lớn thời gian chúng ta sẽ sử dụng luôn trang web này mà không cần tạo các file HTML bên ngoài.

#Khi nào nên sử dụng target=“_blank”

Trường hợp phổ biến sử dụng target="_blank" để mở liên kết trong tab mới là:

  • Không muốn trang hiện tại bị chuyển hướng đi trang khác
    • Người dùng đang nhập liệu, ví dụ như đang nhập thông tin mua hàng
    • Khi liên kết tới một trang web khác, không cùng tên miền với trang hiện tại
  • Khi muốn giảm tỉ lệ thoát trang và giữ chân người dùng lâu hơn

Trường hợp sử dụng target="_blank" hiệu quả nhất đó là khi tránh làm mất dữ liệu của người dùng hoặc mở liên kết khác tên miền.

Nếu đơn thuần nghĩ việc mở tab mới là để giữ chân người dùng, điều này có thể phản tác dụng. Một bộ phận người dùng cảm thấy “khó chịu” khi trang web mở mọi liên kết trong tab mới.

Phần lớn người dùng có thể chủ động mở một liên kết trong tab mới bằng một trong số những cách sau:

  • Nhấn chuột phải vào liên kết, chọn “Mở trong tab mới”
  • Nhấn phím Ctrl/Cmd và nhấn chuột vào liên kết
  • Nhấn con lăn trên chuột máy tính

#Vấn đề bảo mật và hiệu năng khi dùng target=“_blank”

Khi sử dụng target="_blank" có 2 vấn đề về bảo mật và hiệu suất:

  • Tại trang đích có thể sử dụng window.opener để kiểm soát được cửa sổ trang gốc của chúng ta, ví dụ chạy window.opener.location.href = 'https://www.truongcongly.com/' là có thể chuyển hướng cửa sổ gốc tới https://truongcongly.com/. Hãy tưởng tượng bạn bị chuyển tới một URL có nội dung “độc hại” như các trang giả mạo để đánh cắp tài khoản ngân hàng, thông tin cá nhân, v.v.
  • Trang đích chạy cùng tiến trình xử lý Javascript với trang gốc, nếu trang đích sử dụng nhiều logic “nặng” hoặc tối ưu chưa tốt về mặt hiệu năng có thể làm ảnh hưởng tới trang web của bạn đang được mở tại cửa sổ gốc.

Để khắc phục vấn đề trên, bạn hãy thêm rel="noopener" vào toàn bộ các thẻ a có target="_blank" nhé.

Ví dụ:

<a href="https://www.truongcongly.com" target="_blank" rel="noopener">
    Học lập trình tại F8
</a>

Tham khảo thêm: Tại sao nên thêm rel=“noopener” khi sử dụng target=“_blank”?

Tóm tắt

  • Thuộc tính target sử dụng trong thẻ <a> quyết định trang web được mở từ trang hiện tại hoặc mở trong một tab mới của trình duyệt.
  • Có 2 giá trị được sử dụng phổ biến là _self (mở liên kết từ trang hiện tại - mặc định), _blank (mở liên kết trong tab mới).
  • File HTML có thể tạo với trình soạn thảo cơ bản có sẵn trên máy tính như Notepad, và có thể chạy trực tiếp file HTML trên trình duyệt.
  • Trường hợp sử dụng target="_blank" hiệu quả nhất đó là khi tránh làm mất dữ liệu của người dùng hoặc mở liên kết khác tên miền.
  • Để tối ưu hơn về hiệu năng và bảo mật, hãy thêm rel="noopener" vào toàn bộ các thẻ a có target="_blank".
Tags

Bạn có thể thích những bài đăng này

Nhận xét

Mới hơn Cũ hơn