Mettere un div in un'ancora è mai corretto?

Ho sentito che mettere un elemento a blocchi all'interno di un elemento inline è un peccato 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>

Ma che dire se si disegna l'ancora esterna come display:blocknel foglio di stile? È ancora sbagliato? Le specifiche HTML 4.01 su elementi a livello di blocco e inline sembrano pensarlo:

I fogli di stile forniscono i mezzi per specificare il rendering di elementi arbitrari, incluso se un elemento viene reso come blocco o in linea. In alcuni casi, come uno stile in linea per gli elementi dell'elenco, questo può essere appropriato, ma in generale gli autori sono scoraggiati dal scavalcare l'interpretazione convenzionale degli elementi HTML in questo modo.

Qualcuno ha ulteriori suggerimenti su questo problema?

A seconda della versione di HTML a cui ti stai rivolgendo:

• HTML 5 afferma che l'<a>elemento "può essere racchiuso in interi paragrafi, elenchi, tabelle e così via, anche in intere sezioni, purché non vi sia contenuto interattivo (ad esempio pulsanti o altri collegamenti)".

• HTML 4.01 specifica che gli<a>elementi possono contenere solo elementi incorporati . A<div>è un elemento a blocchi , quindi potrebbe non apparire all'interno di un<a> .

  Ovviamente sei libero di modellare un elemento inline in modo tale che appaia come un blocco, o addirittura in stile un blocco in modo che sia reso in linea. L'uso dei termini inlineeblock in HTML si riferisce alla relazione degli elementi con la struttura semantica del documento, mentre gli stessi termini in CSS sono più legati allo stile visivo degli elementi. Se fai visualizzare gli elementi in linea in modo a blocchi, va bene.

  Tuttavia, dovresti assicurarti che la struttura del documento abbia ancora senso quando i CSS non sono presenti, ad esempio quando si accede tramite una tecnologia di supporto come uno screen reader - o in effetti quando viene esaminato dal potente Googlebot.

No, non verrà convalidato, ma sì, generalmente funzionerà nei browser moderni. Detto questo, usa uno span all'interno della tua ancora e posizionalo anche display: blocksu esso, che sicuramente funzionerà ovunque e si convaliderà!

Il documento W3C non usa concetti come sbagliato e peccato , ma usa quelli come fornire i mezzi , può essere appropriato e scoraggiato .

In realtà, nel secondo paragrafo della sezione 4 , la specifica 4.01 elenca le sue parole come segue

Le parole chiave "DEVE", "NON DEVE", "RICHIESTO", "DEVONO", "NON DEVONO", "DOVREBBE", "NON DOVREBBE", "CONSIGLIATO", "MAGGIO" e "OPZIONALE" in questo documento sono da interpretare come descritto in [RFC2119]. Tuttavia, per motivi di leggibilità, queste parole non compaiono in tutte le lettere maiuscole in questa specifica.

Con questo in mente, credo che l'affermazione definitiva sia in 7.5.3 Elementi a livello di blocco e in linea , dove dice

Generalmente, gli elementi in linea possono contenere solo dati e altri elementi in linea.

La condizione "generalmente" sembra introdurre abbastanza ambiguità per dire che HTML 4.01 consente agli elementi inline di contenere elementi a blocchi.

Certamente, CSS2 ha un valore di proprietà di visualizzazione, blocco in linea , che sembra adatto allo scopo che descrivi. Non sono sicuro che sia mai stato ampiamente supportato, ma sembra che qualcuno abbia anticipato la necessità di quel tipo di comportamento.

Il DTD sembra essere meno indulgente qui, ma il testo del DTD differisce dalle specifiche:

La specifica HTML 4.01 include ulteriori vincoli sintattici che non possono essere espressi nei DTD.

In un altro commento, suggerisci di voler rendere attivo un blocco avvolgendolo in un'ancora. Non credo che HTML lo proibisca e CSS chiaramente lo consente. Quindi, per rispondere alla domanda sul titolo se è mai corretta, dico di sì. Per gli standard, a volte è corretto.

