HTML lernen für Anfänger

Heutzutage gibt es viele Tools um Webseiten zu bauen, man braucht sich also nicht unbedingt die Mühe machen und seine Seite komplett selber zu programmieren. Trotzdem ist es sehr nützlich Grundkenntnisse in HTML zu haben um individuelle Anpassungen vorzunehmen. Und auch für die Suchmaschinenoptimierung ist es wichtig zu wissen was da überhaupt auf der Seite passiert, welche HTML-Tags dafür besonders relevant sind.

Das Grundgerüst von HTML

HTML ist die Abkürzung für Hypertext Markup Language. Um ein HTML-Dokument zu erstellen braucht man nur einen normalen Texteditor und speichert dann die Datei mit der Endung .html ab. HTML-Tags bestehen aus einer öffnenden spitzen Klammer < und einer schließenden spitzen Klammer >

Das Grundgerüst

<!Doctype html> – sagt dem Browser das es sich um ein HTML-Dokument handelt.
<html> – Dokumentbeginn
<head> – Kopfbereich
<meta charset=“utf-8″> – Zeichensatz um Sonderzeichen richtig darzustellen
<title>Dein Titel</title> – Der Titel des Dokuments, wird im Browsertab angezeigt
</head> – Kopfbereich schließen
<body> – Hauptbereich
In diesem Bereich kommen die gesamten Inhalte die dargestellt werden sollen.
</body> – Hauptbereich schließen
</html> – Dokumentende

HTML-Tags um Text zu formatieren

Es gibt verschiedene Tags um den Text z.B. fett oder kursiv zu formatieren.

<p>Das ist ein Absatz</p>

<b>Text</b> oder <strong>Text</strong> erzeugen fetten Text, beide sind vom Aussehen gleich, aber <strong> sagt der Suchmaschine das es sich um einen besonders wichtigen Textteil handelt.

<i>Text</i> oder <em>Text</em> erzeugen kursiven Text, genau wie beim fetten Text ist das Aussehen gleich, aber <em> sagt der Suchmaschine das es sich um wichtigen Text handelt.

<ins>Text</ins> erzeugt unterstrichenen Text

<del>Text</del>durchgestrichener Text

<mark>Text</mark>markierter Text

Überschriften werden mit <h1></h1> bis <h6></h6> formatiert. <h1> ist die größte Überschrift und <h6> die kleinste.

Dann ist auch noch das HTML-Tag für einen Zeilenumbruch wichtig. Das ist <br> ein Tag ohne schließendes Element.

Listen formatieren mit HTML

In HTML gibt es zwei verschiedene Arten von Listen, einmal die ungeordnete Liste <ul> und die geordnete Liste <ol>. Außerdem besteht jede Liste aus verschiedenen Listenelementen <li>.

<ul>
<li>
Text</li>
<li>
Text</li>
</ul>

  • Listenelement
  • Listenelement

Links und Bilder mit HTML einfügen

Links werden in HTML mit dem Tag <a href=“https://linkdomain.de“>Linktext</a> eingefügt.

Und Bilder haben das Tag <img src=“bildquelle.jpg“>, ohne schließendes Tag.

HTML lernen

Ein gutes Buch um HTML zu lernen ist: HTML5 und CSS3: Das umfassende Handbuch* vom Rheinwerk Verlag.

Wenn man noch tiefer in HTML einsteigen möchte gibt es auch online einige interessante Quellen. Auf W3Schools.com findet man eine große HTML-Referenz.

* Affiliatelink / Werbung