Hyperlink HTML là gì? Các lỗi thường gặp khi sử dụng

Hyperlink HTML là một trong những tính năng cơ bản và quan trọng nhất cho sự liên kết, tương tác giữa các trang web và các loại nội dung với nhau.

Để tạo ra sự liên kết này, ta cần có một phần tử HTML đặc biệt, đó là Hyperlink HTML. Hyperlink HTML là gì? Làm thế nào để tạo và sử dụng Hyperlink HTML? Các lỗi thường gặp khi sử dụng Hyperlink HTML và cách khắc phục chúng là gì? Bài viết này sẽ giải đáp cho bạn những câu hỏi này.

Hyperlink HTML là gì?

Hyperlink HTML là một phần tử trong ngôn ngữ đánh dấu siêu văn bản (HTML) cho phép người dùng chuyển từ một tài nguyên đến một tài nguyên khác trên web. Hyperlink HTML có thể được nhận biết bởi màu sắc, gạch chân hoặc hiệu ứng khi di chuột qua. Hyperlink HTML là một trong những tính năng cơ bản và quan trọng nhất của web, vì nó tạo ra sự liên kết và tương tác giữa các trang web và các loại nội dung khác nhau.

Phân loại các Hyperlink

Hyperlink HTML có thể được phân loại theo nhiều cách, tùy thuộc vào mục đích và cách sử dụng. Một số phân loại phổ biến nhất là:

Theo đối tượng liên kết: Hyperlink HTML có thể liên kết đến các đối tượng khác nhau trên web, như văn bản, hình ảnh, biểu tượng, video, âm thanh, file tải về hoặc các phần tử hiển thị khác.

Theo đích đến: Hyperlink HTML có thể liên kết đến các đích đến khác nhau trên web, như một trang web khác, một phần cụ thể của cùng một trang web, một email, một số điện thoại hoặc một ứng dụng.

Theo hành động: Hyperlink HTML có thể gây ra các hành động khác nhau khi người dùng nhấp vào chúng, như mở một tab mới, tải về một file, gửi một email, gọi điện thoại hoặc chạy một ứng dụng.

Hướng dẫn tạo Hyperlink HTML?

Sử dụng thẻ với thẻ <a> với thuộc tính href

Để tạo một hyperlink HTML, ta sử dụng thẻ <a> (anchor) với thuộc tính href (hypertext reference). Thuộc tính href chỉ định địa chỉ URL (uniform resource locator) của đối tượng hoặc đích đến mà hyperlink liên kết đến. Cú pháp của thẻ <a> với thuộc tính href như sau:

<a href=“địa chỉ URL”>nội dung liên kết</a>

Trong đó:

Địa chỉ URL là đường dẫn của đối tượng hoặc đích đến mà hyperlink liên kết đến. Địa chỉ URL có thể là tuyệt đối (absolute) hoặc tương đối (relative).

Địa chỉ URL tuyệt đối là đường dẫn hoàn chỉnh của đối tượng hoặc đích đến trên web, bao gồm giao thức (protocol), máy chủ (server), thư mục (directory) và tên file. Ví dụ: https://www.mdigi.vn/html/html_links.asp. Địa chỉ URL tương đối là đường dẫn ngắn gọn của đối tượng hoặc đích đến trong cùng một thư mục hoặc cùng một máy chủ với trang web hiện tại. Ví dụ: /html_links.asp.

Nội dung liên kết là phần hiển thị cho người dùng nhìn thấy và nhấp vào. Nội dung liên kết có thể là văn bản, hình ảnh, biểu tượng hoặc các phần tử hiển thị khác.

Các ví dụ về Hyperlink như văn bản, hình ảnh, biểu tượng hoặc các phần tử hiển thị khác

• Hyperlink văn bản: Đây là loại hyperlink phổ biến nhất, trong đó nội dung liên kết là một đoạn văn bản. Ví dụ:

<a href=“https://www.w3schools.com/html/html_links.asp”>Học cách tạo hyperlink HTML tại W3Schools</a>

• Hyperlink hình ảnh: Đây là loại hyperlink trong đó nội dung liên kết là một hình ảnh. Ví dụ:

<a href=“https://www.w3schools.com/html/html_links.asp”><img src=“w3schools_logo.png” alt=“W3Schools Logo”></a>

• Hyperlink biểu tượng: Đây là loại hyperlink trong đó nội dung liên kết là một biểu tượng, thường được sử dụng để tạo menu điều hướng hoặc các nút chức năng. Ví dụ:

<a href=“https://www.facebook.com”><i class=“fab fa-facebook-f”></i></a>

