Heute gelernt: Padding auf a Elementen kann merkwürdige Folgen haben.

[Rolf B]

Hallo alle,

ich hatte dieses HTML:

<div>
   <a href="..."><div>Text 1</div></a>
   <a href="..."><div>Text 1</div></a>
   <a href="..."><div>Text 1</div></a>
</div>

Sowas macht man nicht? Keine Ahnung, das ist das HTML für die Suchvorschläge im Wiki und sieht auch in der Wikipedia so aus.

Im Hauptwiki sieht das ordentlich aus. Im Testwiki dagegen war jeder Suchvorschlag von einer Leerzeile davor und dahinter begleitet. Und ich hab zum Verzweifeln nicht rausgekriegt, warum nicht.

Dem a Element ein display:block zu geben, hat es geheilt. Aber warum?

Schließlich habe ich angefangen, Stylesheets zu löschen. Ergebnis: Unser custom.css löst es aus. Dann habe ich solange Zeilen daraus gelöscht (die Style-Bearbeitung im Firefox ist großartig dafür), bis der Fehler weg war.

Tja.

a {
   padding-inline: 0.1em;
}

ist schuld. Das a Element ist eigentlich transparent, sollte also das Flowmodell seines Kindelements übernehmen. Das ist ein div.

Dachte ich. Die Transparenz bezieht sich aber nur darauf, dass das a Element das Inhaltsmodell seines Elternelements übernimmt. Andersrum ist da gar nichts transparent.

Denn nachdem ich dem a eine Border gegeben habe, sah es so aus:

Heißt: Er hat das a Element inline dargestellt und das div-Element, das ein Blockelement ist, vom Padding des a-Elements weggerissen. Deswegen hat der display:block auf dem a Element das geheilt, das hat den inline-Kontext entfernt.

Und ja, wenn man sich für ein a Element die computed styles geben lässt und display anschaut - es ist inline. Ich habe also ein block-Element, darin ein inline-Element und darin wieder ein block-Element - was erlaubt ist wegen des transparenten Content-Model von <a>. Aber das Padding lässt den Browser in diesem Fall durchdrehen…

Ich hab mal einen Schlauberger dazu befragt und gebe das hier wieder, weil Tom sich für den Schlauberger interessierte…

Rolf

When I put a HTML block element into an inline element, is that allowed?

ChatGPT

No, it is not allowed to put a block-level element inside an inline-level element in HTML (... jede Menge Erklärungen)

Rolf

Mediawiki uses a suggestion list that is build with a Elements. In each a Element is a div Element. So this is an HTML error?

Ja, ich habe "build" statt "built" geschrieben 😟

ChatGPT

It is not necessarily an HTML error to have a div element inside an a element in HTML, but it is not considered good practice and can cause accessibility issues.

**ABORT**

Rolf

Sorry, can you write that in german?

ChatGPT (without missing a beat)

Es ist nicht unbedingt ein HTML-Fehler, ein div-Element innerhalb eines a-Elements in HTML zu haben, aber es wird nicht als bewährte Praxis angesehen und kann zu Zugänglichkeitsproblemen führen.

Die HTML-Spezifikation definiert das Inhaltsmodell für das a-Element als "transparent", was bedeutet, dass der Inhalt innerhalb des a-Elements durch sein übergeordnetes Element bestimmt wird. Das Inhaltsmodell für das div-Element ist jedoch als "Fließinhalte" definiert, was bedeutet, dass es dazu gedacht ist, andere Blockelemente und nicht Inline-Elemente wie das a-Element zu enthalten.

Ein div-Element innerhalb eines a-Elements zu haben, kann es für Benutzer mit Hilfstechnologie (wie Bildschirmlesegeräten) schwierig machen, den Inhalt zu navigieren und zu verstehen, da die verschachtelten Elemente Verwirrung darüber verursachen können, was anklickbar ist und was nicht.

Im Falle der Vorschlagsliste von MediaWiki wird es wahrscheinlich so sein, dass die div-Elemente für Styling- und Layout-Zwecke verwendet werden, anstatt für ihren beabsichtigten Zweck als blocklevel Container. Obwohl dies nicht streng konform zu den HTML-Standards ist, ist es in der Webentwicklung eine gängige Praxis, Elemente auf unkonventionelle Weise zu verwenden, um gewünschte Effekte zu erzielen.

Der Kamerad macht mir doch ein bisschen Angst 😨. Er hat gerafft, dass das erste "a" in "In each a Element is a div Element." kein unbestimmter Artikel ist, sondern das <a> Element. Wow.

Rolf