Tìm hiểu kiến thức cơ bản về cách HTML (<a> ) phần tử siêu kết nối được sử dụng để xác định các liên kết tương tác trên web.
Trong HTML, <a> được sử dụng để xác định các phần tử liên kết / siêu liên kết:
<a>Link element</a>Phần tử liên kết còn được gọi là neo phần tử.
Liên kết vs Siêu liên kết:
- Một liên kết là một địa chỉ chỉ định một vị trí trên Internet.
- Một siêu kết nối là một loại liên kết mà bạn có thể nhấp vào để kích hoạt một thứ gì đó hoặc đi đến một điểm đến, chẳng hạn như một trang web.
Trong cuộc trò chuyện, hầu hết mọi người nói “siêu liên kết” và “liên kết” thay thế cho nhau.
Cách sử dụng phần tử 'a'
<a> phần tử có một số thuộc tính, trong đó thuộc tính quan trọng nhất là href , được sử dụng để cung cấp liên kết (URL) đích khi người dùng nhấp vào nó.
Dưới đây là ví dụ về liên kết đưa bạn đến trang đầu của TechStacker khi bạn nhấp vào liên kết đó:
<a href="https://techstacker.com">Go to TechStacker’s front page.</a>Liên kết ở trên chứa các khối xây dựng sau:
- Mở thẻ liên kết
<a> - Tên thuộc tính:
href - Giá trị thuộc tính:
"https://techstacker.com"(URL liên kết / đích) - Văn bản liên kết
Go to TechStacker’s front page.(hiển thị cho người dùng) - Đóng thẻ liên kết
</a>
Liên kết ở trên trông như thế nào trong đời thực:
Truy cập trang đầu của TechStacker.
URL tuyệt đối so với URL tương đối
Giá trị thuộc tính (liên kết / URL đích) có thể là giá trị tuyệt đối hoặc người thân Đường dẫn URL. Ví dụ trước đó là một URL tuyệt đối:
<a href="https://techstacker.com">Go to TechStacker’s front page.</a>Cái này là một URL tương đối dẫn đến một bài viết trên trang web này:
<a href="/html-tags-vs-html-elements-difference"
>HTML Tags vs. HTML Elements.</a
>Đây là URL tuyệt đối cho cùng một bài viết đó:
<a href="https://techstacker.com/html-tags-vs-html-elements-difference"
>HTML Tags vs. HTML Elements.</a
>Lưu ý cách URL tuyệt đối có nhiều thông tin hơn so với URL tương đối:
- Nó có một giao thức (
https) - Tên miền
techstacker.com - Một slug
/html-tags-vs-html-elements-difference
URL tương đối chỉ có slug.
Vậy khi nào bạn sử dụng cái nào?
- Sử dụng URL tương đối khi bạn liên kết đến nội dung trên trang web của riêng mình.
- Sử dụng URL tuyệt đối khi bạn liên kết đến nội dung trên các trang web khác.
Bạn chỉ có thể sử dụng các URL tương đối để tham chiếu nội dung tồn tại (được lưu trữ) trên cùng một máy chủ chứa trang web của bạn. Nếu không, hãy sử dụng URL tuyệt đối.
Nếu bạn bối rối về sự khác biệt giữa thẻ HTML và phần tử HTML, bạn có thể muốn đọc bài viết đó về Thẻ HTML so với Phần tử HTML.
Được rồi, còn một thuộc tính nữa thường được sử dụng và quan trọng cần biết, đặc biệt là khi nói đến SEO.
Thuộc tính mục tiêu
Một thuộc tính phần tử liên kết hữu ích khác, là target thuộc tính chỉ định nơi mở liên kết khi người dùng nhấp vào nó.
Nếu bạn nhấp vào liên kết này:
<a href="https://techstacker.com/">Link to front page</a>Bạn sẽ được đưa đến trang đầu của TechStacker trong cùng tab / cửa sổ trình duyệt mà bạn đang ở hiện tại. Điều này có nghĩa là 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 đến trang web bạn đã liên kết (mà bạn có thể muốn hoặc có thể không muốn).
Đ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ị).
Sử dụng tiêu đề làm liên kết
Nhiều phần tử HTML có thể được sử dụng làm liên kết, bao gồm cả các tiêu đề. Trên thực tế, điều đó rất phổ biến. Tất cả những gì bạn cần làm là bao bọc phần tử bạn muốn tạo thành một liên kết bên trong các thẻ liên kết <a></a> :
<a href="/html-for-beginners">
<h3>HTML for Beginners</h3>
</a>Sử dụng hình ảnh làm liên kết
Các phần tử liên kết cũng có thể biến hình ảnh thành các liên kết, ví dụ:cho hình thu nhỏ hoặc bài báo hoặc trang sản phẩm. Để làm điều đó, bạn chỉ cần bọc phần tử hình ảnh của mình <img > bên trong phần tử liên kết <a></a> , như thế này:
<a href="/tags/html">
<img src="../../thumbnails/html.png" />
</a>Ví dụ trên sẽ đưa người dùng đến phần bài viết HTML này khi họ nhấp vào hình ảnh.
Nó trông như thế nào trong cuộc sống thực (hãy thử nhấp vào nó):
