HTML-Code
SEO, Wissenswertes

Die wichtigsten HTML Befehle - eine Übersicht

Dieser Beitrag soll die wichtigsten HTML Befehle (engl.: HTML tags) vorstellen. Dabei gilt es zu beachten, dass HTML lediglich für die Strukturierung der Seite zuständig ist! Für das Design wird CSS genutzt. Das war früher anders, da auch HTML für Design genutzt wurde. Daher finden sich in diesem Beitrag keine HTML Befehle, die veraltet sind und früher für das Design zuständig waren.

Für die meisten HTML Befehle gibt es ein öffnenden und einen schließenden Befehl. Der Text innerhalb dieser Befehle wird dann entsprechend formatiert. Wir möchten euch mit diesem Beitrag eine Liste der HTML Befehle vorstellen.

HTML-Grundgerüst

!DOCTYPE-Befehl

Dieser Befehl teilt dem Browser mit mit welchem Standard, in diesem Fall HTML, im Dokument gearbeitet wird.
HTML Befehl: <!DOCTYPE html>

html-Befehl

Der html-Befehl umschließt den kompletten Inhalt des Dokuments.
HTML Befehl: <html>…</html>

head-Befehl

In diesem Befehl werden die Metainformationen einer Seite, wie Seitentitel und Meta Description, hinterlegt. Die Inhalte des <head> Befehls (engl.: head = Kopf) sind nicht im Browserfenster sichtbar.
HTML Befehl: <head>…</head>

meta charset="UTF-8"

Dieser Befehl teilt mit, dass das Dokument in UTF-8 kodiert ist. Diese Kodierung ist am weitesten verbreitet und ermöglicht die direkte Verwendung von Sonderzeichen wie beisielsweise den deutschen Umlauten.
HTML Befehl: <meta charset="UTF-8">

title-Befehl

Der <title>, oder auch Seitentitel, beschreibt das gesamte HTML-Dokument. Für die Suchmaschinenoptimierung ist dieser Befehl sehr wichtig, denn er enthält mehrere wichtige Funktionen: Der Seitentitel wird in der Titelzeile bzw. im Tab des Browserfenster angezeigt und stellt die Titelzeile eines Suchergebnisses in einer Suchmaschine dar.
HTML Befehl: <title>…</title>

meta "description"-Befehl

Mit diesem Meta Befehl kann eine Description, eine Beschreibung, der Seite verfasst werden. Wie der Seitentitel wird auch die Meta Description in Suchergebnissen ausgespielt. Seitentitel, URL und Meta Description bilden gemeinsam das so genannte „Snippet“.
HTML Befehl: <meta name="description" content="HTML Befehle benötigen Sie für das Erstellen..." />

 

Seitentitel, URL und Meta Description bilden das Snippet

 

body-Befehl

Innerhalb des <body> Befehls (engl.: body = Körper) wird der Inhalt eingebunden, der dann auch auf der Seite zusehen sein soll.
HTML Befehl: <body>…</body>

Beispiel für ein HTML-Grundgerüst:

<!DOCTYPE html>

<html lang="de">

 <head>

   <title>Die wichtigsten HTML Befehle - eine Übersicht | Beyond Media</title>

   <meta name="description">HTML Befehle benötigen Sie für das Erstellen...</meta>

 </head>

  <body>

   <h1>Die wichtigsten HTML Befehle - eine Übersicht</h1>

   <p>Dieser Beitrag soll die wichtigsten HTML Befehle (engl.: HTML tags) vorstellen...</p>

 </body>

</html>

 

Überschriften und Absätze

H1-Hauptüberschrift

Die H1-Hauptüberschrift (engl.: H = headline = Überschrift) ist die Hauptüberschrift einer Seite und ist für die Suchmaschinenoptimierung besonders wichtig. Die Hauptüberschrift fasst den Seiteninhalt kurz und prägnant zusammen und sollte auf jeder Seite bzw. Unterseite daher nur einmal vorkommen.
HTML Befehl: <h1>…</h1>

H2 bis H6-Überschriften

Die H2 bis H6-Überschriften stellen Unterüberschriften dar und dürfen im Gegensatz zur H1-Überschrift mehrmals pro Unterseite verwendet werden. Die Überschriften müssen in einer logischen Reihenfolge verwendet werden, z.B. nach einer H2-Überschrift folgt eine H3-Überschrift (der Absatz unter der H3 ist somit ein Teilbereich des Absatzes unterhalb der H2) oder nach einer H2-Überschrift folgt noch eine H2-Überschrift (beide Absätze sind eigenständige Themen). Allgemein kann man sagen: je kleiner die Zahl nach dem H, desto größer die Überschrift und desto wichtiger für die Suchmaschine.
HTML Befehl: <h2>…</h2> bis <h6>…</h6>

