Sådan gør du HTML-kode mere læsbar

En HTML beautifier er en metode til at formatere HTML, så koden bliver lettere at læse. Udtrykket bruges om en proces, der ordner indryk, linjeskift og mellemrum uden at ændre sidens tilsigtede indhold. HTML beskriver blandt andet overskrifter, afsnit, lister og andre elementer på en side. Når markup står på én lang linje eller har uens mellemrum, kan det være vanskeligt at se, hvor elementer begynder og slutter.

Formatering ændrer normalt ikke HTML-elementernes betydning, men den kan gøre fejl lettere at opdage. En beautifier er derfor ikke det samme som en validator: Formatering gør strukturen mere overskuelig, mens kontrol af gyldig markup er en særskilt opgave. Den oprindelige kode bør bevares, hvis der er risiko for, at ændringer gør den sværere at sammenligne med en tidligere version.

Sådan formaterer du HTML i hånden

En fast fremgangsmåde hjælper med at skabe en tydelig struktur:

1. Find elementerne. Se efter HTML-tags, som normalt står i vinkelparenteser, eksempelvis <p> og </p>. Skeln mellem åbnings- og afslutningstags, og vær opmærksom på elementer, der ikke har et separat afslutningstag.
2. Giv hvert niveau sin plads. Sæt et barn-element på en ny linje og indryk det i forhold til det element, det ligger inde i. Brug samme indrykningsstil gennem hele dokumentet, for eksempel konsekvent mellemrum.
3. Placer afslutningstagget korrekt. Når et indre element er færdigt, skal dets afslutningstag stå før afslutningstagget for det ydre element. På den måde afspejler linjerne den indlejrede struktur.
4. Del lange dele op. Sæt større elementer, såsom lister og sektioner, på separate linjer. Attributter kan også stå mere overskueligt, når de fordeles på linjer, men deres værdier skal bevares nøjagtigt.
5. Kontrollér indholdet. Sammenlign den formaterede tekst med udgangspunktet. Tjek især tekst, attributter, kommentarer og rækkefølgen af elementer, så formateringen ikke utilsigtet ændrer indhold eller markup.

Et enkelt eksempel viser princippet. Koden <div><p>Hej</p></div> kan stå på flere linjer med afsnittet indrykket under div-elementet. Elementerne og teksten er de samme; forskellen er, at indlejringen nu er synlig ved et blik.

Hvad formateringen betyder i praksis

Læsbar HTML er nyttig, når en side skal vedligeholdes, gennemgås eller rettes. Udviklere kan lettere følge forholdet mellem forældre- og barneelementer, finde manglende eller fejlplacerede afslutningstags og se, hvor en bestemt tekst hører til. Det kan også gøre ændringer lettere at drøfte, fordi flere personer kan orientere sig i samme struktur.

HTML indgår i webdokumenter sammen med blandt andet CSS og JavaScript. En beautifier bør derfor ikke forveksles med formatering af disse andre sprog. Hvis HTML ligger inde i en skabelon eller blandes med kode fra et andet sprog, kan automatisk eller manuel omformatering kræve særlig forsigtighed. Skabelonudtryk og særlige mellemrum kan have betydning for den måde, dokumentet behandles på.

Indryk og linjeskift er først og fremmest hjælp til mennesker, der læser koden. De ændrer ikke i sig selv sidens visuelle design, som normalt styres af stilregler, og de gør ikke automatisk markup korrekt. En omhyggelig gennemgang af både struktur og indhold er derfor stadig nødvendig, når HTML skal være let at forstå og vedligeholde.