Wenn Sie daran denken, wie man Texte in einem Textverarbeitungsprogramm verfasst, dann fallen Ihnen sicher die grundlegenden Elemente ein, die man zur Strukturierung von Texten braucht: Absätze, Überschriften und Listen/Aufzählungen dürften dabei am wichtigsten sein. Natürlich gibt es auch in HTML dafür entsprechende Tags und diese sind zudem besonders kurz: Sinnvoll, da sie im Markup auch am häufigsten vorkommen.
Die Auszeichnung von Absätzen in HTML leitet sich vom englischen Paragraph ab:
<p>Inhalt des Satzes</p>
<p>Inhalt des nächsten Satzes</p>
Zwischen Absätzen wird man für eine klare Strukturierung des Textes etwas Abstand lassen (dies lässt sich per CSS kontrollieren). Soll innerhalb eines Absatzes eine neue Zeile beginnen (ratsam ist dies nur nach ganzen Sätzen), so kann dies mit dem nichtpaarigen Tag <br> (nach englisch break) erreicht werden.
<p>Dies ist ein Satz innerhalb eines Absatzes.<br>Und hier beginnt ein neuer Satz.</p>
Der Tag für Überschriften beginnt mit h von englisch "header" und wird mit Ziffern von 1 bis 6 nach Wichtigkeit abgestuft:
<h1>Die wichtigste Überschrift</h1>
<h2>Nicht ganz so wichtige Überschrift</h2>
Nun fügen wir etwas strukturierten Text in unser Dokument ein:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine erste Website</title>
</head>
<body>
<h1>Willkommen im Web!</h1>
<p>HTML hilft uns dabei, unsere Ideen weltweit zu verbreiten.<br>
Mit einer handvoll Tags lässt sich Text klar strukturieren und
übersichtlich präsentieren.</p>
<h2>Der Schlüssel</h2>
<p>Der Browser ist das Fenster in die Welt des WWW. Er ist heute in
fast jeder Tasche und jederzeit mit dem Internet verbunden.</p>
</body>
</html>
Das Ergebnis können Sie wieder per Klick betrachten.
Die angezeigte Darstellung ist schlicht (man könnte auch sagen trist oder dröge) aber zumindest übersichtlich. Dafür sorgen die Standardstile, die jeder Browser auf HTML-Seiten anwendet, die selbst keine Formatierungen per Stylesheet (CSS) anwenden. Daher werden die Absätze mit Abständen versehen, die Überschriften werden größer und fett dargestellt.
Auch wenn wir nun strukturierten Text erstellt haben - es fehlt ein Wesenelement des Web: die Verknüpfung mit anderen HTML-Seiten, der bekannte Link oder Hyperlink. Einen Links setzt man mit dem Tag <a> von englisch anchor. Das entscheidende Attribut, nämlich das Linkziel heißt href und enthält die Zieladresse, die bei Klick auf den vom <a>-Tag umschlossenen Inhalt vom Browser aufgerufen werden soll:
Weitere Informationen erhalten Sie bei <a href="http://www.wikipedia.de">Wikipedia</a>
Bei externen Links ist es meist wünschenswert, dass das Linkziel in einem neuen Browsertab geöffnet wird. Dies erreicht man mit dem Attribut target und dem Wert "_blank". Außerdem sollte man noch einen Titel für den Link setzen, dieser erscheint als Tooltip, wenn man mit dem Mauszeiger über den Link fährt und ist außerdem hilfreich für die Zugänglichkeit der Website, da z.B. Screenreader für Blinde diesen Titel auswerten. Das entsprechende Attribut heißt title kann als Wert einen beliebigen Text enthalten:
Weitere Informationen erhalten Sie bei <a href="http://www.wikipedia.de" target="_blank" title="Wikipedia aufrufen">Wikipedia</a>
Nun können wir in unserem Beispiel-HTML den Begriff "Browser" mit der erklärende Seite bei Wikipedia verlinken.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine erste Website</title>
</head>
<body>
<h1>Willkommen im Web!</h1>
<p>HTML hilft uns dabei, unsere Ideen weltweit zu verbreiten.<br>
Mit einer handvoll Tags lässt sich Text klar strukturieren und
übersichtlich präsentieren.</p>
<h2>Der Schlüssel</h2>
<p>Der <a href="http://de.wikipedia.org/wiki/Webbrowser" target="_blank"
title="Definition in Wikipedia aufrufen">Browser</a> ist das Fenster
in die Welt des WWW. Er ist heute in fast jeder Tasche und jederzeit
mit dem Internet verbunden.</p>
</body>
</html>
Nun werden wir in unser Dokument noch eine Liste/Aufzählung einfügen. Die gesamte Liste wird eingeschlossen vom Tag <ul> (von englisch unordered list) und jedes Element der Aufzählung wird wiederum eingerahmt von einem <li>-Tag. Mit diesem Wissen können wir unserer Seite eine Aufzählung hinzufügen:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine erste Website</title>
</head>
<body>
<h1>Willkommen im Web!</h1>
<p>HTML hilft uns dabei, unsere Ideen weltweit zu verbreiten.<br>
Mit einer handvoll Tags lässt sich Text klar strukturieren und
übersichtlich präsentieren.</p>
<h2>Der Schlüssel</h2>
<p>Der <a href="http://de.wikipedia.org/wiki/Webbrowser" target="_blank"
title="Definition in Wikipedia aufrufen">Browser</a> ist das Fenster
in die Welt des WWW. Er ist heute in fast jeder Tasche und jederzeit
mit dem Internet verbunden.</p>
<h2>Alles in Ordnung?</h2>
<p>HTML hilft uns dabei, Texte zu ordnen:</p>
<ul>
<li>Durch Überschriften</li>
<li>Durch Absätze</li>
<li>Durch Listen</li>
<li>Durch optische Betonungen</li>
</ul>
</body>
</html>
Das Ergebnis sehen Sie hier im Browser. Wenn Sie nun im Editor/in Komodo Edit den Tag <ul> durch <ol> ersetzen, dann erhalten Sie eine "geordnete Liste" (engl. ordered list), die einzelnen Listenpunkte werden hier mit Dezimalzahlen nummeriert.
Die grundlegende Strukturierung und Verknüpfung von Texten per HTML haben wir nun kennen gelernt. Üblicherweise wollen wir in einem Text oftmals auch Hervorhebungen machen, um die Aufmerksamkeit der Leser zu lenken. Die dafür verwendeten Tags lernen wir im nächsten Abschnitt kennen.