• Hyperlink các phần tử hiển thị khác: Đây là loại hyperlink trong đó nội dung liên kết là các phần tử hiển thị khác, như button, list, table, form hoặc các thẻ HTML khác. Ví dụ:

<a href=“https://www.w3schools.com/html/html_links.asp”><button>Click here</button></a>

Cách sử dụng các thuộc tính khác của thẻ <a> , như target, title, download, rel

Ngoài thuộc tính href, thẻ <a> còn có một số thuộc tính khác để tùy chỉnh hành vi và hiển thị của hyperlink HTML. Một số thuộc tính phổ biến nhất là:

Thuộc tính target: Thuộc tính này chỉ định cách mở đích đến của hyperlink, có thể là trong cùng tab hiện tại (_self), trong một tab mới (_blank), trong một frame hoặc window đã định danh (_parent, _top) hoặc trong một frame hoặc window mới có tên (_name). Cú pháp của thuộc tính target như sau:

<a href=“địa chỉ URL” target=“_self | _blank | _parent | _top | _name”>nội dung liên kết</a>

Ví dụ:

<a href=“https://www.w3schools.com/html/html_links.asp” target=“_blank”>Mở trang W3Schools trong tab mới</a>

Thuộc tính title: Thuộc tính này chỉ định tiêu đề của hyperlink, được hiển thị khi người dùng di chuột qua nội dung liên kết. Tiêu đề của hyperlink có thể giúp người dùng biết thêm thông tin về đích đến hoặc chức năng của hyperlink. Cú pháp của thuộc tính title như sau:

<a href=“địa chỉ URL” title=“tiêu đề”>nội dung liên kết</a>

Ví dụ:

<a href=“https://www.w3schools.com/html/html_links.asp” title=“Học HTML Links tại W3Schools”>Học HTML Links</a>

Thuộc tính download: Thuộc tính này chỉ định rằng đối tượng được liên kết sẽ được tải về khi người dùng nhấp vào hyperlink. Thuộc tính này có thể có giá trị là tên file muốn lưu khi tải về, hoặc để trống để lấy tên file mặc định từ địa chỉ URL. Cú pháp của thuộc tính download như sau:

<a href=“địa chỉ URL” download=“tên file | trống”>nội dung liên kết</a>

Ví dụ:

<a href=“w3schools_logo.png” download=“logo.png”>Tải về logo của W3Schools</a>

Thuộc tính rel: Thuộc tính này chỉ định mối quan hệ giữa trang web hiện tại và đích đến của hyperlink. Thuộc tính này có thể có nhiều giá trị khác nhau, như alternate, author, bookmark, help, license, next, prev, search, tag… Một số giá trị phổ biến nhất là:

• rel=“nofollow”: Chỉ định rằng trang web hiện tại không chịu trách nhiệm về nội dung của đích đến, và không muốn các công cụ tìm kiếm theo dõi hyperlink này.
• rel=“noopener”: Chỉ định rằng khi mở đích đến trong một tab mới, tab mới này sẽ không có quyền truy cập vào tab hiện tại thông qua window.opener.
• rel=“noreferrer”: Chỉ định rằng khi mở đích đến trong một tab mới, tab mới này sẽ không gửi thông tin tham chiếu (referrer) cho máy chủ của đích đến.

Cú pháp của thuộc tính rel như sau:

<a href=“địa chỉ URL” rel=“giá trị”>nội dung liên kết</a>

Ví dụ:

<a href=“https://www.w3schools.com/html/html_links.asp” rel=“nofollow noopener noreferrer”>Truy cập trang W3Schools với các thuộc tính rel</a>

Cách sử dụng Hyperlink HTML

Hyperlink HTML có nhiều cách sử dụng khác nhau, tùy thuộc vào mục đích và nhu cầu của người dùng. Một số cách sử dụng phổ biến nhất là:

Liên kết đến các tài nguyên không phải HTML: Đây là cách sử dụng hyperlink để liên kết đến các loại tài nguyên khác nhau trên web, không chỉ là các trang web HTML. Các loại tài nguyên này có thể là file PDF, file Word, file Excel, file PowerPoint, file Zip, file MP3, file MP4… Khi liên kết đến các loại tài nguyên này, ta nên để lại biển chỉ dẫn rõ ràng cho người dùng biết loại file và kích thước của nó. Ví dụ:

<a href=“example.pdf” download>Download file PDF (2 MB)</a>

Tạo menu điều hướng bằng cách gắn HTML link a: Đây là cách sử dụng hyperlink để tạo ra các menu điều hướng cho trang web. Menu điều hướng là một danh sách các hyperlink được sắp xếp theo một thứ tự logic hoặc phân cấp để giúp người dùng dễ dàng di chuyển giữa các trang web hoặc các phần của trang web. Để tạo menu điều hướng bằng hyperlink HTML, ta có thể sử dụng các thẻ HTML khác nhau để bao bọc và hiển thị danh sách hyperlink, như <ul>, <ol>, <nav>, <div>… Ví dụ:

