HTML-Befehle gibt es unglaublich viele. Allein jedes Sonderzeichen hat seinen eigenen HTML-Code, mit dem es dargestellt wird. Da kann es einem schon einmal passieren, dass man den Überblick verliert. Wir möchten Ihnen in diesem Beitrag daher gern erklären, was HTML-Befehle sind, welche verschiedenen Kategorien es zur Einordnung der Befehle gibt und welche dieser Befehle die wichtigsten sind.

Was sind HTML-Befehle?

HTML ist die Kurzform für die englische Bezeichnung „HyperText Markup Language“, was im Deutschen so viel wie „Hypertext-Auszeichnungssprache“ bedeutet. Es ist eine plattformunabhängige Dokumentensprache, mit deren Hilfe man Webseiten gestalten kann. Ein HTML-Dokument enthält neben dem üblichen Text auch Befehle, die den Webseiteninhalt formatieren, Links setzen, Tabellen erstellen, Bilder einfügen und vieles mehr. Die Browser führen diese Formatierungsbefehle aus dem HTML-Dokument dann aus und zeigen das gewünschte Ergebnis an. Das allerdings nur, wenn der Webseitenbetreiber keinen Fehler bei der Erstellung gemacht hat, denn HTML-Befehle folgen einer strengen Ordnung. Vergisst man einen Befehl oder einen Teil des Befehls, so ist das Ergebnis meist fehlerhaft. Ein HTML-Befehl besteht immer aus den Klammern < und >. Dazwischen wird dann der Befehl eingetippt. Diese Befehle stehen jeweils am Anfang und am Ende der gewünschten Formatierung. Am Ende wird hinter die erste Klammer und vor den Befehl noch das Zeichen: / gesetzt. Ein Beispiel: Der HTML-Befehl für die Hauptüberschrift (h1) dieses Beitrags:

Dies sind die wichtigsten HTML-Befehle

Bei der Beispiel-Überschrift ist es normal, dass zwischen den Befehlen und dem darzustellenden Inhalt keine Leerzeichen vorhanden sind. Das ist allerdings nicht immer der Fall: Es gibt auch Befehle, die weiter definiert werden können und bei denen Leerzeichen zur Erstellung verwendet werden.

Die Kategorien und deren HTML-Befehle

Gliederung des Dokuments

Jedes HTML-Dokument beginnt mit dem Befehl und endet mit , um den Anfang und das Ende des Dokumentes zu kennzeichnen. Hinzu kommt der Befehl am Anfang der Kopfzeile und am Ende der Kopfzeile. Zwischen diesen beiden Befehlen werden Informationen wie z.B. Tags und Scripts hinterlegt. Metatags beinhalten wichtige Informationen für die Suchmaschinen, wohingegen Scripts, wie das Java-Script, die Webseite aufwerten. Ist die Kopfzeile fertig gestellt, kommt man zum eigentlichen Inhalt der Seite. Dieser wird von den Befehlen und umrahmt. Dazwischen hinterlegt man alle Informationen zur Seitengestaltung wie Textinhalte, Schriftart, Farben, Tabellen, Grafiken und vieles mehr. Das Grundgerüst eines HTML-Dokuments sieht dann wie folgt aus:

Hyperlinks setzen

Hyperlinks, oder auch Backlinks, werden durch einen Ankertext im Text oder durch ein Bild in die Webseite eingebaut. Diese leiten dann auf anderen Webseiten weiter, wenn man sie anklickt. Eine solche Verlinkung wird meist gesetzt, um dem Nutzer weitere thematische Informationen auf anderen Webseiten bereitzustellen. Das Grundgerüst eines solchen HTML-Befehls, mit dem man Links via Ankertext in einen Text einfügt, sieht wie folgt aus: . Die Verlinkung zu unserem SEO-Lexikon sieht dann so aus:  SEO-Lexikon Inez Media. Im Text sieht der Besucher dann allerdings nur: SEO-Lexikon Inez Media

Absätze erstellen

