David's Digital Dump

Der <div> Tag definiert im HTML-DOM eine Division oder Sektion. Es ist das vermutlich am öftesten verwendete Element um Layouts zu erstellen. Dies liegt daran, dass es semantisch gesehen, ein Block Element ohne weitere Definition ist. Die Definition, was genau ein solches Element sein soll, erfolgt durch ID- und Klassen-Zuweisungen. Anschließend wird über diese durch CSS das aussehen und die eigentliche Funktion des Elementes definiert.

Nun gibt es aber einen neuen Mitstreiter in der Welt von HTML: Custom Elements.

So kann man Elemente benennen wie man möchte. Einzige Vorraussetzung dafür ist ein Bindestrich im Tag-Name selbst. Ansonsten erkennt der Browser das Element nicht und hält es für ein HTMLUnknownElement, was zu einem Fehler führt. Der Bindestrich sorgt dafür, dass der Browser das Element Prototyp eines HTMLElement erkennt. Diese Elemente enthalten ähnlich wie <div> Elemente keine semantische Definition. [Q1]

Was ist nun der Vorteil? Anhand eines kleinen Beispiels wird der Unterschied deutlich. In einer Struktur die normale <div> Elemente Benutzt kann ein kleines Markup-Stück Beispielsweise wie folgt aussehen:

<div class=“film-info“>
   <div class=“erscheinungs-datum“>
      <!-- Inhalt -->
   </div>
</div>

Mit Custom Elements würde dasselbe Markup so aussehen:

<film-info>
   <erscheinungs-datum>
      <!-- Inhalt -->
   </erscheinungs-datum>
</film-info>

Das Ganze ist deutlich aufgeräumter und die schließenden Tags sind einfach zuzuordnen. Es erinnert stark an XML. Eine Markup-Sprache, die keinerlei vordefinierte Elemente besitzt. Vor allem deshalb wird XML nicht bzw. kaum als Layouting-Markup verwendet, weil die Standardisierung nicht gewährleistet werden kann.

Ein dadurch entstehendes Problem ist, das diese Elemente im Gegensatz zu <div> Elementen standardmäßig als inline-Elemente erkannt werden und nicht als Block-Elemente. Für Layouting-Zwecke müsste also immer der Anzeigemodus zuerst geändert werden. Ein weiterer Nachteil ist die fehlende Zugänglichkeit oder Barrierefreiheit. Screenreader können diese Elemente zum Beispiel nicht kennen und werden so Probleme haben den Inhalt der Seite wieder zu geben.

Ein Zweischneidiges Schwert also.

Quelle:

[Q1]: Taylor Hunt, 2015, "Is <div> obsolete?", url: http://codepen.io/tigt/post/is-div-obsolete

Ich denke als weiterer Nachteil kann hier auch noch die Browserkompatibilität genannt werden, welche gerade bei älteren Browsern sicherlich nicht vorhanden ist. Auch bereits bestehende Web-Projekte werden vermutlich nicht in nächster Zeit das Markup ändern oder eine andere Richtung weg vom div einschlagen.