Có rất nhiều điều cần biết về các link và button trong HTML. Có triển khai đánh dấu và các thuộc tính liên quan, các phương pháp hay nhất về tạo kiểu, những điều cần tránh và các điểm anh em họ thậm chí nhiều sắc thái hơn của liên kết: button và đầu vào giống button.
Chúng ta hãy xem xét toàn bộ thế giới của các link và button, và tất cả những điều cần cân nhắc ở các lớp HTML, CSS, JavaScript, thiết kế và khả năng truy cập đi kèm với chúng. Có rất nhiều cạm bẫy và những hành vi xấu cần tránh trên đường đi. Bằng cách bao gồm nó, chúng tôi sẽ có một triển khai UX tốt hoàn chỉnh của cả hai yếu tố.

LINK

Liên kết là một trong những khối xây dựng cơ bản nhất, nhưng rất cơ bản và nền tảng của web. Nhấp vào một liên kết và bạn chuyển đến một trang khác hoặc được chuyển đến một nơi khác trong cùng một trang.

Triển khai HTML

Một liên kết cơ bản

<a href="https://www.phucuongds.com">phucuongds</a>
Đó là liên kết đến URL "đủ điều kiện" hoặc "tuyệt đối"

Một liên kết tương đối

Bạn cũng có thể liên kết “tương đối”. 
<!-- Useful in navigation, but be careful in content that may travel elsewhere (e.g. RSS) -->
<a href="/pages/about.html">About</a>
Điều đó có thể hữu ích, chẳng hạn như trong quá trình phát triển mà tên miền có thể khác với nơi sản xuất, nhưng bạn vẫn muốn có thể nhấp vào liên kết. URL tương đối hữu ích nhất cho những thứ như điều hướng, nhưng hãy cẩn thận khi sử dụng chúng trong nội dung - như các bài đăng trên blog - nơi nội dung đó có thể được đọc bên ngoài trang web, như trong ứng dụng hoặc nguồn cấp dữ liệu RSS.

Một liên kết nhảy

Các liên kết cũng có thể là "liên kết hash" hoặc "liên kết jump" bằng cách bắt đầu bằng #: 
<a href="#section-2">Section Two</a>
<!-- will jump to... -->
<section id="section-2"></section>
Nhấp vào liên kết đó sẽ “nhảy” (cuộn) đến phần tử đầu tiên trong DOM có ID phù hợp, giống như phần tử phần ở trên.
Việc nhìn thấy liên kết “Quay lại đầu trang” trên các trang web là một điều khá phổ biến đối với giao diện người dùng / người dùng, đặc biệt là nơi các điều khiển điều hướng quan trọng ở trên cùng nhưng có khá nhiều nội dung để cuộn (hoặc điều hướng) qua. Để tạo liên kết nhảy, hãy liên kết đến ID của một phần tử nằm ở đầu trang mà bạn nên gửi tiêu điểm trở lại.
<a href="#top-of-page">Back to Top</a>
Liên kết nhảy đôi khi cũng được sử dụng để liên kết đến các phần tử anchor (<a>) khác không có thuộc tính href. Những liên kết đó được gọi là liên kết "placeholder": 
<a id="section-2"></a>
<h3>Section 2</h3>
Có những cân nhắc về khả năng tiếp cận của những điều này, nhưng nhìn chung chúng có thể chấp nhận được.

Liên kết bị vô hiệu hóa

Một liên kết không có hrefthuộc tính là cách thực tế duy nhất để vô hiệu hóa một liên kết. Tại sao lại vô hiệu hóa một liên kết? Có lẽ đó là một liên kết chỉ hoạt động sau khi đăng nhập hoặc đăng ký. 
a:not([href]) {
  /* style a "disabled" link */
}
Khi một liên kết không có href, nó không có vai trò, không có khả năng tập trung và không có sự kiện bàn phím. Đây là cố ý. Bạn có thể nghĩ về nó như một <span>.

Bạn có cần liên kết để mở trong cửa sổ hoặc tab mới không?

