HTML und seine Elemente
In Word formatieren wir unseren Text mit Formatvorlagen. Damit beeinflussen wir nicht nur das Aussehen unseres Dokuments, sondern geben dem Programm auch Informationen über die Struktur unseres Texts. Word nutzt diese Informationen beispielsweise um ein automatisches Inhaltsverzeichnis zu generieren.
Auch für unseren Browser ist es wichtig, die Struktur eines Texts zu kennen. Er muss jeden Teil unseres Inhalts eindeutig als Titel, Überschrift, Absatz, etc. identifizieren können. Nur so kann der Browser unser Dokument korrekt darstellen.
Da wir im Web mit reinen Textdateien arbeiten, müssen wir diese Strukturinformationen direkt im Text mitliefern. Wir verwenden dazu ein 👉 Dateiformat namens HTML (Hypertext Markup Language).
In HTML strukturieren wir unseren Text mit sogenannten Elementen. Ein HTML-Element sieht folgendermassen aus:
Hier würden wir sagen, der Text "Hallo, Welt!" steht in einem h1-Element. Das Element besteht aus dem Start-Tag <h1>, gefolgt vom Text "Hallo, Welt!", gefolgt von End-Tag </h1>.
Was sind Tags?
Tags sind Markierungen. Mit dem Tag <h1> sagen wir dem Browser: "Hey! Alles, was jetzt kommt, ist eine Überschrift 1. Und zwar so lange, bis du das dazugehörige End-Tag </h1> siehst." Anders gesagt: mit dem Start-Tag <h1> und dem End-Tag </h1> markieren wir den gesamten dazwischen stehenden Text als Überschrift 1.
Insgesamt bezeichnen wir dieses Konstrukt aus einem Start-Tag, einem End-Tag und dem Inhalt dazwischen als ein HTML-Element. Die Begriffe Tag und Element verwenden wir im alltäglichen Sprachgebrauch aber sehr oft als Synonyme, sofern im Kontext klar ist, was wir damit meinen. Das ist auch in diesen Artikeln der Fall.
Wir werden sehen, dass es in HTML nebst <h1> noch eine Vielzahl anderer Elemente gibt, mit denen wir unseren Text strukturieren können. Einige davon lernen Sie bereits im nächsten Abschnitt kennen.
HTML-Elemente im Vergleich zu Word
Ihr erstes HTML-Element haben Sie nun bereits kennengelernt. Und wenn das <h1>-Element eine Überschrift 1 ist, dann liegt es nahe, dass es wohl auch ein <h2> für eine Überschrift 2 geben müsste. Dabei gibt es übrigens einen kleinen Unterschied zwischen Word und HTML: In HTML haben wir kein <titel>-Element1. Wir verwenden <h1> in HTML deshalb analog zur Word-Formatvorlage Titel, und <h2> demnach analog zur Formatvorlage Überschrift 1. Diese Reihenfolge geht weiter bis und mit <p6>.
Für viele Dinge, die Sie in Word kennengelernt haben, gibt es ein passendes HTML-Tag - zum Beispiel für Absätze (<p>), Bilder (<img>), oder fett gedruckten Text (<b>). Unten finden Sie eine Sammlung der wichtigsten HTML-Grundelemente.
Wichtigste HTML-Elemente
In dieser Tabelle finden Sie eine Übersicht über die wichtigsten HTML-Elemente. In der Spalte Mehr Infos finden Sie zudem für jedes Element einen Link der Form auf einen entsprechenden Artikel der Seite 👉 w3schools.com, wo Sie mehr über das jeweilige Element erfahren.
Wichtig: Die meisten W3Schools-Artikel haben einen oder mehrere grüne Knöpfe mit der Beschriftung Try it yourself. Damit kommen Sie jeweils zu einem praktischen Beispiel, in dem das entsprechende Tag verwendet wird. Die Beispiele öffnen sich in einem Online-Editor, in dem Sie auf der linken Seite den Code verändern und rechts gleich die Auswirkung beobachten können.
| HTML-Element | Bedeutung und Verwendung | Mehr Infos |
|---|---|---|
<h1> | <h1> (engl.: heading 1) steht für Überschrift 1. Da es in HTML aber kein Vergleichbares Element zu der Word-Formatvorlage Titel gibt1, verwenden wir das <h1>-Element analog zur Formatvorlage Titel. | 👉 W3Schools |
<h2> | Da wir <h1> nicht als Überschrift sondern als Titel verwenden, verwenden wir das <h2> somit alanog zur Word-Formatvorlage Überschrift 1. | 👉 W3Schools |
<h3> | Wenig überraschend verwenden wir demnach das <h3>-Element analog zur Word-Formatvorlage Überschrift 2. | 👉 W3Schools |
<p> | In Word machen wir einen Absatzumbruch mit der Enter-Taste. In HTML funktionert das etwas anders: Ein Absatz ist alles, was in einem <p>-Element steht. | 👉 W3Schools |
<b> | Text fett darstellen (engl.: bold), was wir in Word mit einem entsprechenden Knopf machen. | 👉 W3Schools |
<i> | Text kursiv darstellen (engl.: italic), was wir in Word mit einem entsprechenden Knopf machen. | 👉 W3Schools |
<u> | Text unterstrichen darstellen (engl.: underline), was wir in Word mit einem entsprechenden Knopf machen. | 👉 W3Schools |
<img> | In Unterschied zu Word müssen wir in HTML auch Bilder als Bild-Elemente kennzeichnen. Das tun wir mit dem <img>-Tag (engl.: image, Bild). | 👉 W3Schools |
<ul> | Aufzählungszeichen erhalten wir in HTML mit einer ungeordneten Liste (engl.: unordered list). Für die einzelnen Punkte in der Liste verwenden wir je ein <li>-Tag (siehe unten). | 👉 W3Schools |
<ol> | Nummerierte erhalten wir in HTML mit einer geordneten Liste (engl.: ordered list). Für die einzelnen Punkte in der Liste verwenden wir je ein <li>-Tag (siehe unten). | 👉 W3Schools |
<li> | Jedes Element einer geordneten oder ungeordneten Liste (engl.: list element, Listenelement) ist ein <li>-Element. | 👉 W3Schools |