Ist es jemals richtig, ein Div in einen Anker zu stecken?

Ich habe gehört, dass das Einfügen eines Blockelements in ein Inline-Element eine HTML-Sünde ist:

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

Aber was ist, wenn Sie den äußeren Anker wie display:blockim Stylesheet stylen? Ist es immer noch falsch? Die HTML 4.01-Spezifikation für Block- und Inline-Elemente scheint dies zu glauben:

Stylesheets bieten die Möglichkeit, das Rendern beliebiger Elemente festzulegen, einschließlich der Frage, ob ein Element als Block oder Inline gerendert wird. In einigen Fällen, z. B. bei einem Inline-Stil für Listenelemente, kann dies angemessen sein. Im Allgemeinen wird den Autoren jedoch davon abgeraten, die herkömmliche Interpretation von HTML-Elementen auf diese Weise zu überschreiben.

Hat jemand weitere Tipps zu diesem Thema?

Abhängig von der HTML-Version, für die Sie sich interessieren:

• In HTML 5 heißt es, dass das<a>Element "ganze Absätze, Listen, Tabellen usw., sogar ganze Abschnitte, umschließen darf, solange kein interaktiver Inhalt darin ist (z. B. Schaltflächen oder andere Links)".

• HTML 4.01 gibt an, dass<a>Elemente nur Inline-Elemente enthalten dürfen. A<div>ist ein Blockelement , daher wird es möglicherweise nicht in einem angezeigt<a>.

  Natürlich sind Sie frei , um Stil eines Inline - Element , so dass es scheint so einen Block ein Block oder in der Tat Stil zu sein , dass es inline gerendert wird. Die Verwendung der Begriffe inlineund blockin HTML bezieht sich auf die Beziehung der Elemente zur semantischen Struktur des Dokuments, während dieselben Begriffe in CSS eher mit dem visuellen Stil der Elemente zusammenhängen. Wenn Sie Inline-Elemente blockweise anzeigen lassen, ist das in Ordnung.

  Sie sollten jedoch sicherstellen, dass die Struktur des Dokuments auch dann noch sinnvoll ist, wenn kein CSS vorhanden ist, z. B. wenn Sie über eine unterstützende Technologie wie einen Bildschirmleser darauf zugreifen - oder wenn dies vom mächtigen Googlebot geprüft wird.

Nein, es wird nicht validiert, aber ja, es funktioniert im Allgemeinen in modernen Browsern. Davon abgesehen, verwenden Sie eine Spannweite in Ihrem Anker und setzen Sie display: blocksie ebenfalls ein, die definitiv überall funktioniert und sich bestätigt!

Das W3C-Dokument verwendet keine Konzepte wie falsch und sündig , aber es verwendet solche wie die Mittel , die angemessen und entmutigend sein können .

Tatsächlich listet die Spezifikation 4.01 im zweiten Absatz von Abschnitt 4 ihre Wörter wie folgt auf

Die Schlüsselwörter "MUSS", "MUSS NICHT", "ERFORDERLICH", "MUSS", "MUSS NICHT", "SOLLTE", "SOLLTE NICHT", "EMPFOHLEN", "KÖNNEN" und "OPTIONAL" in diesem Dokument lauten zu interpretieren wie in [RFC2119] beschrieben. Aus Gründen der Lesbarkeit erscheinen diese Wörter jedoch nicht in allen Großbuchstaben dieser Spezifikation.

In diesem Sinne glaube ich, dass die endgültige Aussage in 7.5.3 Block-Level- und Inline-Elementen enthalten ist , wo es heißt

Im Allgemeinen dürfen Inline-Elemente nur Daten und andere Inline-Elemente enthalten.

Die Bedingung "allgemein" scheint genug Mehrdeutigkeit einzuführen, um zu sagen, dass HTML 4.01 es Inline-Elementen erlaubt, Blockelemente zu enthalten.

Sicherlich hat CSS2 einen Anzeigeeigenschaftswert, Inline-Block , der für den von Ihnen beschriebenen Zweck geeignet zu sein scheint. Ich bin mir nicht sicher, ob es jemals allgemein unterstützt wurde, aber es scheint, dass jemand die Notwendigkeit eines solchen Verhaltens vorweggenommen hat.

Die DTD scheint hier weniger nachsichtig zu sein, aber der Text der DTD weicht von der Spezifikation ab:

Die HTML 4.01-Spezifikation enthält zusätzliche syntaktische Einschränkungen, die in den DTDs nicht ausgedrückt werden können.

In einem anderen Kommentar schlagen Sie vor, dass Sie einen Block aktivieren möchten, indem Sie ihn in einen Anker einschließen. Ich glaube nicht, dass HTML das verbietet, und CSS erlaubt es eindeutig. Um die Titelfrage zu beantworten, ob sie jemals richtig ist, sage ich ja. Nach den Maßstäben ist es manchmal richtig.

