Wie mische ich Links (<a> Tag) und Überschriften (<h1> Tag) im Webstandard?

95

Was ist der richtige Code, um einen Link mit Überschrift 1 gemäß den Webstandards zu erstellen?

ist es

<h1><a href="http://stackoverflow.com"> stackoverflow </a></h1>

oder

<a href="http://stackoverflow.com"><h1> stackoverflow </h1></a>

Vielen Dank

html web-standards ahmed
quelle

Antworten:

143

Gemäß Webstandards dürfen Sie keine Blockelemente in Inline-Elemente einfügen.

Da h1es sich um ein Blockelement und aein Inline-Element handelt, ist der richtige Weg:

<h1><a href="#">This is a title</a></h1>

Hier ist ein Link, über den Sie mehr erfahren können: w3 Visuelles Formatierungsmodell

Allerdings gibt es eine Ausnahme , dass in HTML5 ist es gültiges Block-Level - Elemente zu wickeln (wie div, poder h*) in Anker - Tags. Das Einwickeln von Elementen auf Blockebene in andere Inline-Elemente als Anker verstößt immer noch gegen die Standards.

Darko Z.
quelle
19
In HTLM5 hat sich dies geändert. Beide Beispiele werden validiert - validator.w3.org .
Atadj
Schön. Es ist ein leichter Fehler, und während beide seine Logik bestätigen, dass Inline-Elemente natürlich Nachkommen von Elementen auf Blockebene sein sollten.
Bigmadwolf
@pushplaybang - Ich würde sagen, es ist semantischer, den Header in einen Link zu verpacken, es sei denn, nur ein Teil des Headers soll anklickbar sein (ich kann mir keinen Anwendungsfall dafür vorstellen). Unabhängig davon ist es schön, dass beide in HTML5 unterstützt werden.
aaaaaa
47

HTML5 aktualisiert dieses Thema: Es ist jetzt in Ordnung, Elemente auf Blockebene mit A zu versehen, wie unter einer anderen Frage angegeben: https://stackoverflow.com/a/9782054/674965 und hier: http://davidwalsh.name/html5- Elemente-Links

f055
quelle
8
Diese Antwort ist jetzt viel relevanter als die akzeptierte Antwort
Josh Davenport
@ JoshDavenport Die akzeptierte Antwort wurde aktualisiert, um dies widerzuspiegeln
dan-klasson
2

Soweit ich weiß, können Sie mit HTML5 Elemente auf Blockebene in Link-Tags einbinden. In älteren Browsern können jedoch Fehler auftreten. Ich bin auf Firefox 3.6.18 gestoßen und habe moz-rs-Heading = "" in meinen Code eingefügt. So brachen meine Stile. Wenn Sie sich für eine Problemumgehung interessieren, können Sie die Link-Tags in divs einschließen. Im Folgenden wird besser erklärt, warum der zusätzliche Code funktioniert. Http://oli.jp/2009/html5-block-level-links/

Kip-Taten
quelle
1

a > h1 wird Schwierigkeiten bei der Auswahl von Text verursachen

Probleme bei der Textauswahl

Da beide in HTML5 vollständig gültig sind, ist es besser, sie zu verwenden h1 > a

Abhishek
quelle