Hợp lệ để sử dụng <a> (thẻ neo) mà không có thuộc tính href?

Tôi đã sử dụng Twitter Bootstrap để xây dựng một trang web và rất nhiều chức năng của nó phụ thuộc vào việc gói mọi thứ vào <a>, ngay cả khi họ sẽ thực thi Javascript. Tôi đã gặp vấn đề với href="#"chiến thuật mà tài liệu của Bootstrap đề xuất, vì vậy tôi đã cố gắng tìm một giải pháp khác.

Nhưng sau đó tôi đã cố gắng loại bỏ hrefhoàn toàn thuộc tính. Tôi đã sử dụng <a class='bunch of classes' data-whatever='data'>và có Javascript xử lý phần còn lại. Và nó hoạt động.

Tuy nhiên, một cái gì đó nói với tôi rằng tôi không nên làm điều này. Đúng? Ý tôi là, về mặt kỹ thuật <a>được cho là một liên kết đến một cái gì đó, nhưng tôi không hoàn toàn chắc chắn tại sao đây là một vấn đề. Hoặc là nó?

Phần <a>tử nchor chỉ đơn giản là một neo đến hoặc từ một số nội dung. Ban đầu, đặc tả HTML được phép cho các neo được đặt tên ( <a name="foo">) và các neo được liên kết ( <a href="#foo">).

Định dạng neo được đặt tên ít được sử dụng hơn, vì định danh phân đoạn hiện được sử dụng để chỉ định một [id]thuộc tính (mặc dù để tương thích ngược, bạn vẫn có thể chỉ định [name]các thuộc tính). Một <a>phần tử không có [href]thuộc tính vẫn hợp lệ .

Theo như ngữ nghĩa và kiểu dáng có liên quan, <a>phần tử không phải là một liên kết ( :link) trừ khi nó có một [href]thuộc tính. Một tác dụng phụ của điều này là một <a>phần tử mà [href]không được đặt theo thứ tự tab theo mặc định.

Câu hỏi thực sự là liệu một <a>phần tử có phải là một đại diện thích hợp của a <button>. Ở cấp độ ngữ nghĩa, có một sự khác biệt rõ ràng giữa a linkvà a button.

Nút là một cái gì đó khi nhấp vào gây ra một hành động xảy ra.

Liên kết là một nút gây ra sự thay đổi trong điều hướng trong tài liệu hiện tại. Điều hướng xảy ra có thể được di chuyển trong tài liệu trong trường hợp định danh phân đoạn ( #foo) hoặc chuyển sang tài liệu mới trong trường hợp url ( /bar).

Vì các liên kết là một loại nút đặc biệt, chúng thường có các hành động được ghi đè để thực hiện các chức năng thay thế. Tiếp tục sử dụng một neo như một nút là ok từ quan điểm nhất quán, mặc dù nó không hoàn toàn chính xác về mặt ngữ nghĩa.

Nếu bạn lo ngại về ngữ nghĩa và khả năng truy cập của việc sử dụng một <a>yếu tố (hoặc <span>, hoặc <div>) làm nút, bạn nên thêm các thuộc tính sau:

<a role="button" tabindex="0" ...>...</a>

Các vai trò nút cho người dùng biết rằng các yếu tố cụ thể đang được coi là một nút như một ghi đè cho bất cứ điều gì ngữ nghĩa các yếu tố cơ bản có thể có.

Đối với <span>và <div>các thành phần, bạn có thể muốn thêm trình nghe khóa JavaScript cho Spacehoặc Enterđể kích hoạt clicksự kiện. <a href>và <button>các phần tử làm điều này theo mặc định, nhưng các phần tử không có nút thì không. Đôi khi nó có ý nghĩa hơn để liên kết clickkích hoạt với một khóa khác. Ví dụ: nút "trợ giúp" trong ứng dụng web có thể bị ràng buộc F1.

Tôi nghĩ bạn có thể tìm thấy câu trả lời của mình ở đây: Thẻ neo không có thuộc tính href có an toàn không?

Ngoài ra nếu bạn muốn không có hoạt động liên kết với href, bạn có thể sử dụng nó như:

<a href="javascript:void(0);">something</a>

Có, nó là hợp lệ để sử dụng thẻ neo mà không có hrefthuộc tính.

Nếu aphần tử không có hrefthuộc tính, thì phần tử đó đại diện cho một trình giữ chỗ cho nơi liên kết có thể được đặt, nếu nó có liên quan, chỉ bao gồm nội dung của phần tử.

Có, bạn có thể sử dụng classvà các thuộc tính khác, nhưng bạn không thể sử dụng target, download, rel, hreflang, vàtype .

Các target, download, rel, hreflang, và typecác thuộc tính phải được bỏ qua nếu thuộc tính href là không có mặt.

Về phần " Tôi có nên không? ", Xem phần trích dẫn đầu tiên: " nơi liên kết có thể được đặt nếu nó có liên quan ". Vì vậy, tôi sẽ hỏi " Nếu tôi không có JavaScript, tôi có sử dụng thẻ này làm liên kết không? ". Nếu câu trả lời là có, thì có, bạn nên sử dụng <a>mà không cần href. Nếu không, thì tôi vẫn sẽ sử dụng nó, bởi vì năng suất quan trọng đối với tôi hơn là ngữ nghĩa trường hợp cạnh, nhưng đây chỉ là ý kiến ​​cá nhân của tôi.

Ngoài ra, bạn nên coi chừng các hành vi và kiểu dáng khác nhau (ví dụ: không gạch chân, không con trỏ con trỏ, không phải a :link).

Nguồn: Khuyến nghị HTML5 của W3C

Nó hợp lệ. Bạn có thể, ví dụ, sử dụng nó để hiển thị các phương thức (hoặc những thứ tương tự đáp ứng data-togglevà data-targetthuộc tính).

Cái gì đó như:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

Ở đây tôi sử dụng biểu tượng phông chữ tuyệt vời, tốt hơn là một athẻ hơn là một button, để hiển thị một phương thức. Ngoài ra, cài đặt role="button"làm cho con trỏ thay đổi thành một loại hành động. Không có hrefhoặc role="button", con trỏ con trỏ không thay đổi.