Điều nào đúng hơn: <h1> <a>, </a> </ h1> HOẶC <a> <h1> '</ h1> </a>

Là cả hai <h1><a ...> ... </a></h1>và <a ...><h1> ... </h1></a>HTML hợp lệ, hoặc chỉ có một chính xác? Nếu cả hai đều đúng, chúng có khác nhau về nghĩa không?

Cả hai phiên bản đều đúng. Sự khác biệt lớn nhất giữa chúng là trong trường hợp <h1><a>..</a></h1>chỉ có văn bản trong tiêu đề sẽ có thể nhấp được.

Nếu bạn đặt thuộc tính <a>xung quanh <h1>và thuộc tính css displaylà block(theo mặc định) thì toàn bộ khối (chiều cao <h1>và 100% chiều rộng của vùng chứa <h1>trong đó) sẽ có thể nhấp được.

Về mặt lịch sử, bạn không thể đặt phần tử khối bên trong phần tử nội tuyến, nhưng điều này không còn đúng với HTML5. Tôi sẽ nghĩ rằng <h1><a>..</a></h1>cách tiếp cận là thông thường hơn mặc dù.

Trong trường hợp bạn muốn đặt một neo trên tiêu đề, một cách tiếp cận tốt hơn <a id="my-anchor"><h1>..</h1></a>là sử dụng thuộc tính idhoặc namethuộc tính như thế này: <h1 id="my-anchor">..</h1>hoặc<h1 name="my-anchor">..</h1>

Trong HTML 5 trước này

<a><h1>..</h1></a>

sẽ không xác nhận. Bạn có thể sử dụng nó trong HTML 5. Tuy nhiên, tôi sẽ sử dụng điều này:

<h1><a>..</a></h1>

trừ khi bạn cần thêm nhiều hơn <h1> bên trong <a>

<a><h1></h1></a>W3C không hợp lệ ... Về cơ bản, bạn không thể đặt các phần tử khối bên trong các phần tử nội tuyến

<h1><a>..</a></h1>và <a><h1>..</h1></a>luôn luôn cư xử gần như giống nhau, khi các biểu định kiểu không ảnh hưởng đến kết xuất. Hầu như, nhưng không hoàn toàn. Nếu bạn điều hướng bằng cách sử dụng phím tab hoặc tập trung vào một liên kết, một hình chữ nhật tập trung vào hình chữ nhật xuất hiện xung quanh liên kết trong hầu hết các trình duyệt. Đối với <h1><a>..</a></h1>, hình chữ nhật này chỉ xung quanh văn bản liên kết. Đối với <a><h1>..</h1></a>, hình chữ nhật trải dài trên không gian ngang có sẵn, vì việc đánh dấu làm cho aphần tử trở thành một phần tử khối trong kết xuất, chiếm mặc định 100% chiều rộng.

Phần sau đây cho thấy cách <a href=foo><h1>link</h1></a>Chrome được hiển thị tập trung :

Điều này ngụ ý rằng nếu bạn định kiểu các phần tử, ví dụ bằng cách đặt màu nền cho các liên kết, các hiệu ứng sẽ khác nhau theo cách tương tự.

Về mặt lịch sử, <a><h1>..</h1></a>được tuyên bố là không hợp lệ trong HTML 2.0 và các thông số kỹ thuật HTML tiếp theo cũng phù hợp, nhưng HTML5 thay đổi điều này và tuyên bố nó là hợp lệ. Định nghĩa chính thức không ảnh hưởng đến trình duyệt, chỉ có trình xác nhận. Tuy nhiên, có thể từ xa có thể một số tác nhân người dùng (có thể không phải là trình duyệt bình thường, nhưng ví dụ: trình kết xuất HTML chuyên dụng, trình trích xuất dữ liệu, trình chuyển đổi, v.v.) không thể xử lý <a><h1>..</h1></a>đúng, vì nó không được phép trong thông số kỹ thuật.

Ít khi có một lý do chính đáng để tạo một tiêu đề hoặc văn bản trong một tiêu đề một liên kết. (Điều này chủ yếu là phi logic và xấu cho khả năng sử dụng.) Nhưng một câu hỏi tương tự thường được đặt ra khi tạo một tiêu đề (hoặc văn bản trong một tiêu đề) là một đích đến tiềm năng cho một liên kết, sử dụng ví dụ <h2><a name=foo>...</a></h2>so với <a name=foo><h2>...</h2></a>. Các cân nhắc tương tự áp dụng cho điều này (cả hai công việc, có thể có một sự khác biệt vì phần sau làm cho aphần tử trở thành một khối và trước HTML5, chỉ phần trước được cho phép chính thức). Nhưng ngoài ra, cả hai cách đều lỗi thời và việc sử dụng idthuộc tính trực tiếp trên phần tử tiêu đề hiện được khuyến nghị : <h2 id=foo>...</h2>.

Các phần tử H1 là các phần tử mức khối và các phần tử neo là các phần tử nội tuyến. Bạn được phép có một phần tử nội tuyến trong một phần tử mức khối nhưng không phải là cách khác. Khi bạn xem xét mô hình hộp và đặc tả HTML, điều này có ý nghĩa.

Vì vậy, trong kết luận cách tốt nhất là:

<h1><a href="#">Link</a></h1>

Bạn có muốn sử dụng một siêu liên kết <a href="…">/ a:link, hoặc bạn muốn thêm một neo vào tiêu đề của bạn? nếu bạn muốn thêm một neo, bạn chỉ cần gán id <h1 id="heading">. sau đó bạn có thể liên kết nó như page.htm#heading.

nếu bạn muốn làm cho tiêu đề có thể nhấp (liên kết), trước tiên hãy sử dụng <h1><a></a></h1>/ h1 > a- các phần tử blocklevel và các phần tử nội tuyến bên trong

Ngoài ra, có sự khác biệt về thứ bậc phong cách. Nếu bạn có nó <h1><a href="#">Heading here</a></h1>, Các kiểu của neo sẽ ghi đè lên các kiểu của phần tử h1. Thí dụ:

a {color:red;font-size:30px;line-height:30px;}

S OVER QUÁ TUYỆT VỜI

h1 {color:blue;font-size:40px;line-height:40px;}