Mana yang lebih benar: <h1> <a> ... </a> </h1> ATAU <a> <h1> ... </h1> </a>

Apakah keduanya <h1><a ...> ... </a></h1>dan <a ...><h1> ... </h1></a>HTML yang valid, atau hanya satu yang benar? Jika keduanya benar, apakah keduanya berbeda artinya?

Kedua versi itu benar. Perbedaan terbesar di antara mereka adalah bahwa <h1><a>..</a></h1>hanya teks dalam judul yang dapat diklik.

Jika Anda meletakkan <a>sekitar <h1>dan displayproperti css adalah block(yang secara default) seluruh blok (tinggi <h1>dan 100% dari lebar wadah tempat <h1>tinggal) akan diklik.

Secara historis Anda tidak bisa meletakkan elemen blok di dalam elemen inline, tetapi ini tidak lagi berlaku dengan HTML5. Saya akan berpikir bahwa <h1><a>..</a></h1>pendekatannya lebih konvensional.

Dalam kasus di mana Anda ingin meletakkan jangkar pada header, pendekatan yang lebih baik daripada <a id="my-anchor"><h1>..</h1></a>menggunakan atribut idatau nameseperti ini: <h1 id="my-anchor">..</h1>atau<h1 name="my-anchor">..</h1>

Di pre HTML 5 yang satu ini

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

tidak akan memvalidasi. Anda dapat menggunakannya dalam HTML 5. Namun, saya akan menggunakan ini:

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

kecuali jika Anda perlu menambahkan lebih dari <h1> di dalam <a>

<a><h1></h1></a>bukan W3C valid ... Pada dasarnya, Anda tidak dapat menempatkan elemen blok di dalam elemen inline

<h1><a>..</a></h1>dan <a><h1>..</h1></a>selalu berperilaku hampir sama, ketika style sheet tidak mempengaruhi rendering. Hampir, tetapi tidak cukup. Jika Anda menavigasi menggunakan tombol tab atau fokus pada tautan, "kotak fokus" muncul di sekitar tautan di sebagian besar browser. Sebab <h1><a>..</a></h1>, persegi panjang ini hanya ada di sekitar teks tautan. Sebab <a><h1>..</h1></a>, persegi panjang meluas melintasi ruang horisontal yang tersedia, karena markup membuat aelemen elemen blok dalam rendering, menempati lebar 100% secara default.

Berikut ini menunjukkan bagaimana fokus <a href=foo><h1>link</h1></a>dibuat oleh Chrome:

Ini menyiratkan bahwa jika Anda mendesain elemen misalnya dengan menetapkan warna latar belakang untuk tautan, efeknya berbeda dengan cara yang sama.

Secara historis, <a><h1>..</h1></a>dinyatakan tidak valid dalam HTML 2.0, dan spesifikasi HTML berikutnya mengikutinya, tetapi HTML5 mengubahnya dan menyatakannya valid. Definisi formal tidak memengaruhi browser, hanya validator. Namun, sangat mungkin bahwa beberapa agen pengguna (mungkin bukan browser normal, tetapi misalnya renderer HTML khusus, ekstraktor data, konverter, dll.) Gagal menangani <a><h1>..</h1></a> dengan benar, karena belum diizinkan dalam spesifikasi.

Jarang ada alasan bagus untuk membuat tajuk atau teks dalam tajuk tajuk. (Sebagian besar tidak logis dan buruk untuk kegunaan.) Tetapi pertanyaan serupa sering muncul ketika membuat judul (atau teks dalam judul) tujuan potensial untuk tautan, menggunakan misalnya <h2><a name=foo>...</a></h2>versus <a name=foo><h2>...</h2></a>. Pertimbangan serupa berlaku untuk ini (keduanya berfungsi, mungkin ada perbedaan karena yang terakhir membuat aelemen blok, dan sebelum HTML5, hanya yang pertama secara resmi diizinkan). Tapi di samping itu, kedua cara sudah ketinggalan jaman, dan menggunakan idatribut langsung pada elemen heading sekarang direkomendasikan: <h2 id=foo>...</h2>.

Elemen H1 adalah elemen level blok, dan jangkar adalah elemen inline. Anda diizinkan memiliki elemen inline di dalam elemen level blok tetapi tidak sebaliknya. Ketika Anda mempertimbangkan model kotak dan spesifikasi HTML ini masuk akal.

Jadi kesimpulannya cara terbaik adalah:

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

apakah Anda ingin menggunakan hyperlink <a href="…">/ a:link, atau Anda ingin menambahkan jangkar ke heading Anda? jika Anda ingin menambahkan jangkar, Anda dapat menetapkan id <h1 id="heading">. Anda kemudian dapat menautkannya sebagai page.htm#heading.

jika Anda ingin membuat tajuk dapat diklik (tautan), gunakan <h1><a></a></h1>/ h1 > a- elemen tingkat blok terlebih dahulu, dan elemen sebaris di dalamnya

Juga, ada perbedaan hierarki gaya. Jika Anda memilikinya sebagai <h1><a href="#">Heading here</a></h1>, Gaya jangkar akan mengesampingkan gaya elemen h1. Contoh:

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

AKAN MENGALAHKAN OVERRULE

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