Was korrekter ist: <h1> <a>… </a> </ h1> ODER <a> <h1>… </ h1> </a>

Sind beide <h1><a ...> ... </a></h1>und <a ...><h1> ... </h1></a>gültiges HTML oder ist nur eines korrekt? Wenn beide korrekt sind, unterscheiden sie sich in ihrer Bedeutung?

Beide Versionen sind korrekt. Der größte Unterschied zwischen ihnen besteht darin, dass <h1><a>..</a></h1>nur der Text im Titel anklickbar ist.

Wenn Sie die Eigenschaft <a>um <h1>und die CSS- displayEigenschaft setzen block(was standardmäßig der Fall ist ), ist dies der gesamte Block (die Höhe des <h1>und 100% der Breite des Containers der<h1> befindet) geklickt werden.

In der Vergangenheit konnten Sie kein Blockelement in ein Inline-Element einfügen, dies ist jedoch bei HTML5 nicht mehr der Fall. Ich würde jedoch denken, dass der <h1><a>..</a></h1>Ansatz konventioneller ist.

In dem Fall, in dem Sie einen Anker in der Kopfzeile platzieren möchten, ist es besser <a id="my-anchor"><h1>..</h1></a>, entweder das idoder das nameAttribut wie folgt zu verwenden: <h1 id="my-anchor">..</h1>oder<h1 name="my-anchor">..</h1>

In vor HTML 5 dieses

<a><h1>..</h1></a>

wird nicht validieren. Sie können es in HTML 5 verwenden. Allerdings würde ich dies verwenden:

<h1><a>..</a></h1>

es sei denn, Sie müssen mehr als <h1> in das <a> einfügen

<a><h1></h1></a>ist nicht W3C-gültig ... Grundsätzlich können Sie keine Blockelemente in Inline-Elemente einfügen

<h1><a>..</a></h1>und <a><h1>..</h1></a>haben sich immer fast gleich verhalten, wenn Stylesheets das Rendering nicht beeinflussen. Fast, aber nicht ganz. Wenn Sie mit der Tabulatortaste navigieren oder sich auf andere Weise auf einen Link konzentrieren, wird in den meisten Browsern ein „Fokusrechteck“ um den Link angezeigt. Für <h1><a>..</a></h1>ist dieses Rechteck nur der Link - Text um. Für <a><h1>..</h1></a>erstreckt sich das Rechteck auf dem verfügbaren horizontalen Raum, da das Auszeichnungs das macht aElement ein Blockelement in Rendering standardmäßig 100% Breite einnimmt.

Das Folgende zeigt, wie ein Fokus <a href=foo><h1>link</h1></a>von Chrome gerendert wird:

Dies bedeutet, dass sich die Effekte auf ähnliche Weise unterscheiden, wenn Sie Elemente formatieren, z. B. indem Sie eine Hintergrundfarbe für Links festlegen.

In der Vergangenheit <a><h1>..</h1></a>wurde in HTML 2.0 für ungültig erklärt, und nachfolgende HTML-Spezifikationen folgten, aber HTML5 ändert dies und erklärt es für gültig. Die formale Definition hat keine Auswirkungen auf Browser, sondern nur auf Validatoren. Es ist jedoch aus der Ferne möglich, dass einige Benutzeragenten (wahrscheinlich keine normalen Browser, sondern z. B. spezialisierte HTML-Renderer, Datenextraktoren, Konverter usw.) nicht <a><h1>..</h1></a>ordnungsgemäß funktionieren, da dies in den Spezifikationen nicht zulässig ist.

Es gibt selten einen guten Grund, eine Überschrift oder einen Text in einer Überschrift zu einem Link zu machen. (Es ist meist unlogisch und schlecht für die Benutzerfreundlichkeit.) Aber eine ähnliche Frage arised hat oft , wenn eine Überschrift zu machen (oder Text in einer Überschrift) ein potenzielles Ziel für einen Link, unter Verwendung zB im <h2><a name=foo>...</a></h2>Vergleich <a name=foo><h2>...</h2></a>. Ähnliche Überlegungen gelten für diese (beide Arbeiten, es kann einen Unterschied geben, da das letztere das aElement zu einem Block macht und vor HTML5 nur das erstere formal zulässig ist). Darüber hinaus sind beide Möglichkeiten veraltet, und es idwird jetzt empfohlen , das Attribut direkt für das Überschriftenelement zu verwenden : <h2 id=foo>...</h2>.

H1-Elemente sind Elemente auf Blockebene und Anker sind Inline-Elemente. Sie dürfen ein Inline-Element innerhalb eines Blockebenenelements haben, aber nicht umgekehrt. Wenn Sie das Box-Modell und die HTML-Spezifikation betrachten, ist dies sinnvoll.

Zusammenfassend ist der beste Weg:

<h1><a href="#">Link</a></h1>

Möchten Sie einen Hyperlink <a href="…">/ verwenden a:linkoder möchten Sie Ihrer Überschrift einen Anker hinzufügen? Wenn Sie einen Anker hinzufügen möchten, können Sie einfach eine ID zuweisen <h1 id="heading">. Sie können es dann als verknüpfenpage.htm#heading .

Wenn Sie die Überschrift anklickbar machen möchten (einen Link), verwenden Sie zuerst <h1><a></a></h1>/ h1 > a- Blocklevel-Elemente und Inline-Elemente darin

Es gibt auch Unterschiede in der Stilhierarchie. Wenn Sie es als haben <h1><a href="#">Heading here</a></h1>, überschreiben die Stile des Ankers die Stile des h1-Elements. Beispiel:

a {color:red;font-size:30px;line-height:30px;}

WIRD ÜBERREGELN

h1 {color:blue;font-size:40px;line-height:40px;}