HTML-Grundlagen - Was du als Einsteiger wissen musst

Die Hyper Text Markup Language (HTML) ist genau genommen keine Programmiersprache, sondern eine Auszeichnungssprache - und deshalb super einfach zu beherrschen. Hier findest du alles, was du für den Einstieg brauchst.

Hinweis: Dieser Artikel ist der erste Teil eines Tutoriums. Wie du mit CSS und DIV deiner HTML-Seite ein schickes Layout verpasst, liest du in Teil zwei.

Wie funktioniert HTML?

HTML ist für viele der erste Kontakt zu irgendeiner Form von Quellcode. Zum einen zeigen Webseiten ihren Quelltext wesentlich freiwilliger als Programme und zum anderen ist HTML wirklich super einfach. HTML ist nämlich keine Programmiersprache und folglich gibt es auch keine komplizierten Logiken, Schleifen, Variablen und so weiter. Es handelt sich um eine Auszeichnungssprache die im Grunde nur eine einzige Sache macht: Festlegen, wie genau ein Stück Text aussehen, formatiert sein soll.

Zusätzlich können über HTML weitere Medien wie Videos, Bilder oder Audiodateien eingebunden werden. Aber auch hier geht es nur darum zu sagen: Jetzt kommt ein Bild in folgender Größe und mit folgendem Rahmen. Bei HTML5 kommen dann schließlich noch komplexere Elemente hinzu, beispielsweise das so genannte "Canvas", eine Fläche, auf der der Nutzer zeichnen kann.

Ganz grundsätzlich sieht ein Stück HTML-Code beispielsweise so aus:

<h1>Dies ist eine Überschrift der Stufe 1.</h1>

Inhalte stehen bei HTML immer in so genannten Tags mit spitzen Klammern. Im Beispiel leitet "<h1>" eine Überschrift (Headline) der Stufe 1 ein und "</h1>" beendet die Auszeichnung. Diese Kombination aus ein- und ausleitendem Tag ist standard für fast alle Elemente. Der Slash (/) findet sich immer Ende-Tag.

Einleitende Tags können aber auch weitere Optionen haben, wie das Beispiel eines Hyperlinks zeigt:

<a href="www.heise.de">Ein Link zu heise.</a>

Durch das a-Tag wird der Text zwischen den Tags zu einem Link. Das Link-Ziel wird durch "href" (Hyperlink-Referenz) bestimmt. Damit ist die Grundstruktur der Auszeichnungssprache bereits komplett abgehandelt! Natürlich gibt es etliche Elemente, teils mit vielen vielen Optionen, so dass es am Ende nicht immer ganz trivial ist, das gewünschte Ergebnis zu erreichen. Aber zu den wichtigsten Elementen gibt es später mehr, jetzt geht es erstmal an das Grundgerüst einer jeden HTML-Seite.

Womit du eine HTML-Datei erstellen kannst, erklären wir dir in diesem tipps+tricks-Artikel.

Das Grundgerüst jeder Seite

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Der Seitentitel</title>
</head>
<body>
<p>Ein simpler Paragraph mit beliebigem Text.</p>
</body>

</html>

Jedes HTML-Dokument sollte mit "<!doctype html>" anfangen. Das ist lediglich die Mitteilung an aufrufende Programme wie den Browser, dass es sich um ein Dokument im HTML-Standard handelt.

Es folgt das einleitende HTML-Tag "<html>" - dein gesamter HTML-Code landet zwischen diesem und dem ausleitenden Tag "</html>". Das ist gewissermaßen die große Klammer, die alles zusammenhält. Anschließend folgen zwei weitere solcher Klammern: Im HEAD-Bereich werden Metadaten angegeben und der gesamte Inhalt landet letztlich im BODY-Bereich.

In diesem Beispiel werden im HEAD-Bereich drei wichtige Angaben gemacht: Der Titel sollte immer vorhanden sein; dieser erscheint übrigens in der Titelzeile des Browsers. In den meta-Tags wird hier zunächst die Zeichenkodierung auf das übliche UTF-8 gesetzt - was etwa dafür sorgt, dass Umlaute richtig dargestellt werden. Der zweite meta-Tag legt den so genannten Viewport fest. Damit ist die Anzeigegröße der Seite gemeint, in diesem Fall soll die Seite so breit sein, wie das anzeigende Gerät (device-witdh) und mit in Originalgröße (initial-scale=1.0) angezeigt werden. Beide meta-Tags sind optional, dürften aber in fast allen Fällen angebracht sein.

Jetzt kommt endlich der spanndende Part, wo du dich kreativ ausleben kannst: Im BODY-Bereich steht bislang nur ein einzelner Paragraph, gekennzeichnet durch das p-Tag. Für den Anfang könntest du also einfach den obigen Text in eine Textdatei kopieren, diese zum Beispiel "meine-erste-seite.html" nennen und per Drag&Drop auf den Browser ziehen - es erscheint eine langweilige, aber korrekte HTML-Seite.

Die wichtigsten Elemente

Du kennst nun den Aufbau von HTML-Seiten und -Tags - Zeit, ein paar wichtige Inhaltselemente und ihre zugehörigen Tags kennen zu lernen. Ein typischer Textaufbau könnte etwas so aussehen: Überschrift, Absatz, Bild, Unter-Überschrift, Liste, Unter-Unter-Überschrift, Tabelle. Damit ließen sich bereits ziemlich komplexe Webseiten basteln. Die Überschrift der höchsten Hierarchiestufe kennst du bereits, alle weiteren laufen nach dem selben Muster:

