Obwohl moderne Websites in der Regel mit benutzerfreundlichen Oberflächen erstellt werden, ist es heutzutage trotzdem noch von Vorteil, einige grundlegende HTML-Kenntnisse zu besitzen. Wenn du die folgenden 17 HTML-Elemente kennst, kannst du ohne Probleme eine einfache Webseite von Grund auf neu erstellen oder Codestücke deines CMS (Content Management System = z.B. WordPress) anpassen.

1. <!DOCTYPE html>

Du benötigst diesen Tag am Anfang jedes HTML-Dokuments, das du erstellst. Es stellt sicher, dass dein Browser weiß, dass er HTML liest, und dass er HTML5, die neueste Version, erwartet. Auch wenn dies eigentlich kein wirklicher HTML-Tag ist, ist es trotzdem gut zu wissen.

Zur Info: Mit sogenannten Tags werden HTML-Elemente markiert. Fast alle HTML-Elemente werden durch einen einleitenden (<) und ein abschließenden (>) Tag markiert.

2. <html>

Dies ist ein weiterer Tag, der deinem Browser sagt, dass er HTML liest. Warum brauchen wir beides, also <!DOCTYPE html> und <html>? Ja man weiß nie, welchen Browser der Nutzer verwendet. Aus diesem Grund ist es eine gute Idee, sie trotzdem einzubauen, um einfach doppelt sicher zu gehen, dass alles funktioniert.
Und vergiss am Ende deines Dokuments nicht den </html>-Tag!

3. <head>

Für einfache Seiten enthält der <head>-Tag den Titel der Seite, und das war’s dann auch schon. Aber es gibt noch ein paar andere Dinge, die du dann mit einbeziehen kannst, die wir gleich besprechen werden.

HTML Tag head

4. <title>

Wie der Name schon verrät, definiert dieser Tag den Titel deiner Seite. Alles, was du tun musst, ist deinen Titel in den Tag einzufügen und ihn zu schließen, so wie hier (ich habe auch die Header-Tags eingefügt):

<head>
<title>HTML Grundlagen in 11 Minuten lernen</title>
</head>

Das ist außerdem der Name, der im Tab-Reiter angezeigt wird, wenn der Browser geöffnet wird.

HTML Tag title

5. <meta>

Wie der title-Tag werden auch die Metadaten im Header-Bereich deiner Seite hinzugefügt. Metadaten werden hauptsächlich von Suchmaschinen verwendet und sind – wie zu erwarten – Informationen über die Informationen auf deiner Seite. Es gibt eine Reihe von verschiedenen Metafeldern, aber diese hier sind die häufigsten:

  • description – Eine grundlegende Beschreibung der Seite.
  • keywords – Eine Auswahl von Schlüsselwörtern für der Seite.
  • author – Der Autor der Seite.
  • viewport – Ein Tag, um sicherzustellen, dass die Seite auf allen End-Geräten gut aussieht.
  • utf-8 – eine Zeichenkodierung aus der Unicode-Familie. Damit kannst du sicherstellen, dass die Buchstaben richtig dargestellt werden (z.b. Umlaute ä,ö,ü).

Hier ist ein Beispiel, das auf diese Seite zutreffen könnte:

<meta name="description" content="HTML Grundlagen">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="Max Steinwender">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">

Der viewport-Tag sollte immer “width=device-width, initial-scale=1.0” als Inhalt haben. Damit kannst du sicherstellen, dass deine Seite auf mobilen und Desktop-Geräten gut dargestellt wird.

6. <body>

Der Body deiner Webseite kennzeichnet den Anfang und das Ende des sichtbaren Inhalts auf deiner HTML-Seite. Es ist so einfach, wie es sich anhört:

<body>
Hier steht alles, was du gerne auf deiner Seite darstellen möchtest.
</body>

7. <h1>

Der <h1>-Tag definiert den Level-1-Header (=Überschrift) auf deiner Seite.
Der <h2>-Tag definiert Level-2-Header, <h3> Level-3 und so weiter, bis hinunter zu <h6>. Als Beispiel sind die Überschriften der vorgestellten Tags in diesem Artikel Level-2-Header.

<h1>Große und wichtige Überschrift</h1>
<h2>Etwas kleinere Überschrift</h2>
<h3>Unterkapitel</h3>

Das Ergebnis:

Große und wichtige Überschrift (h1)

Etwas kleinere Überschrift (h2)

Unterkapitel (h3)

Wie du sehen kannst, werden die Überschriften auf jeder Ebene kleiner.

8. <p>

