Einfach HTML – Was HTML ist und wie Du es anwenden kannst

Titelbild dieses Eintrags
Photo by Adi Goldstein on Unsplash

Oh Mist, verklickt…

Sicher kennst Du es. Man surft gemütlich im Web und zack, landet man auf einer seltsamen Seite mit vielen komischen Zeichen. Vermutlich hast Du aus Versehen auf [Seitenquelltext anzeigen] geklickt und blickst nun direkt auf das Grundgerüst der aktuellen Website. Aber was ist das genau?

Hypertext Markup Language

HTML steht nicht für How To Meet Ladies, sondern für Hypertext Markup Language. Es handelt sich um eine Auszeichnungssprache die dafür zuständig ist, Texte oder allgemein Inhalte in digitalen Dokumenten (Websites) zu strukturieren. Mit HTML erstellt man Überschriften, Textblöcke, Tabellen und noch vieles mehr. Allerdings nur die Struktur und deren Inhalt. Wenn das ganze nun auch noch hübsch aussehen soll, werden noch weitere Sprachen benötigt.

Hier mal ein Beispiel einer einfachen HTML-Seite (Lass Dich nicht vom Namen abschrecken, SFW):
http://motherfuckingwebsite.com/

Langweilig oder? Aber das ist nun mal der Grundstein einer jeden Website.

Tags

HTML besteht ausschließlich aus sogenannten Tags. Das sind diese Dinger. <html></html> Einmal geöffnet und wieder geschlossen, für den Inhalt ist dazwischen Platz.

Jeder Tag bzw. jedes Tag-Pärchen erzeugt ein Element mit besonderen Eigenschaften. So steht <h1> für eine große Überschrift, oder <p> für einen Paragraphen.

Es gibt ganze 114 (Stand 06.09.19) von diesen Tags. Obwohl einige davon schon veraltet oder so neu sind, dass Du sie besser nicht (mehr) verwenden solltest.

Hier mal eine Übersicht: https://developer.mozilla.org/de/docs/Web/HTML/HTML5/HTML5_element_list

<h1>Deine Überschrift</h1>
<p>Dein Text</p>

Inline- und Block-Elemente

Bei den vielen Elementen (Tags) ist zwischen Inline– und Block-Elementen zu unterscheiden.

Block-Elemente wie <div> <h1> oder <p> sind dafür zuständig, einen bestimmten Bereich für Text oder andere Elemente abzugrenzen.

Inline-Elemente dagegen, setzt man direkt in den Text. Diese passen sich dem Textfluss an und sorgen dafür, dass z.B. ein Textabschnitt fett, unterstrichen oder kursiv angezeigt wird.

<p>Dieser Text ist in einer Box und enthält <strong>fette Wörter</strong>!</p>

Man kann auch beliebig viele Elemente ineinander verschachteln.

<div>
  <p>
    <strong>Ich bin fett!</strong>
  </p>
</div> 

Gar nicht so schwer oder?

Attribute

Attribute sind zusätzliche Angaben in Tags. Manche Tags kann man optional mit Attributen ausstatten, andere dagegen funktionieren nur mit bestimmten Attributen.

Als Beispiel binden wir doch einmal ein Bild ein:

<img src="https://link.zu.deinem.bild" /> 

Hier siehst Du das src (Source) Attribut. Mit diesem Attribut gibt man bei einem Image-Element die URL zu dem gewünschten Bild an. Dieses Attribut ist zwingend notwendig, da dieser Tag sonst einfach nicht funktioniert.

Laut Mozilla gibt es 119 (Stand 06.09.19) verschiedene Attribute, aber keine Angst, davon brauchst man nur die wenigsten. Viele davon sind auch nur für spezielle Fälle.

Hier mal eine Liste mit sämtlichen Attributen: https://developer.mozilla.org/de/docs/Web/HTML/Attributes

Die häufigsten Attribute sind id und class. Mit id weißt man einem Element einen eindeutigen Identifier zu, welcher im ganzen Dokument nur einmal vorkommen darf. Mit class werden ein oder mehrere Elemente gekennzeichnet, die sich meist ein paar Eigenschaften teilen.

<h1 id="title" class="blue">Überschrift</h1> 

Hier siehst Du eine Überschrift mit einer id=title und class=blue. Beide Attribute könnte man nun mit CSS oder JavaScript ansprechen, aber wie das geht, zeige ich ein anderes Mal.

Self-closing Tags

Ist Dir oben bei <img /> etwas aufgefallen? Richtig. Dieser Tag sieht etwas anders aus, denn er wird nicht extra wieder geschlossen.

Hierbei handelt es sich um self-closing Tags. Diese Tags haben keinen, bzw. benötigen keinen direkten Inhalt und können mit einem einzigen Tag geöffnet und sofort wieder geschlossen werden. Einfach ein Slash vor dem letzten Zeichen, und schon war es das.

Es gibt noch viele weitere Tags, die so funktionieren. Zum Beispiel ein Zeilenumbruch mit <br /> oder eine horizontale Linie mit <hr />.

Struktur eines Dokuments

HTML-Dokumente haben eine feste Struktur, die wie folgt auszusehen hat:

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

Kopf-Bereich

Der Kopf deines Dokuments dient für zusätzliche Informationen oder dem Einbinden von weiteren Ressourcen wie StyleSheets oder Schriftarten.

Einfach gesagt landet in diesem Bereich all das, was man nicht direkt sehen kann.

Körper-Bereich

Im Dokumenten-Körper, im <body>, kannst Du dich frei entfalten. Hier landen alle sichtbaren Elemente wie Bilder, Texte, Videos und noch viel mehr.

Das war es auch schon. Natürlich gibt es auch hier noch mehr zu sagen, doch für den Anfang reicht das.

Bereit für Dein erstes HTML

Nun kennst du die Basics von HTML und bist schon in der Lage, eigene HTML-Dokumente anzulegen. Einfach in einem Text-Editor Deiner Wahl eine .html-Datei angelegen und diese im Browser öffnen. Fertig.

Zwar wird es anfangs etwas zäh, aber ich verspreche Dir, dass Du in kürzester Zeit schon viele Tags auswendig kannst!

… und wie man das ganze noch in „schön“ macht, verrate ich Dir ein anderes Mal.