Mit HTML5-Spezifikation ... Es ist jetzt möglich, ein Element auf Blockebene in ein Inline-Element einzufügen. Jetzt ist es vollkommen angemessen, ein 'div' oder 'h1' in ein 'a'-Element einzufügen.

Sie können nicht <div>hineinstecken <a>- es ist kein gültiges (X) HTML.

Auch wenn Sie einen Bereich mit display: block formatieren, können Sie dennoch keine Elemente auf Blockebene einfügen: Der (X) HTML-Code muss immer noch der (X) HTML-DTD (je nachdem, welche Sie verwenden) gehorchen, unabhängig davon, wie das CSS ist verändert die Dinge.

Der Browser zeigt es wahrscheinlich so an, wie Sie es möchten, aber das macht es nicht richtig.

Es gibt eine DTD für HTML 4 unter http://www.w3.org/TR/REC-html40/sgml/dtd.html . Diese DTD ist die maschinenverarbeitbare Form der Spezifikation, mit der Einschränkung, dass eine DTD XML und HTML 4 regelt, insbesondere die "vorübergehende" Variante, die viele Dinge zulässt, die kein "legales" XML sind. Dennoch denke ich, dass es nahe daran liegt, die Absicht der Spezifizierer zu kodifizieren.

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

Ich würde die in dieser Hierarchie aufgelisteten Tags als die Summe der zulässigen Tags interpretieren.

Während die Spezifikation möglicherweise "Inline-Elemente" sagt, ist es ziemlich sicher, dass Sie die Absicht nicht umgehen können, indem Sie den Anzeigetyp eines Blockelements als Inline deklarieren . Inline-Tags haben unterschiedliche Semantiken, unabhängig davon, wie Sie sie missbrauchen.

Andererseits finde ich es faszinierend, dass die Einbeziehung von specialVerschachtelungselementen zuzulassen scheint A. Es gibt wahrscheinlich eine starke Formulierung in der Spezifikation, die dies nicht zulässt, selbst wenn es XML-syntaktisch korrekt ist, aber ich werde dies nicht weiter verfolgen, da es nicht das Thema der Frage ist.

Elemente auf Blockebene wie <div>können <a>in HTML5 durch Tags umbrochen werden . Obwohl a <div>als Container / Wrapper für den Flussinhalt betrachtet wird und <a>als Flussinhalt gemäß MDN betrachtet wird . Semantisch kann es besser sein, Inline-Elemente zu erstellen, die als Elemente auf Blockebene fungieren.

Wenn Sie die semantische Schwierigkeit vermeiden möchten, Divs in Ankertags zu platzieren, platzieren Sie das Ankertag einfach auf derselben Ebene wie die Divs, wickeln Sie sie alle in einen Container mit der Position: relative ein, machen Sie Ihre Ankertag-Position: absolut und erweitern Sie sie auf Füllen Sie den Behälter. Auch wenn es nicht am Ende des Inhaltsflusses ist, stellen Sie sicher, dass Sie einen Z-Index hineinwerfen, um ihn über dem Inhalt zu platzieren.

Wie vorgeschlagen habe ich einen Markup-Code hinzugefügt:

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

Und die CSS:

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

Wenn Sie sich die Mühe machen wollen, einen <a>Block zu erstellen, warum nicht <a>in das div einfügen, da es ein Blockelement ist, das den gleichen Effekt erzielt.

Wenn Sie es in ein Element im Blockstil ändern, ist es nicht mehr 'falsch', aber es wird wahrscheinlich nicht validiert. Aber es macht nicht viel Sinn, das zu tun, was Sie tun. Sie sollten entweder nur das Ankertag als Element auf Blockebene ohne inneres Div beibehalten oder das Div nach außen setzen.

Es ist falsch. Verwenden Sie eine Spanne .

Ich denke, dass die Leute die meiste Zeit, wenn sie diese Frage stellen, eine Site mit nur Divs erstellt haben, und jetzt muss einer der Divs ein Link sein.

Ich habe gesehen, dass jemand ein transparentes leeres Bild, PNG, in einem Ankertag verwendet hat, um einen Link innerhalb eines Divs herzustellen, und das Bild hatte dieselbe Größe wie das Div.

Eigentlich ziemlich traurig ... aber es funktioniert ...

Sie können dies erreichen, indem Sie das Pseudoelement ":: before" hinzufügen

Reiner CSS-Trick;)

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>

Nur als FYI.

Wenn Sie Ihr Div anklickbar machen möchten, können Sie jQuery / Java Script verwenden.

Definiere dein Div so:

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

Ihre jQuery würde dann folgendermaßen implementiert:

 <script type="text/javascript">

    $(document).ready(function () {

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

Dies würde auch für mehrere Divs funktionieren - gemäß Toms Kommentar in diesem Thread