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


166

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?

Jawaban:


155

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>


Referensi lebih lanjut di sini: stackoverflow.com/questions/6061869/…
thdoan

2
<a> <h1> .. </h1> </a> suara lebih disukai untuk HTML 5 karena memberi pengguna perangkat sentuh target klik yang lebih besar, bukan?
Acyra

Ketika tajuk dan tajuk keduanya terhubung ke konten yang sama, secara visual lebih menarik untuk membungkus keduanya dalam kondisi yang sama <a>sehingga mereka berbagi status hover: jsfiddle.net/jjyLemq2
Slam

26

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>


8

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


26
Ini valid dalam HTML 5
vaidas

1
yeap .. tapi entah bagaimana saya merasa bahwa menempatkan elemen blok di dalam tautan agak ceroboh (pendapat pribadi), seperti tidak menutup tag (valid dalam HTML5) .. tapi hei! .. mungkin itu
berpengaruh

7

<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:

masukkan deskripsi gambar di sini

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>.


8
"There is seldom a good reason to make a heading or text in a heading a link"-> Saya harus tidak setuju dengan yang itu. Sebenarnya ada banyak alasan bagus untuk membuat tajuk tautan. Contoh yang diberikan: daftar posting blog, di mana setiap judul adalah tautan juga. Atau checkout SO sendiri: semua pertanyaan di halaman depan adalah h3elemen, dan juga tautan. Bagaimanapun, penjelasan yang bagus;)
giorgio

@giorgio, mis. Tautan SO yang Anda sebutkan buruk untuk kegunaan: membuat tautan untuk merujuk ke halaman itu sendiri tidak ada gunanya dan membingungkan.
Jukka K. Korpela

1
Ya, maksud saya tautan SO di beranda, yang mengarahkan pengguna ke halaman lain, halaman pertanyaan khusus. Dan ya, tautan di tajuk pada halaman pertanyaan (tidak sepenuhnya) tidak berguna, tetapi itu tidak membuatnya selalu buruk untuk kegunaan. Alasan utamanya adalah SEO (pada halaman pertanyaan).
giorgio

1
Itu loopback hal h1 SEO adalah sesuatu yang buruk bagi kegunaan. Mengapa judul halaman (h1) membuat screenreader mengumumkan tautan ke tempat lain? Sangat membingungkan. Dan untuk alasan yang sama, memiliki tautan dalam sub-judul membingungkan, ketika ada sesuatu yang dianggap sebagai judul bagian di dalam halaman dan juga judul halaman lain.
Adam

5

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>

2
"Ini masuk akal" , Anda secara samar mengatakan tanpa penjelasan mengapa, tetapi perilaku elemen tingkat blok dalam elemen sebaris ditentukan . Memiliki elemen level blok di dalam elemen sebaris tidak pernah salah. Terlebih lagi, spesifikasi HTML 5 dan Standar Hidup HTML benar-benar baik-baik saja dengan memiliki judul di dalam jangkar. Jawaban ini benar-benar salah.
Mark Amery

1

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


1

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;}

-1 karena ini tidak menjawab pertanyaan (yang lebih benar) sama sekali.
Mark Amery
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.