Um einen Text sinnvoll zu gliedern, sind natürlich auch Absätze, Zeilenumbrüche, Zentrierungen und horizontale Trennlinien notwendig. Diese Codes gibt es nicht in zweifacher Ausführung, da sie keinen Inhalt bereitstellen und lediglich die Textformatierung beeinflussen.

• Absatz:
• Zeilenumbruch:
• horizontale Trennlinie:
  

  ---

• Zentrierung:

Zeichenformate einstellen

Auch die Gestaltung der Schrift ist wichtig für die Optik einer Webseite. Hierdurch kann man einzelne Wörter oder Satz- bzw. Text-Teile hervorheben, um die Aufmerksamkeit des Lesers auf den entsprechenden Inhalt zu lenken. Zwischen diesen Befehlen wird dann der Inhalt eingetragen. Die verschiedenen Zeichenformate werden so eingestellt:

• unterstrichen: und
• fett oder breit: und
• kursiv: und
• ^hochgestellt:und
• _tiefgestellt: und

• größte Überschrift:

und

• kleinste Überschrift:

und , dazwischen liegen die Überschriftgrößen h2, h3, h4 und h5.

Listen erstellen

Bei Aufzählungen, wie man sie oben sehen kann, sind Listen sinnvoll, da man mit ihnen viel Inhalt gegliedert darstellen kann. Dabei unterscheidet man zwischen geordneten und ungeordneten Listen. In unserem Beitrag entdecken Sie bis jetzt nur die ungeordnete Variante. Der Unterschied besteht darin, dass die geordnete Liste durchnummeriert ist, wohingegen die ungeordnete Liste keinerlei Hierarchisierung aufweist. Der generelle Code für Listen lautet

und . Um die entsprechenden Listen weiter zu definieren, fügt man jeweils vor den ersten und den letzten Listeneintrag einen weiteren Befehl ein. Geordnete Listen werden mit und eingerahmt und so dargestellt:

1. 1. Erster Listenpunkt
   2. Zweiter Listenpunkt

…

Dieses Gerüst ist für den Leser so sichtbar:

1. Erster Listenplatz
2. Zweiter Listenplatz

Das Grundgerüst der ungeordneten Liste hingegen wird mit und umrahmt und sieht so aus:

• • Erster Listenplatz
  • Zweiter Listenplatz

…

Für den Leser ist dieses Gerüst nur so sichtbar:

• Erster Listenplatz
• Zweiter Listenplatz

Tabellen erstellen

Möchte man dem Besucher einer Webseite mehrere Informationen in geordneter Form präsentieren, eignen sich Tabellen am besten dazu. Diese Erstellung ist etwas umfangreicher als die bisher behandelten Einstellungsmöglichkeiten. Tabellen bestehen bekanntlich aus Spalten und Zeilen und diese werden nach und nach aufgebaut.

Das Grundgerüst

Die drei wichtigsten Befehle, die man dazu benötigt, stellen das grobe Grundgerüst der Tabelle dar.

• Durch die Codes und wird dem Browser gekennzeichnet, dass es sich im Folgenden um eine Tabelle handelt
• Zeilen legt man mit den Tags und an
• Spalten werden durch die Codes und erstellt

Entsprechend sieht das Grundgerüst so aus:

Inhalt einfügen

Um diese Tabelle nun mit Inhalt zu füllen, muss der Text nun in die entsprechenden Spalten eingefügt werden. Dazu tippen Sie ihn einfach zwischen die Codes und ein. Für mehrere Inhalte wiederholen Sie diesen Code beliebig oft. Ein Beispiel:

Inhalt 1 Inhalt 2

Für den Betrachter stellt sich diese Einstellung auf der Webseite so dar:

Rahmen einfügen

Der Rahmen dieser Tabelle ist nicht besonders gut zu erkennen. Um ihn deutlicher erscheinen zu lassen und damit sich die Tabelle besser vom Rest der Seite abhebt, kann man ihn genauer definieren. Dazu fügt man zu dem Befehl weitere Informationen durch border „1“ hinzu. Dementsprechend lautet die erste Zeile des Tabellen-Gerüstes nun:

