Liên kết trong HTML5

Trong hướng dẫn này, bạn sẽ học cách tạo liên kết đến các trang khác bằng HTML.

Tạo liên kết trong HTML

Liên kết (link) hoặc siêu liên kết (hyperlink) là một kết nối từ tài nguyên web này sang tài nguyên web khác. Liên kết cho phép người dùng di chuyển liên tục từ trang này sang trang khác, trên bất kỳ máy chủ nào ở bất kỳ đâu trên thế giới.

Một liên kết có hai đầu, được gọi là neo. Liên kết bắt đầu từ điểm neo nguồn và trỏ đến điểm neo đích, có thể là bất kỳ tài nguyên web nào, ví dụ: hình ảnh, âm thanh hoặc video, file PDF, tài liệu HTML hoặc một phần tử trong chính tài liệu đó, v.v.

Theo mặc định, các liên kết sẽ xuất hiện như sau trong hầu hết các trình duyệt:

• Một liên kết không được truy cập được gạch dưới và màu xanh lam.
• Một liên kết đã truy cập được gạch chân và có màu tím.
• Một liên kết đang hoạt động được gạch chân và có màu đỏ.

Tuy nhiên, bạn có thể ghi đè điều này bằng cách sử dụng CSS. Tìm hiểu thêm về tạo kiểu cho liên kết trong CSS.

Tạo liên kết HTML

Các liên kết được định nghĩa trong HTML bằng cách sử dụng thẻ <a>.

Một liên kết hoặc siêu liên kết có thể là một từ, nhóm từ hoặc hình ảnh.

<a href="url">Link text</a>

Bất kỳ thứ gì giữa thẻ mở <a> và thẻ đóng </a> đều trở thành một phần của liên kết mà người dùng nhìn thấy và nhấp vào trong trình duyệt. Dưới đây là một số ví dụ về các liên kết:

<a href="https://www.google.com/">Google Search</a>
<a href="https://www.tutorialrepublic.com/">Tutorial Republic</a>
<a href="images/kites.jpg">
    <img src="kites-thumb.jpg" alt="kites">
</a>

Thuộc tính href xác định đích đến của liên kết. Giá trị của nó có thể là một URL tuyệt đối hoặc tương đối.

Một URL tuyệt đối là URL mà bao gồm tất cả các phần của định dạng URL, chẳng hạn như giao thức, tên máy chủ, và đường dẫn của tài liệu, ví dụ https://www.google.com/, https://www.example.com/form.php, v.v. Trong khi, URL tương dối là đường dẫn không có giao thức, tên máy chủ. ví dụ: contact.html, images/smiley.png, v.v.

Thuộc tính target của liên kết

Thuộc tính target cho trình duyệt biết nơi để mở tài liệu được liên kết. Có bốn target và tên mỗi target bắt đầu bằng một ký tự gạch dưới (_):

• _blank – Mở tài liệu được liên kết trong một cửa sổ hoặc tab mới.
• _parent – Mở tài liệu được liên kết trong cửa sổ cha.
• _self – Mở tài liệu được liên kết trong cùng cửa sổ hoặc tab với tài liệu nguồn. Đây là giá trị mặc định, do đó không cần thiết phải chỉ định rõ ràng giá trị này.
• _top – Mở tài liệu được liên kết trong cửa sổ trình duyệt đầy đủ.

Hãy thử ví dụ sau để hiểu cơ bản target của liên kết hoạt động như thế nào:

<a href="/about-us.php" target="_top">About Us</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
    <img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>

Mẹo: Nếu trang web của bạn được đặt bên trong iframe, bạn có thể sử dụng target="_top" cho liên kết để thoát ra khỏi iframe và hiển thị trang mục tiêu trong toàn bộ cửa sổ trình duyệt.

Tạo neo đánh dấu

Bạn cũng có thể tạo neo đánh dấu để cho phép người dùng chuyển đến một phần cụ thể của trang web. Neo đánh dấu trang đặc biệt hữu ích nếu bạn có một trang web rất dài.

Tạo neo đánh dấu trang là một quy trình gồm hai bước: trước tiên hãy thêm thuộc tính id vào phần tử mà bạn muốn chuyển đến, sau đó sử dụng giá trị thuộc tính id đó với dấu thăng (#) ở trước làm giá trị thuộc tính href của thẻ <a>, như được hiển thị trong ví dụ sau :

<a href="#sectionA">Jump to Section A</a>
<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Mẹo: Bạn thậm chí có thể chuyển đến một phần của trang web khác bằng cách chỉ định URL của trang đó cùng với neo đánh dấu trang (ví dụ #elementId) trong thuộc tính href, chẳng hạn <a href="mypage.html#topicA">Go to TopicA</a>.

Tạo liên kết tải xuống

Bạn cũng có thể tạo liên kết tải xuống tệp giống hệt như cách tạo liên kết thông thường. Chỉ cần trỏ URL đích đến tệp bạn muốn tải xuống.

Trong ví dụ sau, chúng tôi đã tạo các liên kết tải xuống cho các tệp ZIP, PDF và JPG.

<a href="downloads/test.zip">Download Zip file</a>
<a href="downloads/masters.pdf">Download PDF file</a>
<a href="downloads/sample.jpg">Download Image file</a>

Lưu ý: Khi bạn nhấp vào liên kết trỏ đến tệp PDF hoặc tệp hình ảnh, tệp sẽ không được tải trực tiếp xuống ổ cứng của bạn. Nó sẽ chỉ mở tệp trong trình duyệt web của bạn. Từ đó, bạn có thể lưu hoặc tải nó về ổ cứng của mình để sử dụng thường xuyên.