Der <p>-Tag steht für Paragraph und leitet einen neuen Absatz ein. Dabei werden in der Regel zwei Zeilenumbrüche eingefügt.

Schauen dir dafür einfach das Beispiel an: Mit diesem Tag schaffst du einen neuen Absatz zwischen der vorherigen und dieser Zeile an.

<p>Der erste Absatz.</p>
<p>Der zweite Absatz.</p>

Das Ergebnis:

Der erste Absatz.

Der zweite Absatz.

9. <br>

Das <br>-Tag (engl. line break) fügt einen einzelnen Zeilenumbruch ein:

<p>Die erste Zeile.<br>
Die zweite Zeile (diesmal mit weniger Abstand).</p>

Das Ergebnis:

Die erste Zeile.
Die zweite Zeile (diesmal weniger mit weniger Abstand).

Hinweis: Dieser HTML-Tag wird manchmal als <br /> oder <br/> geschrieben. Es macht dasselbe, aber der Schrägstrich macht den Tag in XHTML lesbar.

“Give me a <br>” – ein Witz unter Entwicklern

10. <strong>

Dieser HTML-Tag hebt wichtigen Text hervor, indem der Text fett (bold) angezeigt wird. Es ist natürlich auch möglich diesen Effekt mit CSS zu ändern. Wir konzentrieren uns hier aber nur auf die einfache Variante.

Also, verwende <strong> um das Textelement fett zu machen.

<strong>Mit diesem Tag kannst du Textelemente fettgedruckt darstellen.</strong>

Das Ergebnis:

Mit diesem Tag kannst du Textelemente fettgedruckt darstellen.

Hinweis: Wenn du mit dem <b>-Tag für fettgedruckten Text vertraut bist, kannst du auch diesen verwenden. Es gibt jedoch keine Garantie, dass es auch in zukünftigen Versionen von HTML funktionieren wird, aber im Moment funktioniert es.

<b>Mit diesem Tag kannst du (auch) Textelemente hervorheben.</b>

11. <em>

Wie <b> und <strong> sind auch <em> und <i> verwandt. Der <em>-Tag (engl. emphasized) kennzeichnet hervorgehobenen Text, d.h. er wird kursiv dargestellt. Auch hier besteht die Möglichkeit, dass CSS die hervorgehobene Textdarstellung anders gestaltet.

<em>Ein kursiv-dargestellter Text.</em>

Das Ergebnis:

Ein kursiv-dargestellter Text.

Hinweis: Der <i>-Tag funktioniert immer noch, aber es kann möglich sein, dass er in zukünftigen Versionen von HTML veraltet sein wird.

12. <a>

Mit dem <a>-Tag (engl. anchor) kannst du ganz einfach Links erstellen. Ein einfacher Link sieht so aus:

<a href="//www.blogital.com/">Besuche meinen Blog</a>

Das Ergebnis:

Besuche meinen Blog

Das Attribut “href” wird für das Ziel des Links benötigt. In vielen Fällen wird dies eine andere Website sein. Es kann aber auch eine Datei sein, wie ein Bild oder eine PDF-Datei.

Weitere nützliche Attribute sind “target” und “title“. Das Target-Attribut wird fast ausschließlich verwendet, um einen Link in einem neuen Tab oder Fenster zu öffnen:

<a href="//www.blogital.com/" target="blank">Besuche meinen Blog in einem neuen Tab</a>

Das Ergebnis:

Besuche meinen Blog in einem neuen Tab

Das Attribut “title” erzeugt einen sogenannten Tooltip. Fahre dafür mit der Maus über den Link, um zu sehen, was ich damit meine:

<a href="//www.blogital.com/" title="Hier siehst du einen Tooltip">Fahre mit der Maus über diesen Text</a>

Das Ergebnis:

Fahre mit der Maus über diesen Text

13. <img>

Wenn du ein Bild auf deiner Seite einbetten möchtest, musst du den Image-Tag verwenden. Am einfachsten ist es, die Quelle des Bildes in das “src“-Attribut einzufügen:

<img src="https://www.blogital.com/wp-content/uploads/2018/01/Logo_Facebook_Dez.png">

Das Ergebnis:

Es gibt eine Reihe weiterer Attribute, auf die du nicht verzichten solltest, wie “height“, “width” und “alt“. So könnte das aussehen:

<img src="https://www.blogital.com/wp-content/uploads/2018/01/Logo_Facebook_Dez.png" width="200" alt="Der Name des Bildes">

Das Ergebnis:

Der Name des Bildes