<nav> <ul> <li><a href=“home.html”>Home</a></li> <li><a href=“about.html”>About</a></li> <li><a href=“contact.html”>Contact</a></li> </ul> </nav>

Cách Hyperlink đến một trang khác trong cùng một trang website: Đây là cách sử dụng hyperlink để liên kết đến các trang khác trong cùng một trang web. Để làm được điều này, ta có thể sử dụng địa chỉ URL tương đối để chỉ định đường dẫn của trang đích trong cùng một thư mục hoặc cùng một máy chủ với trang hiện tại. Ví dụ:

<a href=“about.html”>About us</a>

Cách tạo Hyperlink đến một phần cụ thể của trang web: Đây là cách sử dụng hyperlink để liên kết đến một phần cụ thể của trang web, thay vì toàn bộ trang web. Để làm được điều này, ta có thể sử dụng ký hiệu # (hash) để chỉ định id của phần tử HTML mà ta muốn liên kết đến. Ví dụ:

<a href=“#section1”>Go to section 1</a> … <h2 id=“section1”>Section 1</h2> <p>This is section 1 of the page.</p>

Cách mở một Hyperlink trong một tab mới: Đây là cách sử dụng hyperlink để mở đích đến của hyperlink trong một tab mới, thay vì tab hiện tại. Để làm được điều này, ta có thể sử dụng thuộc tính target với giá trị _blank. Ví dụ:

<a href=“https://www.w3schools.com/html/html_links.asp” target=“_blank”>Mở trang W3Schools trong tab mới</a>

Cách tạo Hyperlink Email: Đây là cách sử dụng hyperlink để liên kết đến một email, để khi người dùng nhấp vào hyperlink, họ sẽ được chuyển đến ứng dụng email mặc định của họ với email đã được điền sẵn. Để làm được điều này, ta có thể sử dụng giao thức mailto: để chỉ định địa chỉ email của người nhận. Ta cũng có thể thêm các thông tin khác như tiêu đề (subject), nội dung (body), người gửi kèm (cc), người gửi ẩn (bcc) bằng cách sử dụng các tham số sau dấu ?. Ví dụ:

<a href=“mailto:example@example.com?subject=Hello&body=This is a test email&cc=another@example.com&bcc=secret@example.com”>Send an email to example@example.com</a>

Cách kiểm tra và sửa chữa Hyperlink bị hỏng

Hyperlink bị hỏng là hyperlink không hoạt động như mong muốn, không liên kết đến đích đến chính xác hoặc không hiển thị nội dung liên kết. Hyperlink bị hỏng có thể gây ra những phiền toái cho người dùng và ảnh hưởng đến uy tín và chất lượng của trang web. Do đó, ta nên kiểm tra và sửa chữa hyperlink bị hỏng một cách kịp thời.

Công cụ kiểm tra Hyperlink trực tuyến hoặc offline

Để kiểm tra hyperlink bị hỏng, ta có thể sử dụng các công cụ kiểm tra hyperlink trực tuyến hoặc offline. Các công cụ kiểm tra hyperlink trực tuyến là các trang web hoặc ứng dụng cho phép ta nhập vào địa chỉ URL của trang web muốn kiểm tra, sau đó quét và báo cáo các hyperlink bị hỏng trong trang web đó. Một số công cụ kiểm tra hyperlink trực tuyến phổ biến nhất là:

W3C Link Checker: Đây là công cụ kiểm tra hyperlink do Tổ chức Web Tiêu chuẩn Thế giới (W3C) cung cấp. Công cụ này cho phép ta nhập vào địa chỉ URL của trang web muốn kiểm tra, sau đó quét và báo cáo các hyperlink bị hỏng trong trang web đó. Công cụ này cũng cho phép ta tùy chỉnh một số thiết lập như độ sâu quét, thời gian chờ, loại bỏ các URL trùng lặp… Địa chỉ của công cụ này là: https://validator.w3.org/checklink

Broken Link Checker: Đây là một trang web cho phép ta kiểm tra các hyperlink bị hỏng trong một trang web hoặc một blog. Công cụ này quét và báo cáo các hyperlink bị hỏng theo các nhóm như liên kết nội bộ, liên kết ngoại bộ, liên kết ảnh… Công cụ này cũng cho phép ta lọc các URL theo các tiêu chí như loại file, từ khóa, kích thước… Địa chỉ của công cụ này là: https://www.brokenlinkcheck.com/

