Apakah menempatkan div di dalam jangkar benar?

Saya pernah mendengar bahwa meletakkan elemen blok di dalam elemen inline adalah dosa HTML:

<a href="http://www.mydomain.com"><div>
What we have here is a problem. 
You see, an anchor element is an inline element,
and the div element is a block level element.
</div></a>

Tapi bagaimana jika Anda gaya jangkar luar seperti display:blockpada stylesheet? Apakah masih salah? HTML 4.01 spec pada elemen level-blok dan inline tampaknya berpikir demikian:

Lembaran gaya menyediakan sarana untuk menentukan rendering elemen arbitrer, termasuk apakah elemen dirender sebagai blok atau inline. Dalam beberapa kasus, seperti gaya inline untuk elemen daftar, ini mungkin sesuai, tetapi secara umum, penulis tidak disarankan untuk mengesampingkan interpretasi konvensional elemen HTML dengan cara ini.

Adakah yang punya kiat lebih lanjut tentang masalah ini?

Bergantung pada versi HTML yang Anda layani:

• HTML 5 menyatakan bahwa<a>elemen "dapat membungkus seluruh paragraf, daftar, tabel, dan sebagainya, bahkan seluruh bagian, asalkan tidak ada konten interaktif di dalamnya (mis. Tombol atau tautan lain)".

• HTML 4.01 menetapkan bahwa<a>elemen hanya dapat berisi elemen sebaris . A<div>adalah elemen blok , jadi itu mungkin tidak muncul di dalam<a>.

  Tentu saja Anda bebas untuk mendesain elemen inline sedemikian rupa sehingga tampak seperti sebuah blok, atau memang gaya sebuah blok sehingga itu diberikan inline. Penggunaan istilah inlinedan blockdalam HTML mengacu pada hubungan elemen dengan struktur semantik dokumen, sedangkan istilah yang sama dalam CSS lebih terkait dengan gaya visual elemen. Jika Anda membuat elemen inline ditampilkan dengan cara kuning, itu bagus.

  Namun Anda harus memastikan bahwa struktur dokumen masih masuk akal ketika CSS tidak ada, misalnya ketika diakses melalui teknologi bantu seperti pembaca layar - atau memang ketika diperiksa oleh Googlebot yang perkasa.

Tidak itu tidak akan divalidasi, tapi ya itu umumnya akan berfungsi di browser modern. Yang sedang berkata, gunakan rentang di dalam jangkar Anda, dan atur display: blockdi atasnya juga, yang pasti akan bekerja di mana-mana, dan itu akan divalidasi!

Dokumen W3C tidak menggunakan konsep-konsep seperti salah dan dosa , tetapi menggunakan konsep-konsep seperti menyediakan sarana , mungkin sesuai dan tidak dianjurkan .

Sebenarnya, dalam paragraf kedua bagian 4 , spesifikasi 4.01 memerinci kata-katanya sebagai berikut

Kata kunci "HARUS", "HARUS TIDAK", "DIPERLUKAN", "AKAN", "TIDAK AKAN", "HARUS TIDAK", "HARUS TIDAK", "DIREKOMENDASIKAN", "MUNGKIN", dan "OPTIONAL" dalam dokumen ini adalah untuk ditafsirkan seperti yang dijelaskan dalam [RFC2119]. Namun, untuk keterbacaan, kata-kata ini tidak muncul dalam semua huruf besar dalam spesifikasi ini.

Dengan mengingat hal itu, saya percaya pernyataan definitif ada di 7.5.3 Elemen level-blok dan inline , di mana katanya

Secara umum, elemen sebaris mungkin hanya berisi data dan elemen sebaris lainnya.

Kondisi "umumnya" tampaknya memperkenalkan ambiguitas yang cukup untuk mengatakan bahwa HTML 4.01 memungkinkan elemen inline mengandung elemen blok.

Tentu saja, CSS2 memiliki nilai properti tampilan, inline-block , yang tampaknya sesuai dengan tujuan yang Anda jelaskan. Saya tidak yakin apakah itu didukung secara luas, tetapi tampaknya seseorang mengantisipasi perlunya perilaku semacam itu.

DTD tampaknya kurang memaafkan di sini, tetapi teks DTD tidak sesuai dengan spesifikasi:

Spesifikasi HTML 4.01 mencakup kendala sintaksis tambahan yang tidak dapat diungkapkan dalam DTD.

Di komentar lain, Anda menyarankan agar Anda ingin membuat blok aktif dengan membungkusnya di jangkar. Saya tidak percaya HTML melarang itu, dan CSS dengan jelas mengizinkannya. Jadi untuk menjawab pertanyaan judul tentang apakah itu benar, saya katakan ya. Menurut standar, kadang-kadang itu benar.

