var: HTML ist hässlich!

Beitrag lesen

Hallo Jürgen

Vielleicht einfach auf die vielen Leerzeilen verzichten und weniger einrücken:

<head>
  <meta charset = "utf-8">
  <title> Seitentitel </title>
  <meta http-equiv = "expires" content = "0">
  <meta name = "viewport"
    content = "width = device-width, initial-scale = 1.0">
  <link rel = "stylesheet" href = "style/layout.css">
  <meta name = "description" content = "Blafasel">
</head>

Ja, so ähnlich sehen HTML-Quelltexte üblicherweise aus, aber findest du sowas echt übersichtlich oder gar ästhetisch?

Ich denke, das Grundproblem mit der HTML-Syntax ist, dass sie nicht nur ein statisches Dokument erzeugt, sondern auch selbst statisch ist, was aber natürlich auch Vorteile mit sich bringt, wie man meinen sollte, etwa bei der Geschwindigkeit, mit der solcher Quelltext geparst werden kann.

Aber andererseits glaube ich, und man möge mich korrigieren wenn ich damit falsch liege, dass die Verarbeitung von Quelltext - zumindest heutzutage - in der Regel nicht der Flaschenhals ist, wenn es um die Geschwindigkeit geht mit der ein Dokument auf den Bildschirm gebracht wird, sondern wenn es daran hapert werden wohl eher eine schlechte Internetverbindung, eingebundene Bild- oder Videodateien oder von verschiedenen Quellen geladene externe Skripte und Ähnliches daran schuld sein, so dass eine flexiblere Art des Markups, richtig Umgesetzt, kaum ins Gewicht fallen dürfte.

Ich meine, spinnen wir doch mal etwas rum und spielen wünsch dir was! ;-)

Wie wäre es alternativ mit einer Mischung aus ECMAScript Objekt-Literal-Syntax und CSS-Selektoren (natürlich plus HTML-spezifische Features), also etwas in der Art von...

{ html | lang : 'de' }


{ title | 'Seitentitel' }


{ meta

  & charset : 'utf-8'

  & expires : '0'

  & description : 'Lorem ipsum dolor sit amet'

  & author : 'Name'

}


{ meta & viewport : {

    width : 'device-width',

    initial-scale : '1.0'

  }
}


{ link

  & stylesheet | 'style/layout.css'

  & stylesheet | 'style/default.css'

}


{ body + header + nav + ul |

  + li + a : { 'url' | 'Beschreibung' }

  + li + a : { 'url' | 'Beschreibung' }

}


{ body > header + h1 : 'Überschrift' ~ [0] }


{ body + main | role : 'main' |

  + h2 : 'Überschrift'

  + { article | name : 'Lorem ipsum' }

}


{ body > main > article |

  + h3 : 'Überschrift'

  + p + i : 'Lorem ipsum dolor'

  + p : ( #Text )

}


{ #Text |

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
  sed diam nonumy eirmod tempor invidunt ut labore et dolore
  magna aliquyam erat, sed diam voluptua.

}


{ body + footer + a : { 'url' | 'Impressum' } }

...naja, Spinnerei! :-)

Jedenfalls Dank und Gruß,

var ♂