HTML lernen

Update 2025

HTML braucht nun keiner mehr lernen, denn es gibt KI und damit eine viel viel viel schnellere Variante, um Webseiten zu schreiben. Wer dennoch die Basics dieser sogenannte Auszeichnungssprache verstehen möchte, darf gern weiterlesen.

Warum eigentlich HTML lernen?

Zum Leben braucht man es nicht, zum Glücklichsein auch nicht. Sogar das Wetter läßt sich von HTML nicht beeindrucken.
Wer aber mit dem Gedanken spielt, mal selbst eine Webseite zusammen zu bauen oder eine KI-generierte Seite anzupassen, der kommt um HTML nicht herum!

Was ist HTML

HTML heißt Hypertext Markup Language (deutsch: Hypertext-Auszeichnungssprache) und wurde 1989 am CERN in Genf unter der Leitung von Tim Berners-Lee entwickelt.

HTML wurde als Standartsprache für die Darstellung von Internetseiten festgelegt. Dabei diente die Urversion nur der Übertragung und Darstellung reiner Textseiten. Dass man heute mehr als nur Text auf den Webseiten sehen kann, liegt an der kontinuierlichen Weiterentwicklung von HTML. Dafür zuständig ist seit 01. Oktober 1994 das sogenannte W3C - das World Wide Web Consortium mit Sitz in Massachusetts. Vorsitzender ist wiederum Tim Berners-Lee.

Die heute aktuelle Version ist HTML5. Die zwischenzeitlich aufgekommenen XHTML-Varianten 1.0, 1.1 und 2.0 spielen seit Einführung von HTML5 keine Rolle mehr, weshalb XHTML auch nicht mehr weiter entwickelt wird. Der Standart für Webseitendarstellung ist HTML5.

HTML lernen - wie?

nach oben

Um einen ersten Eindruck von HTML-Text zu gewinnen, ist es nützlich, sich den Quelltext irgendeiner Webseite zu betrachten. Das geht ganz einfach:

• Bewege den Mauszeiger auf die Webseite (also nicht auf irgendeinen Balken rechts oder oben und nicht auf Menüleisten)
• Drücke die rechte Maustaste und wähle in dem dann erscheinenden Menü den Punkt "Quelltext anzeigen" oder "Seitenquelltext anzeigen" . (falls in diesem Fenster nur Angaben zu Grafik-Darstellung erscheien, verschiebe die Maus ein Stück und versuche es noch einmal - dann warst du nämlich gerade auf einer Grafik gelandet)
• Für die ganz Geschickten unter Euch gibt es noch die Variante Strg U . Wow!
• Und dann: nicht erschrecken - so kompliziert muss es nicht sein! ...

Probier es doch mal mit dieser Seite und suche den hier geschriebenen Text.

Wenn du den "Quelltext" betrachtest, siehst du Textbereiche, die du auch auf der Webseite sehen kannst und dann Bereiche, die nicht auf der Webseite dargestellt werden - weil sie mit verschiedenen Klammern umgeben sind:

• <  > sind die wichtigsten Klammern - sie umgeben die "HTML-Tags". Ein Tag bestimmt, was mit dem folgenden Element (Text, Bild, usw.) geschehen soll. Ein Tag ist also wie ein Befehl. Zum Beispiel steht das Wort "Tag" im vorigen Satz im Quelltext zwischen den Tags "<b>" und "</b>" , was zu der fetten Darstellung führt. Das b ist die Abkürzung für "bold", dem englischen Begriff für "fett" . (Da HTML-Tags alle von englischen Begriffen abgeleitet wurden, sind ein paar Englischkenntnisse von Vorteil)
• <!-- ... --> beinhalten Kommentare des Programmierers - der von diesen Klammern umschlossene Inhalt hat keine Auswirkung auf die Webseite. (Eine Ausnahme stellen "Conditional Comments" für Internet-Explorer dar. Für weitere Infos mal GOOGLE befragen - Stichwort: "Conditional Comments")
• ( ... ) , { ... } , [ ... ] , $ ...  oder Bereiche, die mit var... oder _...  beginnen, enthalten Anweisungen anderer Skripsprachen - kommen also in HTML nicht vor

Falls du nach diesem kleinen Einblick in die HTML-Welt immer noch Lust hast, deinen Kopf damit zu füllen und auch vor nachtfüllenden Hauruck-Aktionen nicht zurück schreckst, dann herzlichen Glückwunsch! Die Hauptvoraussetzungen zum HTML-Lernen hast du erfüllt.

Und jetzt: Anfangen!

nach oben

Die Startphase im HTML-Programmieren muss dank Internet und öffentlicher Bibliotheken so gut wie gar nichts kosten. Empfehlenswert sind ein paar Bücher aus einer Bibliothek und ein paar weiterführende Tipps aus dem Internet und dann sollte die erste kleine Seite innerhalb eines Monats zu realisieren sein.

Folgende Stichworte können bei der Suche nach passendem Info-Material weiterhelfen:

• HTML5, XHTML1.0, XHTML1.1, HTML4.01
• Zeichenreferenz, Entities,
  Sonderzeichen in HTML, UTF-8 ohne BOM
• HTML-Tags, HTML-Attribute
• Meta-Angaben, Zeichensatz, DTD
• Stylesheet, style-Tag, CSS
• Webseite publizieren, FileClient
• kostenloser Webspace, Provider
• Browserkompatibilität, Conditional Comments
• Webseite Sicherheit
• Javascript, PHP, Perl, Python, ASP
• Validator
• SEO, CMS

Und wie schon gesagt: die KI machts heute in paar Sekunden. Versuchs zum Beispiel mit ChatGPT: schreibe in die Zeile einfach: "schreibe mir eine einfache webseite in html" oder was dir einfällt :)