Semantik vs. Optik

HTML und die Semantik einer Seite ist die eine Seite der Medaille. Wir können uns viel Mühe bei der Strukturierung unserer Inhalte geben, die Seite wird erst durch pfiffige Designideen zu einem Hingucker. Erst die Optik weckt unser Interesse an den Inhalten richtig.

Es kann immer wieder vorkommen, dass wir bei der Auszeichnung einzelner Inhalte zweifeln, welche Semantik die korrekte ist. Ich empfehle zudem immer, nur so viele Tags wie notwendig zu nutzen. Und die „Notwendigkeit“ ist immer wieder ein Knackpunkt. Denn zahlreiche Designideen sind nicht mit einfachen Mitteln zu realisieren. Oft muss man Extra-Code schreiben, um das gewünschte Ergebnis zu erzielen.

Früher hat es mich immer wieder geärgert, wenn ich aus optischen Gründen „mein“ HTML aufblähen musste. Das hat wohl mehr mit Entwicklerstolz als mit allem anderen zu tun. Denn ein zusätzliches DIV oder SPAN interessiert weder eine Suchmaschine, noch einen Screenreader. Und wir sehende Nutzer haben sowieso keine Verbindung zum Quellcode, also kann er uns egal sein.

Mittlerweile habe ich weniger Problem damit, Extra-Code für einen optischen Effekt zu schreiben. Aber es sollte sich im sinnvollen Rahmen halten. Ich bin nun über ein Beispiel gestolpert, bei dem der sinnvolle Rahmen m.E. gesprengt wurde und die naheliegende, saubere Lösung nicht gesucht wurde.

Die Seite „fussball.de“ wird demnächst einen Relaunch erleben. Zu diesem Zweck gibt es eine Infoseite, die mit einem netten Design aufwartet. Die Überschriften haben einen Hintergrund bekommen, der an einen Textmarker erinnert. Dieses Designdetail kommt vor allem im Print immer wieder vor und ist recht beliebt. Lassen wir Geschmacksfragen einmal beiseite, stellt sich die Herausforderung, diese Optik auch im Internet zu realisieren.

Die Herausforderung: eine Headline mit Marker-Hintergrund

Die Überschrift ist also in drei Teile geteilt und die Hintergrundfarben sind immer nur so breit, wie der jeweilige Teil der Überschrift. Der von der Agentur erdachte Code ist dafür denkbar schlecht gewählt. Alle drei Teile sind separate, übereinander verschachtelte Überschriften. Diese befinden sich nicht einmal auf der gleichen Ebene, sondern sind immer in DIV-Container geschachtelt.

Schauen wir uns die Herausforderung einmal genauer an:

  1. Wir benötigen eine Lösung, bei der die Überschrift in zwei oder mehr Teile geteilt werden kann.
  2. Diese Teile sollen einen Hintergrund bekommen.
  3. Der Hintergrund läuft nur so weit, wie der Text läuft.
  4. Der Text hat in alle vier Richtungen Padding.

Ich möchte bei der Lösung dieser Aufgabe die Überschrift nicht aufteilen. Denn es handelt sich schliesslich nicht um drei Überschriften, sondern nur um eine. Ich kann akzeptieren, extra HTML für ein Designergebnis zu schreiben. Dabei sollte aber die Semantik der Seite nicht beeinträchtigt werden. Also umfasse ich alle drei Überschriftsbestandteile mit einem SPAN. Dies nutze ich, um die Hintergrundmarkierung zu realisieren. Es läge jetzt nahe, die SPANs als Blockelemente zu formatieren. Allerdings würden dann die Hintergründe so breit laufen, wie die Überschrift Platz hat. Und alle Markierungen wären gleich breit.

Da der Text aber in alle vier Richtungen ein Padding haben soll, muss ich die SPANs zumindest als Inline-Block-Elemente formatieren. Die gewünschten Zeilenumbrüche realisiere ich dann mit dem BR-Element, das genau für diesen Zweck da ist. Ich vergesse nur gerne, dass es BR gibt.

See the Pen Headline mit Marker-Hintergrund by Jens Grochtdreis (@jensgro) on CodePen.

Das Ergbnis ist nicht so pur und rein, wie ich es gerne hätte. Aber das Designziel ist erreicht, ohne dabei mein HTML zerstört zu haben. Und das ist ein gutes Ergebnis. Ich wünschte, die Entwickler von fussball.de hätten ein wenig über das Designproblem nachgedacht, dann wären sie sicher zum gleichen Ergbenis gekommen.

9 Responses to “Semantik vs. Optik”

  1. MattDiMu sagt:

    Was mich anch dem Lesen dieses Artikels interessiert – was wäre denn ein „pures und reines“ Ergebnis? Die BR-Elemente lassen sich z.B. durch ein

    h2 span {
    float: left;
    }

    ersetzen.

    • Mein pures und reines Ergebnis würde auf die Markierung verzichten. Aber das steht nicht zur Debatte.

      Die Float-Lösung ist auch okay. Aber dafür muss man die Überschrift clearen oder selber floaten. Die gewählte Lösung lässt mich nicht vermuten, dass darüber Kenntnis vorlag. Deshalb wählte ich diese einfache Lösung.

      • Stefan sagt:

        BRs sind Semantisch ja auch eine Pause. Und die glaub ich will ich nicht bei einer Headline haben. Von daher ist die Float-Lösung durchaus legitim.

        • Warum sollen BR-Elemente eine Pause sein? Ich weiss nicht, ob diese hörbar für Screenreader vorgelesen wird. Das wäre schade, da hast Du Recht. Ansonsten ist das einfach nur ein manueller Zeilenumbruch, also eigentlich das richtige Element. Auch wenn es mehr für Absätze gedacht ist.

  2. Peter sagt:

    Textgemarkerte Hintergründe sind eher mir unregelmäßigen Kanten versehen, oft auch etwas wellig. Zudem entsteht beim markern der Zeilen meist ein (weißer) Zwischenraum zwischen gemarkerten Zeilen.

    Von daher erinnert mich das nun gar nicht an Textmarker…

  3. Tom sagt:

    mit der heissen nadel gestrickt, ginge auch ohne br tag:

    http://codepen.io/anon/pen/KoHvd

    • Tom sagt:

      hm, sehr heisse nadel, sehe ich gerade. sobald der container breiter ist, als zwei der „markierten“ abschnitte, stehen diese dann nebeneinander. hm.

  4. Fabian sagt:

    Oder mal ganz böse der h2 width: 1%; und den span white-space: nowrap; geben. 😉

  5. Der Caspers sagt:

    // Bittedanke:
    h1 {
    white-space: pre-line;
    }