Bạn có thể sử dụng thuộc tính target cho điều đó, nhưng nó thực sự không được khuyến khích. 
<a href="https://www.phucuongds.com/" target="_blank" rel="noopener noreferrer">phucuongds</a>
Một chút khiến nó hoạt động là target = "_blank", nhưng hãy lưu ý đến các thuộc tính rel và giá trị bổ sung ở đó để làm cho nó an toàn hơn và nhanh hơn.
Mở liên kết trong các tab mới là một cuộc thảo luận chính về UX. Tổng kết:
  • Không sử dụng nó:
    • Bởi vì cá nhân bạn hoặc khách hàng của bạn thích nó.
    • Bởi vì bạn đang cố gắng tăng cường chỉ số thời gian của mình trên trang web.
    • Bởi vì bạn đang phân biệt giữa các loại nội dung hoặc liên kết nội bộ và bên ngoài.
    • Bởi vì đó là cách của bạn để đối phó với sự phức tạp khi cuộn vô hạn.
  • Sử dụng nó:
    • Bởi vì người dùng đang làm điều gì đó trên trang hiện tại, chẳng hạn như chủ động phát phương tiện hoặc có công việc chưa được lưu.
    • Bạn có một số lý do kỹ thuật khó hiểu mà bạn buộc phải làm vậy (ngay cả khi đó bạn vẫn có thể là quy tắc, không phải là ngoại lệ).

Cần liên kết để kích hoạt tải xuống?

Thuộc tính download trên một liên kết sẽ hướng dẫn trình duyệt tải xuống tệp được liên kết thay vì mở nó trong trang/tab hiện tại. Đó là một liên lạc UX tuyệt vời. 
<a href="/files/file.pdf" download>Download PDF</a>

Thuộc tính rel

Thuộc tính này dành cho mối quan hệ của liên kết với mục tiêu.
Thuộc reltính cũng thường được sử dụng trên <link> (không được sử dụng để tạo siêu liên kết, nhưng cho những thứ như bao gồm CSS và tải trước). Chúng tôi không bao gồm rel các giá trị cho <link> ở đây, chỉ là các liên kết neo.
Dưới đây là một số ví dụ cơ bản: 
<a href="/page/3" rel="next">Next</a>
<a href="/page/1" rel="prev">Previous</a>
<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">cc by 2.0</a>
<a href="/topics/" rel="directory">All Topics</a>
  • rel="alternate": Phiên bản thay thế của tài liệu.
  • rel="author": Tác giả của tài liệu.
  • rel="help": Nguồn trợ giúp về tài liệu.
  • rel="license": Giấy phép và thông tin pháp lý.
  • rel="manifest": Tài liệu Tệp kê khai ứng dụng web.
  • rel="next": Tài liệu tiếp theo trong loạt bài.
  • rel="prev": Tài liệu trước trong loạt bài.
  • rel="search": Một tài liệu dùng để thực hiện tìm kiếm trong tài liệu hiện tại.
Ngoài ra còn có một số thuộc tính rel cụ thể để thông báo cho các công cụ tìm kiếm:
  • rel="sponsored": Đánh dấu các liên kết là quảng cáo hoặc vị trí trả tiền (thường được gọi là liên kết trả phí) là được tài trợ.
  • rel="ugc": Đối với nội dung do người dùng tạo không đặc biệt đáng tin cậy, như nhận xét và bài đăng trên diễn đàn.
  • rel="nofollow": Yêu cầu công cụ tìm kiếm bỏ qua điều này và không liên kết trang web này với nơi liên kết đến.
Và một số thuộc tính rel tập trung vào bảo mật nhất:
  • rel="noopener": Ngăn một tab mới sử dụng tính năng JavaScript window.opener, tính năng này có thể có khả năng truy cập vào trang chứa liên kết (trang web của bạn) để thực hiện những điều độc hại, như ăn cắp thông tin hoặc chia sẻ mã bị nhiễm. Sử dụng cái này với thường target="_blank"là một ý tưởng hay.
  • rel="noreferrer": Ngăn các trang web hoặc dịch vụ theo dõi khác (ví dụ: Google Analytics) xác định trang của bạn là nguồn của liên kết được nhấp.
Bạn có thể sử dụng nhiều giá trị được phân tách bằng dấu cách nếu bạn cần (ví dụ rel="noopener noreferrer":)

