Mettere un div in un’ancora è mai corretto?

Ho sentito dire che mettere un elemento di blocco all’interno di un elemento inline è un peccato HTML:

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.

Ma cosa succede se si disegna l’ancoraggio esterno come display:block nel foglio di stile? È ancora sbagliato? La specifica HTML 4.01 su elementi block-level e inline sembra pensarla così:

I fogli di stile forniscono i mezzi per specificare il rendering di elementi arbitrari, incluso se un elemento è reso come blocco o in linea. In alcuni casi, ad esempio uno stile in linea per gli elementi della lista, questo può essere appropriato, ma in generale, gli autori sono scoraggiati dal sovrascrivere l’interpretazione convenzionale degli elementi HTML in questo modo.

Qualcuno ha ulteriori suggerimenti su questo problema?

A seconda della versione di HTML che stai provvedendo a:

  • HTML 5 afferma che l’elemento “può essere avvolto su interi paragrafi, elenchi, tabelle e così via, anche intere sezioni, purché non vi sia contenuto interattivo all’interno (ad es. Pulsanti o altri collegamenti)”.

  • HTML 4.01 specifica che elementi possono contenere solo elementi in linea . Un

    è un elemento di blocco , quindi potrebbe non apparire all’interno di un .

    Ovviamente sei libero di disegnare un elemento in linea in modo tale che sembri essere un blocco, o in effetti stile un blocco in modo che sia reso in linea. L’uso dei termini inline e block in HTML si riferisce alla relazione degli elementi con la struttura semantica del documento, mentre gli stessi termini in CSS sono legati più allo stile visivo degli elementi. Se si rendono gli elementi in linea visualizzati in modo blocky, va bene.

    Tuttavia, è necessario assicurarsi che la struttura del documento abbia ancora senso quando il CSS non è presente, ad esempio quando si accede tramite una tecnologia di assistenza come uno screen reader o, in realtà, se esaminato dal potente Googlebot.

No, non verrà convalidato, ma sì generalmente funzionerà nei browser moderni. Detto questo, usa uno span all’interno del tuo ancoraggio e imposta display: block on it, che funzionerà sicuramente ovunque, e lo convaliderà!

Il doc 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 specifica le sue parole come segue

Le parole chiave “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “DOVREBBE”, “NON DOVREBBE”, “RACCOMANDATO”, “MAGGIO” e “OPZIONALE” in questo documento sono da interpretare come descritto in [RFC2119]. Tuttavia, per la leggibilità, queste parole non compaiono in tutte le lettere maiuscole in questa specifica.

Con questo in mente, credo che la dichiarazione 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 un’ambiguità sufficiente a dire che HTML 4.01 consente agli elementi in linea di contenere elementi di blocco.

Certamente, i CSS2 hanno un valore di proprietà di visualizzazione, inline-block , che sembra essere adatto allo scopo che descrivi. Non sono sicuro che sia mai stato ampiamente supportato, ma sembra che qualcuno abbia anticipato la necessità di questo tipo di comportamento.

La DTD sembra essere meno indulgente qui, ma il testo della DTD si adatta alle specifiche:

La specifica HTML 4.01 include vincoli sintattici aggiuntivi che non possono essere espressi all’interno dei DTD.

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

Con specifiche HTML5 … Ora è ansible inserire un elemento a livello di blocco all’interno di un elemento in linea. Quindi ora è perfettamente appropriato mettere un ‘div’ o ‘h1’ all’interno di un elemento ‘a’.

Non puoi mettere

dentro – non è valido (X) HTML.

Anche se si disegna una span con display: blocco non è ancora ansible inserire elementi a livello di blocco al suo interno: la (X) HTML deve ancora obbedire alla (X) DTD HTML (qualunque sia la propria), indipendentemente dal modo in cui il CSS altera le cose.

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

C’è una DTD per HTML 4 su http://www.w3.org/TR/REC-html40/sgml/dtd.html . Questa DTD è la forma processabile dalla macchina della specifica, con la limitazione che una DTD governa l’XML e l’HTML 4, in particolare il sapore “transitorio”, consente molte cose che non sono XML “legali”. Tuttavia, ritengo che si avvicini a codificare l’intento degli specificatori.

       

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

Mentre le specifiche possono dire “elementi in linea”, sono abbastanza sicuro che non è previsto che tu possa aggirare l’intento dichiarando il tipo di visualizzazione di un elemento di blocco in linea. I tag in linea hanno una semantica diversa, indipendentemente dal modo in cui potresti abusarne.

D’altra parte, trovo interessante il fatto che l’inclusione di special sembra consentire di nidificare elementi A Probabilmente c’è qualche formulazione forte nella specifica che non consente questo, anche se è sintatticamente sintatticamente in XML, ma non lo porterò avanti poiché non è l’argomento della domanda.

È sbagliato. Usa uno span .

Se hai intenzione di fare il blocco , perché non mettere all’interno del div, essendo un elemento di blocco ti darà lo stesso effetto.

Se lo si modifica in un elemento stile blocco, quindi 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, o mettere il div all’esterno.

Gli elementi a livello di blocco come

possono essere spostati dai tag in HTML5. Sebbene un

sia considerato un contenitore / wrapper per il contenuto del stream e sono considerati contenuto del stream in base a MDN . Semanticamente potrebbe essere meglio creare elementi inline che fungano da elementi a livello di blocco.

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

Ho visto qualcuno usare un’immagine trasparente vuota, 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 …

Proprio come una FYI.

Se il tuo objective è rendere il tuo div cliccabile, puoi usare jQuery / Java Script.

Definisci il tuo div in questo modo:

 
This is my div. Try clicking it!

Il tuo jQuery sarebbe quindi implementato in questo modo:

   

Ciò funzionerebbe anche per più div – come da commento di Tom in questo thread