Div-Suppe in brauchbares HTML wandeln.

[Matthias Scharwies]

Servus!

hat sich jemand schon einmal daran versucht (oder kennt eine Quelle) schlechtes HTML in brauchbares HTML zu wandeln.

Ja, sowohl Tabellen-Layout, als auch divs.

Ich habe das nur manuell gemacht, indem ich bei Tabellen den Inhalt aus der Webseite kopiert hatte und dann jeden Zeilenumbruch mit einem <p> ergänzt hatte. Die wenigen Überschriften und die fehlenden Bilder hatte ich dann einzeln gesetzt.

Bei div-Suppe hatte ich alle divs einfach entfernt. Die typische Vereins-Webseite benötigt keine article- und section-Abschnitte.

Ich weiss, dass ist schon ein Widerspruch in sicht selbst.

Nein, du willst Markup semantisch verbessern, ist doch völlig leigtim.

Aber mir stellt sich die Frage, ob zu einem gewissen Grad man ggfs. mit RegExp bzw. mit computed Styles die div-Supper wieder etwas optimieren kann.

Wir überarbeiten grad die fertigen Layouts.

Erst testen wir mit dem W3C-Validator, dann mit Wave WebAIM.

Dieser Tester auf Barrierefreiheit vergleicht HTML und CSS –
Text, der größer als 2em ist, triggert die Frage, ob das eine Überschrift sei.

#############

Ich habe hier HTML-Code vorliegen, bei dem jede Zeile ein eigenes div-Element beseitzt. Also in etwa so:

<div>Text für die erste Zeile mit Zeilen- </div>
<div>umbruch in diese zweite Zeile hier.</div>
<div>Und hier ist die dritte Zeile,</div>

vereinfacht wandeln in:

<div>Text für die erste Zeile mit Zeilenumbruch in diese zweite Zeile hier. Und hier ist die dritte Zeile,</div>

Ziel wäre für mich ein einziges <p> ... </p> – du willst doch semantisches HTML.

Ich würde alle <div> durch <p> ersetzen, aber so vorgehen:

RegeX^[1]+</div>+ Zeilenumbruch+<div> -> Leerzeichen

→ die vielen Zeilenumbrüche fallen weg.

Jetzt <div> in <p> umwandeln und das Ergebnis anschauen.

ZUsätzlich müsstest du dein CSS auswerten und schauen, welche div-Elemente optisch als Überschrift angezeigt werden. Hier ist es für Screenreader und Suchmaschinen zwingen erforderlich, dass

<div class="größer"> eben als <h2> (o.ä.) ausgezeichnet wird

CSS via display: inline & Co ist keine Lösung.

Genau! Es soll ja das HTML verbessert werden.

Herzliche Grüße
Matthias Scharwies

---

1. Ich weiß nicht, ob dein Editor solche Regexe /^[A-Za-z0-9]+$/im Suchen und Ersetzen erlaubt - ich würde zuerst alle Kombinationen mit !,?,. </div><div> in !</p><p> und dann die restlichen </div><div> durch ein Leerzeichen ersetzen. ↩︎