Thuộc tính mục tiêu
target thuộc tính chỉ định nơi để mở liên kết khi người dùng nhấp vào liên kết đó.
Nếu bạn nhấp vào liên kết bên dưới, bạn sẽ được đưa đến trang đầu của TechStacker trong cùng một tab / cửa sổ trình duyệt mà bạn đang ở hiện tại:
<a href="https://techstacker.com/">Link to front page</a>Vì vậy, nếu bạn liên kết đến một trang web khác, người dùng sẽ được chuyển khỏi trang web của bạn và chuyển sang trang web bạn đã liên kết. Bạn có thể muốn hoặc không muốn điều này.
Điều này xảy ra vì theo mặc định <a> các phần tử có target thuộc tính có giá trị _self - có nghĩa là nó mở liên kết trong cùng một cửa sổ mà người dùng đang ở.
Vì vậy, phần tử liên kết này:
<a href="https://techstacker.com/"></a>Được đọc bởi máy tính / trình duyệt như thế này:
<a href="https://techstacker.com/" target="_self"></a>Điều này có thể gây nhầm lẫn, bởi vì bạn không thể thấy điều đó (nhưng bây giờ bạn biết).
Nếu bạn muốn các liên kết của mình mở trong tab trình duyệt mới, bạn có thể ghi đè _self mặc định giá trị bằng _blank giá trị:
<a href="https://youtube.com" target="_blank" rel="noopener"
>If you click this, the YouTube website opens in a new tab</a
>Khi nào thì sử dụng cái nào?
Câu trả lời đơn giản là:nếu bạn không muốn chuyển người dùng khỏi trang web của mình, ví dụ:cho mục đích SEO, sau đó sử dụng target="_blank" .
Nếu không, đừng làm gì cả và các liên kết của bạn sẽ mặc định mở trong cùng một cửa sổ trình duyệt (thông qua _self giá trị).
Quan trọng: khi bạn sử dụng target="_blank" bạn có thể nên thêm noopener cùng với nó vì lý do bảo mật. Ít nhất là khi bạn liên kết đến các trang web bên ngoài. Tìm hiểu thêm về thuộc tính noopener.