Die Attribute “height” und “width” legen die Höhe und Breite des Bildes fest. Ich kann dir empfehlen, nur einen von ihnen einzustellen, damit das Bild richtig skaliert wird. Wenn du beides verwendest, könntest du ein gestrecktes oder gequetschtes Bild erhalten.

Der “alt“-Tag (=Alternativtext) sagt dem Browser, welcher Text angezeigt werden soll, wenn das Bild nicht geladen werden kann. Es wird empfohlen für jedes Bild einen Alternativtext einzufügen. Wenn jemand eine besonders langsame Internet-Verbindung oder einen alten Browser hat, kann er immer noch eine Vorstellung davon bekommen, was du mit dem Bild zeigen wolltest.

14. <ol>

Mit dem <ol>-Tag (engl. ordered list) kannst du eine geordnete Liste erstellen. Du erhält nichts anderes als eine nummerierte Liste. Jeder Eintrag in der Liste benötigt einen Listeneintrag (<li>), damit die Liste so aussieht:

<ol>
<li>Erste Nummerierung</li>
<li>Zweite Nummerierung</li>
<li>Dritte Nummerierung</li>
</ol>

Das Ergebnis:

  1. Erste Nummerierung
  2. Zweite Nummerierung
  3. Dritte Nummerierung

In HTML5 kannst du mit <ol revers> die Reihenfolge der Zahlen umkehren. Und du kannst den Startwert mit dem Startattribut setzen. Mit dem Attribut “type” teilst du dem Browser mit, welcher Symboltyp für die Listenelemente verwendet werden soll. Die Nummerierung kann auf “1”, “A”, “a”, “I” oder “i” eingestellt werden.

15. <ul>

Die ungeordnete Liste ist viel unkomplizierter als die davor geordnete Liste. Es ist nichts anderes als eine Aufzählungsliste.

<ul>
<li>Erstes Element</li>
<li>Zweites Element</li>
<li>Drittes Element</li>
</ul>

Das Ergebnis:

  • Erstes Element
  • Zweites Element
  • Drittes Element

Ungeordnete Listen haben auch “type“-Attribute. Damit kannst du statt Kreise auch “Ringe” oder “Vierecke” setzen.

16. <table>

Während die Verwendung von Tabellen für die Formatierung nicht besonders gern gesehen wird, gibt es trotzdem Momente, in denen du Informationen auf deiner Seite segmentieren musst. Das kannst du unter anderem mit einfachen Tabellen machen. Es gibt eine Reihe von Tags, die du verwenden musst, um eine Tabelle erstellen zu können. Werfe doch mal einen Blick auf dieses Beispiel und du wirst gleich das Tabellen-Konstrukt verstehen:

<table>
<tbody>
<tr>
<th>Erste Spalte</th>
<th>Zweite Spalte</th>
</tr>
<tr>
<td>Reihe 1, Spalte 1</td>
<td>Reihe 1, Spalte 2</td>
</tr>
<tr>
<td>Reihe 2, Spalte 1</td>
<td>Reihe 2, Spalte 2</td>
</tr>
</tbody>
</table>

Das Ergebnis:

Erste SpalteZweite Spalte
Reihe 1, Spalte 1Reihe 1, Spalte 2
Reihe 2, Spalte 1Reihe 2, Spalte 2

Jeder <th>-Tag umgibt den Tabellen-Header (manchmal sieht man diese auch in einem <thead>-Tag). <tbody> kennzeichnet den sichtbaren Tabellen-Bereich. Der <tr>-Tag setzt eine neue Tabellenzeile, und jeder <td>-Tag identifiziert eine Zelle in dieser Zeile.

17. <blockquote>

Wenn du eine Quelle oder eine Person zitierst und das Zitat vom Rest deines Artikel hervorheben möchtest, dann ist der <blockquote>-Tag eine gute Lösung. Alles, was du dafür tun musst, ist das Zitat in öffnende und schließende Blockquote-Tags einzufügen:

<blockquote>Das P in HTML steht für Programmieren!</blockquote>

Das Ergebnis:

Das P in HTML steht für Programmieren!

Hinweis: Die genaue Formatierung des Zitats kann vom verwendeten Browser oder dem CSS deiner Website abhängen. Aber der Tag bleibt immer derselbe.


Mit diesen 17 HTML-Tags (und ein paar mehr) bist du in der Lage eine einfache Webseite zu erstellen.

Verwendest du regelmäßig HTML? Welche anderen Tags verwendest du am häufigsten? Teilen doch deine Meinung in den Kommentaren unten mit!