Eine kurze Einführung in HTML für CMS

Hosting-Angebot ansehen
Website Formatierung

Schnell mal eine Formatierung selbst berichtigen u.a.

Sie kennen das sicher: Sie schreiben ohne Probleme Ihre Texte in einem CMS wie Joomla, Drupal, WordPress oder Typo3 und eigentlich funktioniert das auch ganz hervorragend. Nur manchmal brauchen Sie eine Überschrift mehr oder der Absatz ist verrutscht oder irgendetwas mit der Verlinkung ist schief gegangen und dann wissen Sie nicht, wie Sie solche Probleme alleine beheben können.

Zum Glück braucht man bei den modernen CMS nicht mehr wirklich "Ahnung von der Technik" zu haben, aber manchmal ist es eben doch besser, wenn man zumindest ein paar HTML-Tags kennt, damit nicht beim kleinsten Bisschen die Hilfe des Technikers in Anspruch genommen werden muss.

Wir beschreiben Ihnen im Folgenden die HTML-Tags, die beim täglichen Umgang mit CMS wichtig sind und die Sie ggf. im Quellcode des Editors selbst verändern können.


HTML - Tags

1. Grundsätzliches zur Schreibweise von HTML-Tags

Damit z.B. ein Absatz oder eine Überschrift auf einer Webseite jeweils als solche dargestellt werden, gibt es bestimmte Tags, die Sie um den jeweiligen Text herumsetzen müssen. Eine standardisierte Schreibweise ermöglicht es Browsern dann, Text auf die gewünschte Art darzustellen.

  • HTML-Tags werden immer in spitzen Klammern (("<" und ">") geschrieben.
  • Jeder HTML-Tag wird vor dem Text, auf den er wirken soll, quasi aufgemacht ("<tagname>") und hinter diesem Textteil wieder geschlossen ("</tagname>"). Achten Sie bitte auf den im Beispiel fettgesetzten Schrägstrich, der signalisiert, dass ein Tag geschlossen wird.
  • Nur wenige Ausnahme-Tags werden nicht geschlossen. (Einige davon lernen Sie später kennen.)
  • Die Tagnamen sind Abkürzungen englischer Begriffe.

Die Struktur ist also:

<tagname>Text, der auf bestimmte Art formatiert werden soll</tagname>

Bitte achten Sie darauf, einen Tag wirklich immer zu schließen. Sollten Sie das vergessen, kann das zu mitunter kreativen aber nicht wirklich zielführenden Formatierungs-Verwirrungen auf der Seite führen.


Strukturelemente nutzen

2. Strukturelemente: Überschriften, Absätze etc.

Mit Elementen wie Überschriften, Absätzen, Listenpunkten etc. geben Sie Ihrem Text Struktur. Das freut nicht nur die User, sondern auch die Suchmaschinen (einerseits, weil es den User freut, andererseits, weil sich der Text so auch von einem Suchmaschinen-Crawler besser lesen und einschätzen lässt).


Überschriften

In HTML sind prinzipiell die Überschriften erster bis sechster Ordnung vorgesehen. Die Überschrift erster Ordnung ist dabei die wichtigste und die sechster Ordnung die am wenigsten wichtige. In der Regel werden heute die Überschriften vierter, fünfter und sechster Ordnung nicht mehr verwendet; Sie sollten aber vorsichtshalber, wenn Sie es nicht wissen, bei Ihrem IT-Ansprechpartner nachfragen, welche Überschriften auf Ihrer Website in Gebrauch sind.

Da Überschriften auf Englisch "headline" heißen, sind die Tagnamen für die Überschriften auch "h", gefolgt vom Wichtigkeitsgrad:

<h1>Überschrift erster Ordnung</h1>

<h2>Überschrift zweiter Ordnung</h2>

<h3>Überschrift dritter Ordnung</h3>


Absätze

"Absatz" heißt auf Englisch "paragraph" und so wird der Tag für Absätze auch so geschrieben:

<p>Dies ist ein Text in einem Absatz.</p>

In CMS-Editoren wird zumeist automatisch ein Absatz generiert, indem Sie die Enter-Taste betätigen.


Zeilenumbruch

Der Zeilenumbruch (engl. "(line) break") ist ein Tag, der nicht geschlossen wird: "<br />"; stattdessen wird er genau an die Stelle gesetzt, an dem er angezeigt werden soll.

Wenn Sie also innerhalb eines Absatzes einen Zeilenumbruch verwenden wollen, sieht das so aus:

<p>Dies hier ist ein Text, der Ihnen zeigen soll, wie man einen Zeilenumbruch in einen Absatz setzt.<br />
Zeilenumbrüche haben den Vorteil, dass sie den nachfolgenden Inhalt ein wenig vom vorigen absetzen, aber eben nicht so stark wie ein Absatz.</p>


Listenpunkte

Es gibt fast nichts Schöneres, als zur Textstrukturierung mit Listenpunkten zu arbeiten, denn:

  • Sie helfen, im Text den Überblick zu behalten.
  • Sie stehen als geordnete (mit Zahlen) und ungeordnete Listen (mit Punkten) zur Verfügung.
  • Sie sind ganz leicht anzuwenden.

Die Struktur von beiden Listenarten ist die gleiche, nur heißen die Listen-Tags jeweils anders.

Generell gilt: Zwischen den Tag, der angibt, dass jetzt überhaupt eine Liste kommt, setzen Sie die Tags, die die einzelnen Listenpunkte an sich beschreiben ("li" für Listenpunkte ist einfach zu merken):

<listentag-name>

<li></li>

<li></li>

<li></li>

</listentag-name>


Ungeordnete Listen

Ungeordnete Listen heißen auf Englisch "unordered lists"; folglich ist der Tag für ungeordnete Listen <ul>…</ul>

Der Aufbau einer ungeordneten Liste ist also:

<ul>

<li>Ein Listenpunkt</li>

<li>Noch ein Listenpunkt</li>

<li>Und noch ein Listenpunkt</li>

</ul>


Geordnete Listen

Geordnete Listen sind in Englisch "ordered lists", also <ol>…</ol>

Der Aufbau einer geordneten Liste ist folglich:

<ol>

<li>Erster Listenpunkt</li>

<li>Zweiter Listenpunkt</li>

<li>Dritter Listenpunkt</li>

</ol>

Geordnete Listen werden vom Browser automatisch durchnummeriert dargestellt.


Textformatierung

3. Textformatierungen: Fett und kursiv

Es macht oft Sinn, bestimmte kurze Passagen im Text fett oder kursiv hervorzuheben. Für beide Formatierungsarten gibt es zwei verschiedene Möglichkeiten.


Schrift fett setzen

Einmal heißt "fett" auf Englisch "bold", also schreiben wir:

<b>Fett gesetzter Text</b>

Fett wird aber auch als "stark (hervorgehoben)" (engl. "strong") bezeichnet. Der Tag dazu heißt:

<strong>Stark hervorgehobener Text</strong>

Diese Schreibweise führt in den meisten Fällen zum gleichen Formatierungseffekt, macht aber besonders dann Sinn, wenn Sie eine kurze Textpassage oder einzelne Wörter aus SEO-Gesichtspunkten heraus besonders betonen möchten (z.B., wenn es sich um ein wichtiges Keyword handelt).


Schrift kursiv setzen

"Kursiv" heißt im Englischen zunächst "italic", weshalb der Tag folgendermaßen lautet:

<i>Kursiv gesetzter Text</i>

Wenn Sie etwas betonen (engl. "to emphasize") wollen (gerade wieder aus SEO-Gesichtspunkten heraus), dann schreiben Sie lieber:

<em>Betonter Text</em>


Links setzen

4. Links setzen

Links kommen in mindestens zwei verschiedenen Arten vor, nämlich einmal als Link auf eine andere Seite und einmal als Link auf eine E-Mail Adresse. Dabei fungiert die angesteuerte Adresse als Anker (engl. "anchor"), zu dem ein bestimmter Pfad führt (engl. "hyper reference", ganz grob übersetzt).

Wenn Sie einen Link setzen wollen, dann schreiben Sie also:

<a href="[Pfadname]">Text, der als Link fungieren soll</a>

Der Link auf die STRATO-Startseite heißt z.B.:

<a href="https://www.strato.de">STRATO-Startseite</a>

Wenn Sie in einem Text eine Mail-Adresse angeben wollen, bei der sich bei Klick das Mail-Programm des Users öffnet, dann schreiben Sie:

<a href="mailto:name.nachname@internetadresse.de">Linktext</a>

Zu den Möglichkeiten, wie Sie Links setzen, gäbe es noch viel mehr zu sagen. Da wir Ihnen aber lediglich die grundsätzliche Struktur eines Links in HTML-Schreibweise näherbringen möchten, verweisen wir an dieser Stelle lieber auf die ausführliche Beschreibung in SELFHTML, dem Standardwerk für HTML.


HTML-Erläuterung

Hoffentlich ist jetzt ein bisschen mehr Licht im Tunnel

Dies hier ist bei weitem keine Anleitung, wie Sie eine gesamte HTML-Seite bauen können. Das brauchen Sie ja auch nicht, weil das das CMS schon für Sie erledigt. Jetzt wissen Sie aber hoffentlich eher, wie Sie kleinere Fehler in der Quellcode-Ansicht des Editors selbst beheben können.

Alle genannten HTML-Beispiele können Sie so, wie sie sind, in Ihren Editor kopieren, um herauszufinden, wie sie im Browser aussehen. (Am besten kopieren Sie die Beispiele zunächst in einen einfachen Text-Editor und dann erst in den Editor des CMS.) Viel Spaß beim Ausprobieren!

  • Geprüfte Sicherheit

    Geprüfte Sicherheit
  • Service-Sieger

    Service-Sieger
  • 24/7-Support (optional)

    24/7-Support
  • Deutscher Datenschutz

    Deutscher Datenschutz