Anschließend werden die restlichen Befehle wie gehabt eingefügt. Am Ende sollte das Ganze dann so aussehen:

Spalten hinzufügen

Wie bereits erwähnt, sind die Tags und für die Spalten der Tabelle zuständig. Um weitere Spalten in einer Tabelle hinzuzufügen, beginnen Sie nach dem Tag der ersten Spalte mit einem neuen –Tag und füllen diese mit den –Befehlen und dem entsprechenden Inhalt. Auch diesen Schritt können Sie beliebig oft wiederholen, bis die Tabelle Ihren Ansprüchen entspricht. Das Gerüst sieht so aus:

Inhalt 3 Inhalt 4

Der Webseitenbesucher sieht folgende Tabelle vor sich:

Mehr zu diesem Thema erfahren Sie zudem außerdem auf a-coding-project.de.

Grafiken einfügen

Bilder und Grafiken machen auf einer Webseite optisch immer einen guten Eindruck. Die Ausrichtung bzw. die Position dieser Bilder im Browserfenster können Sie beeinflussen. Die Grundbefehle für Bilder lauten: und und können mit dem Zusatz align=, der die Position definiert, erweitert werden. Hinter den Tag align= fügen Sie nun die gewünschte Position hinzu, sprich: top, middle oder bottom. Wollen Sie ein Bild mittig positionieren, lautet die richtige Befehlskombination: align=middle. Hinzu kommt dann noch der Name der Datei durch src: align=middle src=garten.jpg und die Angabe eines Alternativtextes durch alt=. Demnach lautet der komplette Befehl mit allen drei Komponenten: align=middle src=garten.jpg alt=Alternativtext

Sonderzeichen einfügen

Es gibt unglaublich viele Sonderzeichen, die man bei der Gestaltung einer Webseite oder eines Textes verwenden kann. Dazu zählen sowohl Umlaute, als auch Symbole. Die hier oft verwendeten spitzen Klammern < und > werden durch die Codes &lt; und &gt; dargestellt. Die sogenannten Gänsefüßchen “ “ erscheinen, wenn man &quot; eingibt. Bei den Umlauten unterscheiden sich die Codes je nach Groß- und Kleinschreibung. Hier ein paar der gebräuchlichsten Sonderzeichen:

Ä: Ä                 ß: ß                  -: –                  @: @                  ä: ä                  &: &                  =: =                  [: [                  Ö: Ö                  €: €                   ?: ?                  ]: ]                  ö: ö                  !: !                   $: $                  ^: ^                  Ü: Ü                  #: #                  *: *                  {: {                  ü: ü                  +: +                   %: %                  }: }

Für ausführlichere Listen der Sonderzeichen und deren HTML-Befehle schauen Sie doch einmal sonderzeichentabelle.de oder ewetel.net vorbei.

Ein Überblick über die wichtigsten HTML-Befehle

Jetzt ist erst einmal Zeit zum Durchatmen: Das war natürlich sehr viel auf einmal zum Thema HTML-Befehle. Es gibt aber auch einfach eine Menge, die man wissen muss, wenn man sich mit ihnen beschäftigen möchte. Mit ihrer Hilfe schaffen Sie es, Ihre Webseite nach Ihren Vorstellungen und Wünschen zu gestalten. Dazu ist allerdings auch etwas Arbeit notwendig: Die lohnt sich dann aber allemal, wenn Sie das Ergebnis sehen! Auf Ihrer Webseite ist alles wunderbar in Szene gesetzt und der Besucher erfreut sich unter Anderem am tollen Design der Seite und Inhalte. Ein Blick in unseren Beitrag sollte Ihnen auf jeden Fall weiterhelfen, wenn Sie Fragen rund um das Thema haben. Wir hoffen, dass Sie etwas aus diesem Beitrag mitnehmen und für sich nutzen können und freuen uns schon auf Ihren nächsten Besuch bei uns. Bis dahin wünschen wir Ihnen alles Gute und viel Erfolg bei Ihrem HTML-Projekt!