Div-Suppe in brauchbares HTML wandeln.

[Michael_K]

Hallo,

hat sich jemand schon einmal daran versucht (oder kennt eine Quelle) schlechtes HTML in brauchbares HTML zu wandeln. Ich weiss, dass ist schon ein Widerspruch in sicht selbst. 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. 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>

Ich könnte mir vorstellen, dass ein etwas akzeptables Ergebnis erreichbar wäre, wenn gewissen Textmuster in bestimmter Reihenfolge getestet und entsprechende ANpassungen gemacht werden. CSS via display: inline & Co ist keine Lösung.

Gruss

[Robert B.]

Moin Michael,

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

Ja, SELFHTML ist so eine Quelle 😉

Ich weiss, dass ist schon ein Widerspruch in sicht selbst. 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.

Das kommt darauf an™️. HTML strukturiert eine Seite nach Semantik und div ist gerade ein Element ohne Semantik. Manchmal haben divs CSS-Klassen oder IDs, die auf eine Semantik hindeuten können, z.B. <div class="header"> ⇒ <header>.

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>

Sind das „normale Textabsätze“ oder steckt mehr dahinter, wie z.B. Verse eines literarischen Textes?

vereinfacht wandeln in:

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

Das ist aber etwas komplett Anderes als zuvor! Welche Bedeutung haben die einzelnen div vorher?

Viele Grüße
Robert

[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. ↩︎

[Rolf B]

Hallo Michael,

da ein gutes Markup die Bedeutung der einzelnen Seitenteile ausdrücken soll, ist eine stumpfe Behandlung per Regex eher nicht zielführend.

Ohne ein Verständnis des Seiteninhalts kannst du kein besseres HTML erzeugen. AI Tools können vielleicht einen ersten Aufschlag liefern, ich bezweifle aber, dass die aktuellen LLMs genug Kontext haben, um gutes HTML erschaffen zu können.

Auf dein div Beispiel sind schon andere eingegangen, dazu habe ich erstmal nichts zu ergänzen.

Rolf