2012-05-09 53 views
90

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ứ trong <a>, ngay cả khi chúng chỉ thực thi Javascript. Tôi đã gặp vấn đề với chiến thuật href="#" 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.Hợp lệ để sử dụng <a> (thẻ neo) mà không có thuộc tính href?

Nhưng sau đó tôi đã thử chỉ xóa thuộc tính href hoàn toàn. Tôi đã sử dụng <a class='bunch of classes' data-whatever='data'> và việc Javascript xử lý phần còn lại. Và nó hoạt động.

Tuy nhiên, có điều gì đó đang 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à liên kết đến một thứ gì đó, nhưng tôi không hoàn toàn chắc chắn là lý do tại sao đây là một vấn đề. Hoặc là nó?

Trả lời

156

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

Định dạng neo được đặt tên ít thường được sử dụng, vì định danh phân đoạn hiện được sử dụng để chỉ định thuộc tính [id] (mặc dù khả năng tương thích ngược, bạn vẫn có thể chỉ định thuộc tính [name]). An <a> element without an [href] attribute is still valid.

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

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

Nút là thứ mà khi được nhấp vào sẽ gây ra một hành động.

Liên kết là nút gây ra 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ể di chuyển trong tài liệu trong trường hợp số nhận dạng phân đoạn (#foo) hoặc chuyển sang tài liệu mới trong trường hợp url (/bar).

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

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

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

Các button role nói cho người dùng biết các yếu tố cụ thể đang được coi như một nút như là một ghi đè cho bất kỳ ngữ nghĩa các yếu tố cơ bản có thể đã có.

Đối <span><div> yếu tố, bạn có thể muốn thêm JavaScript nghe then chốt cho Space hay Nhập để kích hoạt sự kiện click. <a href><button> yếu tố làm điều này theo mặc định, nhưng các yếu tố không phải nút thì không. Đôi khi nó có ý nghĩa hơn để ràng buộc kích hoạt click 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 với F1.

+0

'href =" # "' Tôi đã nghe nói đến. 'javascript: void (0)' Tôi đã nghe nói đến. Điều này tôi chưa bao giờ nghe nói cho đến bây giờ, nhưng nó có vẻ làm cho ý nghĩa nhất. Đây là tiêu chuẩn và hoạt động trên hầu hết các trình duyệt, phải không? – Zacqary

+0

@Zacqary, '[role =" button "]' không làm bất cứ điều gì cụ thể, bạn vẫn cần phải lắng nghe sự kiện bấm (nhưng bạn vẫn làm điều đó để tạo nút JS). Nó có nghĩa là để được sử dụng để điều hướng hỗ trợ (aka độc giả màn hình) để người đọc màn hình biết để đại diện cho các yếu tố như là một nút chứ không phải là giá trị ngữ nghĩa ban đầu của nó. Việc thêm '[tabindex]' sẽ thêm phần tử vào thứ tự tabbing. Trong trường hợp đặc biệt, bạn có thể không thực sự muốn/cần nút điều hướng theo thứ tự tabbing, do đó, nó là một thuộc tính tùy chọn. Các phần tử đã là các nút không cần '[role =" button "]' vì nó thừa. – zzzzBov

+0

HTML có hợp lệ để có thẻ neo không có href và không có tên không? Trong ứng dụng của chúng tôi, chúng tôi có một số liên kết xóa được vô hiệu hóa (do đó không có thuộc tính href), nhưng vẫn hiển thị cho người dùng. –

20

Tôi nghĩ rằng bạn có thể tìm thấy câu trả lời của bạn ở đây: Is an anchor tag without the href attribute safe?

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> 
+2

Thực sự nên là 'javascript: undefined' – rybo111

+2

@ rybo111 bạn đúng nhưng tôi vẫn thích void (0); về cơ bản vì nó trông đẹp hơn. Tôi không thích khách hàng của tôi thấy những thứ như "không xác định" ;-) – Alex

+4

'text'? – diynevala

4

Có, nó hợp lệ để sử dụng thẻ liên kết không có thuộc tính href.

Nếu phần tử a không có href thuộc tính, sau đó các phần tử đại diện cho một placeholder cho nơi một liên kết có thể khác đã được đặt, nếu nó đã có liên quan, bao gồm các nội dung chỉ của phần tử.

Có, bạn có thể sử dụng class và 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à type thuộc tính phải được bỏ qua nếu thuộc tính href là không có mặt.

Đối với các "Tôi có nên?" Một phần, xem trích dẫn đầu tiên: "nơi một liên kết có thể khác đã được đặt nếu nó đã từng 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, sau đó tôi vẫn sẽ sử dụng nó, bởi vì năng suất là quan trọng hơn đối với tôi hơn 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 xem ra cho khác nhau behaviourstyling (ví dụ không có gạch dưới, không có con trỏ trỏ, không phải là một :link).

Nguồn: W3C HTML5 Recommendation

4

Nó hợp lệ. Ví dụ: bạn có thể sử dụng nó để hiển thị các phương thức (hoặc những thứ tương tự đáp ứng với các thuộc tính data-toggledata-target).

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 font-tuyệt vời, mà là tốt hơn như một thẻ a chứ không phải là một button, để hiển thị một phương thức. Ngoài ra, thiết lập role="button" làm cho con trỏ thay đổi thành loại hành động. Nếu không có href hoặc role="button", con trỏ chuột sẽ không thay đổi.

Các vấn đề liên quan