Dengan spesifikasi HTML5 ... Sekarang dimungkinkan untuk menempatkan elemen level blok di dalam elemen inline. Jadi sekarang sangat tepat untuk meletakkan 'div' atau 'h1' di dalam elemen 'a'.

Anda tidak dapat memasukkan ke <div>dalam <a>- itu tidak valid (X) HTML.

Meskipun Anda mendesain rentang dengan tampilan: blok Anda tetap tidak dapat memasukkan elemen level blok di dalamnya: (X) HTML masih harus mematuhi (X) HTML DTD (mana pun yang Anda gunakan), tidak peduli bagaimana CSS mengubah banyak hal.

Peramban mungkin akan menampilkannya seperti yang Anda inginkan, tetapi itu tidak membuatnya benar.

Ada DTD untuk HTML 4 di http://www.w3.org/TR/REC-html40/sgml/dtd.html . DTD ini adalah bentuk spec yang dapat diproses dengan mesin, dengan batasan bahwa DTD mengatur XML dan HTML 4, terutama rasa "sementara", memungkinkan banyak hal yang bukan XML "legal". Namun, saya menganggap itu mendekati kodifikasi maksud dari specifier.

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

Saya akan menafsirkan tag yang tercantum dalam hierarki ini sebagai total tag yang diizinkan.

Sementara spek dapat mengatakan "elemen sebaris," saya cukup yakin itu tidak dimaksudkan bahwa Anda dapat menyiasati maksud dengan menyatakan tipe tampilan elemen blok yang akan sebaris. Tag inline memiliki semantik berbeda, tidak peduli bagaimana Anda dapat menyalahgunakannya.

Di sisi lain, saya menemukan hal yang menarik bahwa masuknya elemen specialnampaknya memungkinkan A. Mungkin ada beberapa kata-kata yang kuat dalam spek yang melarang ini meskipun itu XML-sintaksis benar tetapi saya tidak akan mengejar ini lebih jauh karena itu bukan topik pertanyaan.

Elemen tingkat blok seperti <div>dapat dibungkus dengan <a>tag dalam HTML5. Meskipun a <div>dianggap sebagai wadah / pembungkus untuk konten aliran dan <a>dianggap sebagai konten aliran menurut MDN . Semantik mungkin lebih baik untuk membuat elemen sebaris yang bertindak sebagai elemen tingkat blok.

Jika Anda ingin menghindari masalah semantik menempatkan div di dalam tag jangkar, cukup tempatkan tag jangkar pada tingkat yang sama dengan div, bungkus semuanya dengan wadah dengan posisi: relatif, buat posisi tag jangkar Anda: absolut dan perluas untuk isi wadahnya. Juga jika itu tidak di akhir aliran konten pastikan Anda melemparkan indeks-z di sana untuk meletakkannya di atas konten.

Seperti yang disarankan, saya telah menambahkan kode markup:

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

Dan css:

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}

Jika Anda akan pergi ke upaya membuat <a>blok, mengapa tidak dimasukkan <a>ke dalam div, menjadi elemen blok itu akan memberi Anda efek yang sama.

Jika Anda mengubahnya ke elemen gaya blok, maka tidak, itu tidak lagi 'salah', tetapi mungkin tidak akan divalidasi. Tetapi tidak masuk akal untuk melakukan apa yang Anda lakukan. Anda harus menyimpan tag jangkar sebagai elemen level blok tanpa div dalam, atau meletakkan div di luar.

Itu salah. Gunakan rentang .

Saya pikir sebagian besar waktu ketika orang mengajukan pertanyaan ini, mereka telah membangun situs dengan divs saja, dan sekarang salah satu dari div perlu menjadi tautan.

Saya melihat seseorang menggunakan gambar kosong transparan, PNG, di dalam tag jangkar hanya untuk membuat tautan di dalam div, dan gambar itu berukuran sama dengan div.

Cukup sedih sebenarnya ... tapi berhasil ...

Anda dapat mencapai ini dengan menambahkan ":: before" Pseudo-element

Trik CSS Murni;)

a:before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0,0,0,0);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/250" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

Sama seperti FYI.

Jika tujuan Anda adalah membuat div Anda dapat diklik, Anda dapat menggunakan jQuery / Java Script.

Tentukan div Anda seperti ini:

<div class="clickableDiv" style="cursor:pointer">
  This is my div. Try clicking it!
</div>

Kemudian jQuery Anda akan diimplementasikan seperti ini:

 <script type="text/javascript">

    $(document).ready(function () {

        $("div.clickableDiv").click(function () {
            alert("Peekaboo"); 
        });
    });
</script>

Ini juga akan berfungsi untuk beberapa div - sesuai komentar Tom di utas ini