<h1>Überschrift der Stufe 1</h1>
<h2>Überschrift der Stufe 2</h2>
<h3>Überschrift der Stufe 3</h3>

Die Überschriften werden von Stufe zu Stufe kleiner, ganz ähnlich, wie du es vielleicht von Texteditoren wie Microsoft Word oder LibreOffice Writer kennst. Absätze per p-Tag hatten wir bereits, Bilder sind neu:

<img src="ein-bild.jpg" width="1000" height="1000" alt="Ein Beispielbild" />

Beim img-Tag für Bilder gibt es zunächst etwas Neues: Es fehlt das separate abschließende Tag - stattdessen wird das Bild-Tag direkt hier per "/>" geschlossen. Warum? Ganz einfach: Es gibt keinen Inhalt, der zwischen zwei Tags stehen könnte. Dass Bild wird über die Option "src" (Source/Quelle) angegeben. Wenn Bild und HTML-Datei im selben Ordner liegen genügt der Dateiname, ansonten müsste der komplette Pfad zum Bild angegeben werden. Über "width" und "height" werden Breite und Höhe angegeben. Statt absoluter Pixel-Werte könnte hier zum Beispiel auch "50%" stehen, um das Bild über die halbe Bildschirmgröße zu zeigen. Die alt-Option sollte nie fehlen: Wenn ein Bild nicht angezeigt werden kann, wird stattdessen dieser alternative Text angezeigt - der entsprechend aussagekräftig sein sollte. Auch für sehbehinderte Nutzer sind diese Tags enorm wichtig.

Und noch etwas kann man am Bild-Tag lernen: Verschachtelung. Wie wäre es, das Bild mit einer Website zu verlinken?

<a href="https://www.heise.de"> <img src="ein-bild.jpg" /> </a>

Statt eines Texts, steht hier innerhalb der a-Tags schlicht ein Bild-Tag und schon ist das Bild anklickbar.

Ein weiteres beliebtes Element ist die Liste - zunächst als nummerierte Version:

<ol>
<li>Erster Punkt</li>
<li>Noch ein Aspekt</li>
<li>Und so weiter</li>
</ol>

Das ol-Tag leitet eine nummerierte Liste ein, jedes Listenelement wird von einem li-Tag umschlossen. Und wenn du lieber eine unnummerierte Bullet-Liste haben möchtest, tausche einfach die ol-Tags gegen ul-Tags aus - so einfach kann Web-Layout sein! Aber nicht alles ist so einfach. Daher zum Schluss ein etwas aufwändigeres Gestaltungselement, eine Tabelle mit zwei Spalten und drei Zeilen:

<table>
<tr>
<th>Kopf Spalte 1</th>
<th>Kopf Spalte 2</th>
<th>Kopf Spalte 3</th>
</tr>
<tr>
<td>Zelle 2/1</td>
<td>Zelle 2/2</td>
<td>Zelle 2/3</td>
</tr>
<tr>
<td>Zelle 3/1</td>
<td>Zelle 3/2</td>
<td>Zelle 3/3</td>
</tr>
</table>

Das table-Tag umschließt die gesamte Tabelle. Die tr-Tags stehen für "Table Row" und jedes tr-Tag-Paar definiert eine Zeile der Tabelle. Innerhalb dieser Zeilen werden die Spalten definiert: In der ersten Zeile werden über die "Table Head"-Tags (th) zunächst die Spaltenüberschriften festgelegt. In den weiteren Zeilen werden via "Table Data"-Tags (td) die einzelnen Zellen mit Inhalten gefüllt.

Mit Tabellen kann man sich recht lange aufhalten - verschachtel hier einfach mal ein wenig alle dir bekannten Inhaltselemente und du wirst schnell sehen, dass HTML nicht immer trivial ist.

Wie geht es weiter?

Du solltest jetzt bereits ganz simple HTML-Seiten erstellen können. Zwei Dinge fehlen noch, damit Du tatsächlich eine ganze Homepage aufsetzen könntest. Zunächst mal die Veröffentlichung: Wenn du einen Webspace [Link auf Hosting-Basics-Artikel] hast, genügt es, die HTML-Dateien in das Hauptverzeichnis zu legen (meistens "www", "www-root" oder "htdocs") und die Startseite "index.html" zu nennen.

Außerdem sollte Du noch Seiten verlinken können, was genauso funktioniert, wie externe Links:

<a href="seite2.html">Ein Link auf die nächste Seite.</a>

Wenn du deinen HTML-Code lieber sofort im Browser testen möchtest, geht das natürlich auch online, beispielsweise bei w3chools.com.

w2schools

Alle hier erwähnten Code-Beispiel im Online-Editor von w3schools.com.

Um "echte" Webseiten zu erstellen, werden sich dir jetzt vermutlich einige Fragen stellen. Zum Beispiel, wie du Schriftarten und Farben festlegen kannst (Stichwort CSS), wie sich Inhalte in ein sauberes Layout bringen lassen (Container-Elemente) oder wie zum Beispiel Suchformulare angelegt werden. Und natürlich: Videos einbinden. Die Antworten findest du hier.