Và cuối cùng, một số thuộc tính rel đến từ tiêu chuẩn vi định dạng hoặc chỉ báo như:
  • rel="directory": Cho biết đích của siêu kết nối là một danh sách thư mục chứa mục nhập cho trang hiện tại.
  • rel="tag": Cho biết đích của siêu liên kết đó là “thẻ” (hoặc từ khóa / chủ đề) do tác giả chỉ định cho trang hiện tại.
  • rel="payment": Cho biết đích của siêu kết nối đó cung cấp một cách để hiển thị hoặc cung cấp hỗ trợ cho trang hiện tại.
  • rel="help": Cho biết rằng tài nguyên được liên kết đến là một tệp trợ giúp hoặc Câu hỏi thường gặp cho tài liệu hiện tại.
  • rel="me": Cho biết đích của nó đại diện cho cùng một cá nhân hoặc thực thể như trang hiện tại.

Vai trò ARIA

Vai trò mặc định của một liên kết là link, vì vậy bạn không cần phải làm:
<a role="link" href="/">Link</a>
Bạn chỉ cần điều đó nếu bạn đang giả mạo một liên kết, đây sẽ là một điều kỳ lạ/hiếm gặp cần phải làm và bạn phải sử dụng thêm một số JavaScript để làm cho nó thực sự đi theo liên kết. 
<span class="link" tabindex="0" role="link" data-href="/">
  Fake accessible link created using a span
</span>
Chỉ cần nhìn ở trên, bạn có thể thấy có bao nhiêu công việc giả mạo một liên kết và đó là trước khi bạn xem xét đó là ngắt khi nhấp chuột phải, không cho phép mở trong tab mới, không hoạt động với Chế độ tương phản cao của Windows và trình đọc khác chế độ và công nghệ hỗ trợ. Khá xấu! Một vai trò ARIA hữu ích để chỉ ra trang hiện tại, như: 
<a href="/" aria-current="page">Home</a>
<a href="/contact">Contact</a>
<a href="/about">About/a></a>

Bạn có nên sử dụng thuộc tính title này không?

Có lẽ là không. Lưu điều này để đưa ra một iframe tiêu đề ngắn gọn, mô tả. 
<a title="I don't need to be here" href="/">
  List of Concerts
</a>
title cung cấp cửa sổ bật lên giao diện người dùng kích hoạt khi di chuột hiển thị văn bản bạn đã viết. Bạn không thể tạo kiểu cho nó, và nó không thực sự có thể truy cập được.
Kích hoạt khi di chuột là cụm từ chính ở đây. Nó không sử dụng được trên bất kỳ thiết bị chỉ cảm ứng nào. Nếu một liên kết cần thêm thông tin theo ngữ cảnh, hãy cung cấp nội dung thực tế xung quanh liên kết đó hoặc sử dụng văn bản mô tả chính liên kết đó (trái ngược với một cái gì đó như “Nhấp vào đây”).

Liên kết chỉ có biểu tượng

Nếu một liên kết chỉ có một biểu tượng bên trong nó, như: 
<a href="/">😃</a>

<a href="/">
  <svg> ... </svg>
</a>
Đó không phải là thông tin ngữ cảnh đủ về liên kết, đặc biệt là vì lý do trợ năng, nhưng có khả năng cho bất kỳ ai. Các liên kết với văn bản hầu như luôn rõ ràng hơn. Nếu bạn hoàn toàn không thể sử dụng văn bản, bạn có thể sử dụng một mẫu như: 
<a href="/">
  <!-- Hide the icon from assistive technology -->
  <svg aria-hidden="true" focusable="false"> ... </svg>
  <!-- Acts as a label that is hidden from view -->
  <span class="visually-hidden">Useful link text</span>
</a>
visually-hidden là một lớp được sử dụng để ẩn văn bản nhãn một cách trực quan bằng CSS: 
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
Không giống như aria-label, văn bản ẩn trực quan có thể được dịch và sẽ lưu giữ tốt hơn trong các chế độ duyệt chuyên biệt.

Liên kết xung quanh hình ảnh

Hình ảnh có thể là liên kết nếu bạn bọc chúng trong một liên kết. Không cần sử dụng văn bản thay thế để nói rằng hình ảnh là một liên kết, vì công nghệ hỗ trợ sẽ làm được điều đó. 
<a href="/buy/puppies/now">
  <img src="puppy.jpg" alt="A happy puppy.">
</a>

Liên kết xung quanh các khối nội dung lớn hơn

Bạn có thể liên kết toàn bộ khu vực nội dung, như: 
<a href="/article/">
  <div class="card">
    <h2>Card</h2>
    <img src="..." alt="...">
    <p>Content</p>
  </div>
</a>
...