Con la specifica HTML5 ... Ora è possibile inserire un elemento a livello di blocco all'interno di un elemento inline. Quindi ora è perfettamente appropriato inserire un 'div' o 'h1' all'interno di un elemento 'a'.

Non puoi metterlo <div>dentro <a>- non è HTML (X) valido.

Anche se hai uno stile con display: block non puoi ancora inserire elementi a livello di blocco al suo interno: l'HTML (X) deve ancora obbedire al DTD (X) HTML (qualunque sia quello che usi), non importa come il CSS altera le cose.

Il browser probabilmente lo visualizzerà come vuoi, ma ciò non lo rende giusto.

C'è un DTD per HTML 4 su http://www.w3.org/TR/REC-html40/sgml/dtd.html . Questo DTD è la forma processabile dalla macchina della specifica, con la limitazione che un DTD governa XML e HTML 4, in particolare il sapore "transitorio", consente molte cose che non sono XML "legali". Tuttavia, ritengo che si avvicini alla codifica dell'intento degli specificatori.

<!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">

Interpreterei i tag elencati in questa gerarchia come totale dei tag consentiti.

Mentre la specifica può dire "elementi in linea", sono abbastanza sicuro che non si intende aggirare l'intento dichiarando in linea il tipo di visualizzazione di un elemento di blocco. I tag incorporati hanno una semantica diversa, indipendentemente da come potresti abusarne.

D'altra parte, trovo intrigante che l'inclusione di specialsembra consentire Aelementi di nidificazione . Probabilmente ci sono alcune parole forti nelle specifiche che non lo consentono anche se sono sintatticamente XML corrette ma non lo perseguirò ulteriormente poiché non è l'argomento della domanda.

Gli elementi a livello di blocco come <div>possono essere racchiusi in <a>tag in HTML5. Sebbene a <div>sia considerato un contenitore / wrapper per il contenuto di flusso e <a>'considerato contenuto di flusso secondo MDN . Semanticamente potrebbe essere meglio creare elementi in linea che fungono da elementi a livello di blocco.

Se vuoi evitare il problema semantico di posizionare i div all'interno dei tag di ancoraggio, posiziona il tag di ancoraggio allo stesso livello dei div, avvolgili tutti con un contenitore con posizione: relativo, rendi la posizione del tuo tag di ancoraggio: assoluta ed espandi a riempire il contenitore. Inoltre, se non si trova alla fine del flusso di contenuti, assicurati di lanciare un indice z per posizionarlo sopra il contenuto.

Come suggerito, ho aggiunto un codice di markup:

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

E il css:

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

Se stai andando allo sforzo di creare un <a>blocco, perché non mettere <a>dentro il div, essendo un elemento a blocchi ti darà lo stesso effetto.

Se lo cambi in un elemento in stile blocco, allora no, non è più "sbagliato", ma probabilmente non verrà convalidato. Ma non ha molto senso fare quello che stai facendo. Dovresti semplicemente mantenere il tag di ancoraggio come elemento a livello di blocco senza div interno, oppure posizionare il div all'esterno.

È sbagliato. Usa una campata .

Penso che la maggior parte delle volte quando le persone fanno questa domanda, hanno creato un sito con solo div, e ora uno dei div deve essere un link.

Ho visto qualcuno usare un'immagine vuota trasparente, PNG, all'interno di un tag di ancoraggio solo per creare un collegamento all'interno di un div e l'immagine aveva le stesse dimensioni del div.

Abbastanza triste in realtà ... ma funziona ...

puoi ottenere ciò aggiungendo lo pseudo-elemento ":: before"

Trucco CSS puro;)

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>

Proprio come un FYI.

Se il tuo obiettivo è rendere selezionabile il tuo div, puoi usare jQuery / Java Script.

Definisci il tuo div in questo modo:

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

Il tuo jQuery verrebbe quindi implementato in questo modo:

 <script type="text/javascript">

    $(document).ready(function () {

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

Funzionerebbe anche per più div - come da commento di Tom in questa discussione