verweise - html tags übersicht




Ist das Setzen eines Div in einen Anker jemals richtig? (9)

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 als display:block im Stylesheet display:block ? Ist es immer noch falsch? Die HTML 4.01-Spezifikation für Block- und Inline-Elemente scheint so zu sein:

Stylesheets bieten die Möglichkeit, das Rendern beliebiger Elemente anzugeben, einschließlich der Frage, ob ein Element als Block oder Inline gerendert wird. In einigen Fällen, wie z. B. ein Inline-Stil für Listenelemente, mag dies angebracht sein, aber im Allgemeinen wird Autoren 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 Version von HTML, für die du dich entscheidest:

  • HTML 5 besagt, dass das <a> -Element um ganze Absätze, Listen, Tabellen und sogar ganze Abschnitte gewickelt werden kann, solange sich kein interaktiver Inhalt darin befindet (zB Schaltflächen oder andere Links).

  • HTML 4.01 gibt an, dass <a> -Elemente nur Inline-Elemente enthalten dürfen. Ein <div> ist ein Blockelement , daher darf es nicht in einem <a> .

    Natürlich steht es Ihnen frei, ein Inline-Element so zu stylen, dass es ein Block zu sein scheint , oder einen Block so zu stylen, dass er inline gerendert wird. Die Verwendung der Begriffe inline und block in HTML bezieht sich auf die Beziehung der Elemente zur semantischen Struktur des Dokuments, während sich die gleichen Begriffe in CSS mehr auf die visuelle Gestaltung der Elemente beziehen. Wenn Sie Inline-Elemente auf eine blockartige Weise anzeigen, ist das in Ordnung.

    Sie sollten jedoch sicherstellen, dass die Struktur des Dokuments immer noch Sinn macht, wenn CSS nicht vorhanden ist, beispielsweise beim Zugriff über eine unterstützende Technologie wie einem Bildschirmleseprogramm - oder wenn es vom mächtigen Googlebot überprüft wird.


Das W3C-Dokument verwendet keine Konzepte wie " Falsch" und " Sünde" , aber es verwendet diejenigen , die Mittel bereitstellen , angemessen und entmutigt sein können .

Im zweiten Abschnitt von Abschnitt 4 werden die Wörter in der 4.01-Spezifikation wie folgt aufgeführt

Die Schlüsselworte "MUSS", "MUSS NICHT", "ERFORDERLICH", "MÜSSEN", "SIND NICHT", "SOLLTEN", "SOLLTEN NICHT", "EMPFOHLEN", "MAI" und "OPTIONAL" in diesem Dokument sind interpretiert werden wie in [RFC2119] beschrieben. Aus Gründen der Lesbarkeit erscheinen diese Wörter in dieser Spezifikation jedoch nicht in Großbuchstaben.

In Anbetracht dessen denke ich, dass die definitive Aussage in 7.5.3 Block-Level und Inline-Elementen steht , wo es heißt

Im Allgemeinen enthalten Inline-Elemente möglicherweise nur Daten und andere Inline-Elemente.

Die Bedingung "allgemein" scheint eine ausreichende Mehrdeutigkeit einzuführen, um zu sagen, dass HTML 4.01 es zulässt, dass Inline-Elemente Blockelemente enthalten.

Sicherlich hat CSS2 einen Anzeigeeigenschaftswert, inline-block , der für den von Ihnen beschriebenen Zweck geeignet erscheint. Ich bin nicht sicher, ob es jemals breite Unterstützung fand, aber es scheint, dass jemand die Notwendigkeit für diese Art von Verhalten antizipiert hat.

Die DTD scheint hier weniger fehlerverzeihend zu sein, aber der w3.org/TR/REC-html40/sgml/dtd.html weist auf die Spezifikation hin:

Die HTML 4.01-Spezifikation enthält zusätzliche syntaktische Einschränkungen, die nicht in den DTDs 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 einfügen. Ich glaube nicht, dass HTML dies verbietet, und CSS erlaubt dies eindeutig. Um also die Titelfrage zu beantworten, ob es jemals richtig ist, sage ich ja. Nach den Maßstäben ist es manchmal richtig.


Es gibt eine DTD für HTML 4 unter w3.org/TR/REC-html40/sgml/dtd.html . Diese DTD ist die maschinell verarbeitbare Form der Spezifikation, mit der Einschränkung, dass eine DTD XML und HTML 4 beherrscht, insbesondere die "transiente" Variante, die viele Dinge erlaubt, die kein "legales" XML sind. Dennoch denke ich, dass es der Kodifizierung der Absicht der Spezifizierer nahe kommt.

<!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 Gesamtzahl der zulässigen Tags interpretieren.

Obwohl die Spezifikation "Inline-Elemente" enthält, bin ich mir ziemlich sicher, dass es nicht beabsichtigt ist, dass Sie die Absicht umgehen können, indem Sie den Anzeigetyp eines Blockelements als Inline deklarieren. Inline-Tags haben unterschiedliche Bedeutungen, unabhängig davon, wie Sie sie missbrauchen.

Auf der anderen Seite finde ich es faszinierend, dass der Einschluss von special Elementen das Verschachteln von A Elementen zulässt. Es gibt wahrscheinlich eine starke Formulierung in der Spezifikation, die dies nicht zulässt, selbst wenn es XML-syntaktisch korrekt ist, aber ich werde das nicht weiter verfolgen, da es nicht das Thema der Frage ist.


Es ist falsch. Verwenden Sie eine span .


Kurze Antwort ist hier.

Ja, so ist es. Es ist möglich.


Mit HTML5-Spezifikation ... Es ist nun möglich, ein Element auf Blockebene innerhalb eines Inline-Elements zu platzieren. Jetzt ist es also vollkommen angemessen, ein "div" oder "h1" in ein "a" -Element zu setzen.


Nur als ein FYI.

Wenn Ihr Ziel darin besteht, Ihr div klickbar zu machen, können Sie jQuery / Java Script verwenden.

Definieren Sie Ihr div so:

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

Ihre jQuery wäre dann wie folgt implementiert:

 <script type="text/javascript">

    $(document).ready(function () {

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

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


Sie können <div> in <a> - es ist kein gültiger (X) HTML-Code.

Auch wenn Sie einen Bereich mit display: block formatieren, können Sie immer noch keine Elemente auf Blockebene einfügen: Der (X) HTML muss immer noch der (X) HTML DTD folgen (egal, welche Sie verwenden), egal wie das CSS ist verändert die Dinge.

Der Browser wird es wahrscheinlich anzeigen, wie Sie möchten, aber das macht es nicht richtig.


Wenn Sie sich die Mühe machen, <a> Block zu machen, warum legen Sie nicht <a> in das div, da es ein Blockelement ist, wird es Ihnen den gleichen Effekt geben.







html