Absätze

Der <p> Befehl (engl.: p = paragraph = Absatz) definiert einen Textabsatz. Nach dem Absatz wird automatisch etwas Platz gelassen. 
HTML Befehl: <p>…</p>

Zeilenumbruch

Ein Zeilenumbruch wird mit <br> (engl.: br = break = Umbruch) am Zeilenende erreicht.
HTML Befehl: <br>

 

HTML Befehle Übersicht – Text hervorheben

Text fett darstellen

Text kann mithilfe des <strong> Befehls (engl.: strong = kräftig) fett dargestellt werden. Im Gegensatz zum HTML Befehl <b> (engl.: bold = fett) zeigt <strong> einem Bot oder Crawler auf, dass diese Worte wichtig sind. Der <b> Befehl hat lediglich Auswirkung auf die Darstellung, nicht auf die Semantik. Um sicher zu gehen, dass <strong> bei allen Besuchern korrekt dargestellt wird (nämlich fett), sollten folgende Zeilen in die CSS Datei eingefügt werden:

strong

{

font-weight: bold;

}

HTML Befehl: <strong>…</strong>

Text kursiv darstellen

Wie bei der Darstellung des Textes in fett gibt es auch bei kursivem Text zwei verschiedene Befehle: <i> (engl.: italic = kursiv) und <em> (engl.: emphasize = betonen, hervorheben). <i> stellt den Text lediglich kursiv dar, <em> hebt den Text ebenfalls semantisch für Bots und Crawler hervor. Um sicher zu gehen,  dass <em> bei allen Besuchern korrekt dargestellt wird (nämlich kursiv), sollten folgende Zeilen in die CSS Datei eingefügt werden:

em 


font-style: italic; 

}

HTML Befehl: <em>…</em>

Text hochstellen

Mit dem Befehl <sup> (engl.: superscript = hochgestellt) können Buchstaben hochgestellt werden. Zum Beispiel: Anmerkung³
HTML Befehl: <sup>…</sup>

Text tiefstellen

Mit <sub> (engl.: subscript = tiefgestellt) können Buchstaben tiefgestellt werden. Zum Beispiel: H2O
HTML Befehl: <sub>…</sub>

Text durchstreichen

Durchgestrichener Text kann mit dem HTML Befehl <del> (engl.: deleted = gelöscht) dargestellt werden.
HTML Befehl: <del>…</del>

 

Aufzählungen mit HTML

Nummerierte Aufzählungen

Mit Hilfe von <ol> (engl.: ordered list = nummerierte liste) werden die Aufzählungen einer Liste durchnummeriert.
HTML Befehl: <ol>…</ol>

Unsortierte Aufzählungen

Mit dem HTML Befehl <ul> (engl.: unordered list = unsortierte Liste) wird eine Auflistung beispielsweise mit Spiegelstrichen oder Bullet Points dargestellt.
HTML Befehl: <ul>…</ul>

Zusätzlich zur Angabe, ob es sich um eine sortierte oder unsortierte Aufzählung handeln soll, muss jeder Aufzählungspunkt mit dem HTML Befehl <li> (engl.: list item = Listeneintrag) gekennzeichnet werden.

Beispiel für eine unsortierte Aufzählung:

<ul>

  <li>Suchmaschinenoptimierung</li>

  <li>Suchmaschinenwerbung</li>

  <li>Entwicklung</li>

  <li>Affiliate Marketing</li>

</ul>

 

Links und Verweise

Interne und externe Links

Links werden mit folgendem HTML Befehl eingebunden: <a href="https://www.beyond-media.de">Beyond Media</a>. A steht dabei für engl.: anchor = Anker und href für engl.: hyper reference = Hypertext Referenz. Diesem Ausdruck folgt die Ziel URL und schließlich der Linktext (engl.: Anchortext), also der klickbare Text, der zur Ziel URL führt. HTML-Befehle sind im Workflow schnell einprägsam.

Der Link kann durch den Befehl target="_blank" (engl.: target = Ziel; blank = leer) erweitert werden , dadurch wird erreicht, dass die Ziel URL in einem neuen Browserfenster geöffnet wird.

Email Adressen verlinken

Soll eine Email Adresse verlinkt werden, wird der Befehl <a href="mailto:info@beyond-media.de">info@beyond-media.de</a> genutzt.

 

Wir unterstützen Sie gerne

Wir freuen uns wenn Ihnen unsere HTML Befehle Übersicht gefallen hat. Sie benötigen Hilfe bei der Erstellung Ihrer Website? Gerne helfen wir Ihnen weiter. Sprechen Sie uns an.