Xenu’s Link Sleuth: Đây là một ứng dụng miễn phí cho Windows cho phép ta kiểm tra các hyperlink bị hỏng trong một trang web hoặc một danh sách URL. Công cụ này quét và báo cáo các hyperlink bị hỏng theo các thuộc tính như địa chỉ URL, mã lỗi, tiêu đề, kích thước… Công cụ này cũng cho phép ta xuất kết quả kiểm tra ra các định dạng khác nhau như HTML, CSV, XML… Địa chỉ tải về của công cụ này là: http://home.snafu.de/tilman/xenulink.html

Các lỗi thường gặp khi sử dụng Hyperlink

Có nhiều nguyên nhân có thể gây ra lỗi khi sử dụng Hyperlink HTML, nhưng một số nguyên nhân phổ biến nhất là:

Lỗi định dạng: Đây là lỗi khi ta viết sai cú pháp của thẻ <a> hoặc các thuộc tính của nó. Ví dụ: quên đóng dấu ngoặc kép cho giá trị của thuộc tính href, quên đóng thẻ </a>, viết sai tên thuộc tính hoặc giá trị của nó… Lỗi định dạng có thể gây ra hiện tượng hyperlink không hiển thị hoặc không hoạt động như mong muốn. Để khắc phục lỗi này, ta nên kiểm tra lại cú pháp của thẻ <a> và các thuộc tính của nó, và sửa lại nếu có sai sót. Ta có thể sử dụng các công cụ kiểm tra lỗi HTML như W3C HTML Validator để hỗ trợ việc này.

Lỗi liên kết: Đây là lỗi khi ta liên kết đến một đối tượng hoặc đích đến không tồn tại hoặc không có quyền truy cập. Ví dụ: nhập sai địa chỉ URL, liên kết đến một file đã bị xóa hoặc di chuyển, liên kết đến một email không hợp lệ, liên kết đến một trang web yêu cầu xác thực… Lỗi liên kết có thể gây ra hiện tượng hyperlink không mở được đối tượng hoặc đích đến, hoặc gặp phải các lỗi HTTP như 404 Not Found, 401 Unauthorized… Để khắc phục lỗi này, ta nên kiểm tra lại địa chỉ URL và quyền truy cập của đối tượng hoặc đích đến mà hyperlink liên kết đến, và sửa lại nếu có sai sót. Ta có thể sử dụng các công cụ kiểm tra hyperlink bị hỏng như W3C Link Checker, Broken Link Checker hay Xenu’s Link Sleuth để hỗ trợ việc này.

Lỗi hiển thị: Đây là lỗi khi ta thiết kế hyperlink không phù hợp với mục tiêu và người dùng của trang web. Ví dụ: sử dụng màu sắc, gạch chân hoặc hiệu ứng không rõ ràng để phân biệt hyperlink với văn bản thường, sử dụng nội dung liên kết không rõ nghĩa hoặc không liên quan đến đích đến, sử dụng hyperlink quá nhiều hoặc quá ít trong một trang web… Lỗi hiển thị có thể gây ra hiện tượng người dùng khó nhận biết hoặc khó sử dụng hyperlink, hoặc bị nhầm lẫn về mục đích và chức năng của hyperlink. Để khắc phục lỗi này, ta nên thiết kế hyperlink theo các nguyên tắc thiết kế web chung, như:

• Sử dụng màu sắc, gạch chân hoặc hiệu ứng khác biệt để làm nổi bật hyperlink so với văn bản thường.
• Sử dụng nội dung liên kết rõ ràng và liên quan đến đích đến của hyperlink, tránh sử dụng các từ chung chung như “click here”, “read more”…
• Sử dụng hyperlink một cách có chọn lọc và có mục đích, tránh sử dụng quá nhiều hoặc quá ít hyperlink trong một trang web.
• Sử dụng các thuộc tính title, target, download, rel… để cung cấp thêm thông tin và tùy chỉnh hành vi của hyperlink cho người dùng.

Câu hỏi thường gặp

Tổng quan

Hyperlink HTML là một phần tử quan trọng trong ngôn ngữ HTML, cho phép người dùng chuyển từ một tài nguyên đến một tài nguyên khác trên web. Để tạo hyperlink HTML, ta sử dụng thẻ <a> với thuộc tính href và các thuộc tính khác để tùy chỉnh hành vi và hiển thị của hyperlink. Hyperlink HTML có nhiều cách sử dụng khác nhau, tùy thuộc vào mục đích và nhu cầu của người dùng. Tuy nhiên, ta cũng nên kiểm tra và sửa chữa các hyperlink bị hỏng để tránh gây ra những phiền toái cho người dùng và ảnh hưởng đến uy tín và chất lượng của trang web.