HTML - Was ist das? Wie geht das?

Das erste Tag

Tag ist Englisch und bedeutet "Schild" bzw. "Etikett". Ein Tag kennzeichnet oder markiert also sprachliche Inhalte auf einer Webseite. Sie bestehen aus eckigen Klammern und einem Bezeichner für die Tagart. Der Browser bekommt vom Server eine Datei mit Tags. Diese entfernt er, interpretiert sie und zeigt den Text dann an, z.B.:

<p>Hallo Welt! Hier steht etwas zwischen zwei "p"s.</p>

Der Browser verwandelt diesen Text mit Tags in:

Hallo Welt! Hier steht etwas zwischen zwei "p"s.

HTML-Element p

Der Buchstabe (der Bezeichner) "p" bedeutet "paragraph" und das ist Englisch für "Absatz". In der Regel werden Informationen von zwei Tags eingerahmt. Manchmal steht aber ein Tag allein für sich (ein sogenannter Standalone-Tag). Der Absatz wird immer mit zwei Absatz-Tags gekennzeichnet. Das ist einer der wichtigsten Tags, daher beginnen wir mit ihm. Ein Absatz ist ein Sinnabschnitt, der einen Text gliedert. Dieser Sinnabschnitt steht zwischen zwei Tags. Der erste Tag hat keinen Schrägstrich "/". Der Endtag hat einen. Und hier ein Absatz mit lore ipsum (das ist Kauderwelsch, um einen Absatz mit irgendetwas zu füllen):

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

Der Absatz mit lore ipsum wird folgendermaßen dargestellt. Man kann beobachten, dass diese eine einzige lange Zeile immer wieder gebrochen wird, um leserlich angezeigt zu werden:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Nun schau dir mal diesen "Absatz" an:

<p>
Ich
bin      ein   
sonderbarer
Absatz 
und
ich 
nehme
viel
Platz 
ein.
Ja         ,         das        tue        ich         .
</p>

So sieht es dann aus:

Ich bin ein sonderbarer Absatz und ich nehme viel Platz ein. Ja , das tue ich .

Was lernen wir hieran? Alle Leerzeichen und Zeilenumbrüche, die zwischen den Wörtern eingefügt sind, werden weggedrückt, bis auf ein einziges. Bei Punkt und Komma am Ende kann man das sehr schön sehen, da ist dann nämlich jeweils ein Leerzeichen, wo es nicht hingehört.

Diese Seite ist nicht bunt. Ja, man kann schon sagen, sie ist etwas trist. Das kommt daher, dass ich hier auf CSS (auf "Styling") bis auf einige Ausnahmen verzichtet habe. Jedenfalls sieht so ein Dokument (HTML-Dokument) aus, das wenig gestylt ist. Vielleicht hilft es zu verstehen, was der Zusammenhang von CSS und HTML ist. Hier auf dieser Seite siehst du relativ reines HTML. Dein Browser mischt noch etwas CSS hinzu, aber sonst ist hier kaum CSS, außer oben im Menu, das auch für mobile Geräte ansprechbar sein muss. Jeweils links und rechts (veranlasst durch den Browser) ist ein Abstand von 8 Pixel (zumindest im Firefox), so dass die Schrift nicht direkt an den Rand des Fensters gerät und auch die Überschriften sind dicker dargestellt. Wenn man es genau betrachtet, ist es eigentlich unmöglich, Text von Form zu trennen, denn jeder Text wird mit einer bestimmten Schriftart dargestellt. Eine Überschrift ist vom ersten Absatz durch einen gewissen Abstand getrennt, der auch angegeben sein will, und dieser Abstand ist auch durch CSS bestimmbar. Hier geht es nämlich um Form. Wenn keine Schriftart wie Arial oder Times angegeben ist, benutzt der Browser trotzdem immer eine bestimmte Schriftart. Und auch die Schriftgröße ist nicht willkürlich, sondern vom Browser vorgegeben (wenn ich als Autor keine Größe angebe), wobei man auch nicht von Semantik oder Sprache bzw. Logik sprechen kann, denn sie ist Form. Man kann es folgendermaßen ausdrücken: HTML stellt reinen Text auf. CSS gibt dem Text anspruchsvollere Form und Aussehen und unterstützt die semantische Ebene eines Textes, indem es den Benutzer führt. Meistens wird dieses "Führen" falsch verstanden und Stilformen nicht als unterstützende Funktionen einer Webseite implementiert, sondern als Qual für den Nutzer. Die Urseite "html.primitivecode.com" beinhaltet schon verhältnismäßig viel CSS. Geh ruhig zurück und vergleiche diese Seite mit html.primitivecode.com. (Guck dir auch mal genau die Linie unter dem Copyright-Symbol an. Fällt dir etwas auf?)

Systemschrift im Firefox
Siehst du, was die Systemschrift ist? Hier ein Abbild aus dem Inspektor von Firefox.


    © primitivecode.com    CSS ist valide! 


HTML5 Powered with CSS3 / Styling, and Semantics