làm thế nào để kết hợp các liên kết (thẻ <a>) và tiêu đề (thẻ <h1>) trong tiêu chuẩn web?

95

Mã chính xác để tạo liên kết với tiêu đề 1 theo tiêu chuẩn web là gì?

Là nó

<h1><a href="http://stackoverflow.com"> stackoverflow </a></h1>

hoặc là

<a href="http://stackoverflow.com"><h1> stackoverflow </h1></a>

Cảm ơn

html web-standards

— ahmed
nguồn

143

Theo các tiêu chuẩn web, bạn không được phép đặt các phần tử khối vào các phần tử nội tuyến.

Như h1là một phần tử khối và alà một phần tử nội tuyến, cách đúng là:

<h1><a href="#">This is a title</a></h1>

Đây là một liên kết để bạn có thể tìm hiểu thêm: w3 Mô hình định dạng trực quan

Tuy nhiên, có một ngoại lệ mà trong HTML5 nó là hợp lệ để quấn yếu tố khối cấp cao (như div, phoặc h*) trong thẻ neo. Việc bao bọc các phần tử cấp khối trong các phần tử nội tuyến không phải là neo vẫn đi ngược lại các tiêu chuẩn.

— Darko Z
nguồn

19

Trong HTLM5 điều này đã thay đổi. Cả hai ví dụ sẽ xác thực - validator.w3.org .

— Atadj

một trong những tốt đẹp. đó là một sai lầm dễ mắc phải và trong khi cả hai đều sẽ xác nhận tính logic của nó rằng các phần tử nội tuyến tự nhiên phải là con cháu của các phần tử cấp khối.

— bigmadwolf

@pushplaybang - Tôi sẽ nói rằng việc bọc tiêu đề trong một liên kết sẽ mang tính ngữ nghĩa hơn trừ khi chỉ một phần của tiêu đề được cho là có thể nhấp được (tôi không thể nghĩ ra trường hợp sử dụng cho điều đó). Bất chấp điều đó, cả hai đều được hỗ trợ trong html5.

— aaaaaa

47

HTML5 cập nhật chủ đề này: bây giờ có thể bọc các phần tử cấp khối bằng chữ A, như đã nêu trong một câu hỏi khác: https://stackoverflow.com/a/9782054/674965 và tại đây: http://davidwalsh.name/html5- phần tử-liên kết

— f055
nguồn

8

Câu trả lời này tại là rất thích hợp hơn so với các câu trả lời được chấp nhận

— Josh Davenport

@JoshDavenport Câu trả lời được chấp nhận đã được cập nhật để phản ánh rằng

— dan-Klasson

2

Theo như tôi hiểu, HTML5 cho phép bạn bọc các phần tử cấp khối trong các thẻ liên kết. Tuy nhiên, lỗi có thể xuất hiện trong các trình duyệt cũ hơn. Tôi gặp sự cố này với Firefox 3.6.18 và đã chèn moz-rs-header = "" vào mã của mình. Vì vậy, phong cách của tôi đã phá vỡ. Nếu bạn quan tâm đến một tác phẩm xung quanh, bạn có thể bọc các thẻ liên kết trong div. Phần sau cung cấp giải thích rõ hơn về lý do tại sao mã bổ sung hoạt động http://oli.jp/2009/html5-block-level-links/

— Kip Deeds
nguồn

1

a > h1 sẽ gây khó khăn trong việc chọn văn bản

Vì cả hai đều hoàn toàn hợp lệ trong HTML5, nên tốt hơn là sử dụng h1 > a

— Abhishek
nguồn