Oops, leider verwenden Sie einen wirklich alten Browser! Für uns ist das in Ordnung, aber als zukunftsorientierte Agentur setzen wir Technologien ein, die Ihr Browser nicht unterstützt. Diese Website wird also nicht dargestellt, wie sie aussehen sollte. Bitte tun Sie sich und dem Internet einen Gefallen und laden Sie eine aktuelle Version von Chrome, Firefox oder Safari herunter. Sie werden das Web mit ganz anderen Augen sehen und viel sicherer surfen.

WordPress & HTML: Basics, die jeder kennen muss

HTML Basics für WordPress (Foto: iMac mit einem geöffneten Code-Editor)

Ich schirme Kunden gerne von allem ab, was sie nicht wissen müssen. Denn ihre Zeit ist wertvoll und sie sollen sie nicht mit Dingen verschwenden, über die nur ich mir den Kopf zerbrechen muss. Wenn es um Websites geht, dann gibt es ja immerhin WordPress. Aber auch WordPress hat Grenzen und die stecken in der täglichen Anwendung vor allem darin, Texte vernünftig auszuzeichnen, sodass z.B. Suchmaschinen sie verstehen. Mittlerweile bin ich der Überzeugung: Ohne HTML-Basics geht es trotz WordPress nicht. Und deshalb lernen Sie diese heute in Ihrer Mittagspause. Versprochen.

Was ist HTML und wozu brauche ich es?

Die Abkürzung HTML steht für Hypertext Markup Language und ist die Sprache des Internets. Alle Websites basieren auf HTML, dabei ist es nicht einmal eine Programmier-, sondern nur eine Auszeichnungssprache. Deshalb ist es auch so einfach und schnell zu erlernen. Denn das Einzige, was HTML macht, ist Folgendes: Es legt fest, welcher Teil Ihrer Website was ist.

Mit anderen Worten: In HTML bestimmen Sie, dass dieses oder jenes eine Überschrift, ein Absatz, ein Zitat, ein Link oder eine ganze Seitenleiste ist. In HTML findet aber keinerlei Gestaltung statt, dafür ist CSS zuständig. Auch ist HTML vollkommen undynamisch, wenn Sie also Animationen sehen, wie aufklappende Listen oder Tabellenspalten, die sich via Klick sortieren lassen, dann ist das kein HTML, sondern JavaScript.

Ja, HTML kann wirklich wenig, und trotzdem brauchen wir es für alles. Und Sie brauchen es jedes Mal, wenn Sie etwas an Ihrer Website ändern, ob es nun der Text einer Seite oder eines Beitrags ist. Wenn Sie möchten, dass Browser Ihre Website richtig darstellen, dass Suchmaschinen Ihre Inhalte korrekt bewerten, um sie zu ranken und wenn auch Menschen mit Sehbehinderung Ihre Inhalte verstehen sollen, dann muss der HTML-Code Ihrer Inhalte korrekt sein. Und dafür müssen Sie wissen, was Sie hier überhaupt tun.

Aber WordPress erledigt doch alles für mich?

WordPress ist erstaunlich vielseitig und nimmt Ihnen so viel Arbeit ab, die sonst mühsam per Hand gemacht werden müsste. Aber der visuelle Editor von WordPress, den Sie tagein tagaus verwenden, hat seine Schwächen. Und wenn er dann noch nicht mal richtig eingesetzt wird, weil Überschriften nicht korrekt festgelegt wurden oder Listen einfach aus Spiegelstrichen bestehen, dann hilft er auch nicht mehr viel.

Letztlich macht der visuelle Editor nichts anderes, als das HTML für Sie zu schreiben. Da das aber so einfach ist, wäre es sinnvoller, das selbst zu tun – oder zumindest ein Auge auf das zu haben, was WordPress da macht. Denn nur so können Sie sich sicher sein, dass Ihre Inhalte auch semantisch korrekt und professionell ausgezeichnet sind.

Was sich im Übrigen für jede Website gehört, die nicht rein aus privatem Hobby besteht. Oder haben Sie schon einmal bei der FAZ, BMW oder Apple schlampig formatierte Texte gesehen? In einem Word-Dokument ist es meistens egal, ob Sie den Text einfach nur größer machen und fett setzen – oder ob Sie eine echte Überschrift deklarieren. Im Internet macht dieser Unterschied jedoch die Welt aus.

WordPress und der Editor

HTML geben Sie in WordPress vor allem im Editor ein, also bei dem Anlegen und Bearbeiten von Seiten oder Beiträgen. Dieser Editor hat zwei verschiedene Ansichten (umschaltbar über die beiden Buttons rechts oberhalb des Editors), auf die ich kurz eingehen möchte.

WordPress Visueller Editor

Der visuelle Editor ist die einzige Ansicht, die den meisten Benutzern bekannt ist. Hier können Sie, wie Sie es aus Word kennen, Texte mithilfe der obigen Buttons formatieren. Das ist sehr komfortabel, allerdings etwas fehleranfällig. Bei umfangreicheren HTML-Konstrukten, die eingefügt worden sind, kann es leider auch passieren, dass WordPress diese zerstört.

WordPress HTML Text Editor

Sicherer ist immer der Text-Editor, also die HTML-Ansicht. Hier sehen Sie den Code, den WordPress erzeugt. Den können Sie jederzeit direkt bearbeiten oder zumindest überprüfen. Ich empfehle Ihnen, fortan nur noch diese Text-Ansicht zu verwenden. So vermeiden Sie, dass WordPress Fehler einbaut und haben mehr Kontrolle über den Code. Code, den Sie schon gleich mit ganz neuen Augen sehen werden.

Die Texte von der Seitenleiste, der Startseite oder anderen Bereichen außerhalb des eigentlichen Inhalts einer Seite bzw. eines Beitrags werden in WordPress üblicherweise unter Design • Widgets bearbeitet. Das hängt stark vom verwendeten Theme ab. Auch in Widgets, insbesondere Text-Widgets, können Sie HTML-Code verwenden. Seit WordPress 4.8 ist es sogar möglich, hier ebenfalls zwischen einem visuellen und einem Text-Editor zu wechseln.

Wie HTML-Elemente funktionieren

Wie bereits erwähnt, ist HTML nur dazu da, Dinge auszuzeichnen. Sie können es sich wie eine Landkarte vorstellen. Die Landkarte ist nicht dafür verantwortlich, Straßen zu bauen oder Häuserfassaden zu streichen. Sie sagt bloß: Das ist ein Fluss, das ist eine Straße, hier ist ein Wohngebiet, hier ist Natur, hier ist Wasser.

Um in HTML die einzelnen "Gebiete" Ihrer Website auszuzeichnen, benötigen Sie sogenannte HTML-Elemente oder auch HTML-Tags (sprich: tägs). Diese schreibt man ausnahmslos in spitze Klammern: <strong> – dieses Element sorgt übrigens für fettgedruckten Text.

Damit aber der Browser nun nicht nur weiß, wo der fettgedruckte Text anfängt, sondern auch, wo er aufhört, brauchen wir noch etwas, das dieses Ende festlegt: also ein schließendes HTML-Element. Das ist fast identisch mit dem öffnenden, bis auf einen Slash: </strong>

Möchten Sie also einen Text fettdrucken, dann schreiben Sie ihn zwischen diese beiden Tags: <strong>Ein fetter Text</strong>

Auf diese Weise funktionieren fast alle HTML-Elemente. Sie müssen sie also nur noch kennen und schon können Sie sie um alles herumlegen, was Ihnen zwischen die Finger kommt: Überschriften, Absätze, Listen, einzelne Listenpunkte, etc.

Fast alle HTML-Elemente? Ja, denn Ausnahmen bestätigen die Regel. So gibt es auch HTML-Elemente, von denen es nur das öffnende Tag gibt. Ein Bild ist ein gutes Beispiel. Welchen Text soll ein Bild umschließen? Das würde nicht funktionieren, deshalb ergäbe es auch keinen Sinn, hier ein schließendes Tag zu erfordern. Ein Bild fügt man schlichtweg so ein: <img src=""> – das war’s.

Übrigens: HTML und CSS werden immer in einem Atemzug genannt. Während HTML bloß sagt, dass etwas eine Überschrift ist, legt CSS fest, wie eine Überschrift auf Ihrer Website aussehen soll. Browser interpretieren also immer beides. Als Anwender besteht Ihre Aufgabe aber in der Regel nur darin, die einzelnen Teile Ihrer Inhalte korrekt auszuweisen. Denn die CSS-Angaben hat schon der Designer Ihrer Website bzw. der Autor Ihres Themes einmalig festgelegt. Deshalb ist es auch so wichtig, die Dinge in HTML richtig zu benennen, weil nur so alle Überschriften, Listen und Inhalte gleich und damit eben auch professionell aussehen.

Attribute erweitern die Elemente

HTML-Elemente allein wären ziemlich langweilig, deshalb kann man sie erweitern – mit nützlichen Informationen. Sie haben gerade schon das <img>-Tag kennengelernt, das ein Bild einfügt. Das kann es aber natürlich nicht von Zauberhand, es benötigt die URL eines Bildes, das es einfügen soll. Und diese muss man ihm übergeben. Dafür ist das Attribut src (kurz für "source", also Quelle) zuständig.

Ein Attribut wird immer durch ein Leerzeichen vom Namen des Tags getrennt und endet mit ="". In den Anführungszeichen steht dann der Wert, der dem Attribut zugewiesen werden soll. Im Falle des Bildes könnte das ganz einfach so aussehen:

<img src="portrait-christopher.jpg">

Das funktioniert fast immer so. Schon wieder ein "fast"? Ja, es gibt auch Attribute, denen muss man keinen Wert übergeben, sie stehen für sich selbst. Ein gutes Beispiel sind Links. Stellen Sie sich vor, Sie möchten eine PDF-Datei verlinken. Aber Sie wollen nicht, dass Besucher sich diese in ihrem Browser anschauen, sie sollen die Datei lieber herunterladen. Dann können Sie dem Link-Element das Attribut download hinzufügen:

<a href="bedienungsanleitung.pdf" download>Hier klicken</a>

An diesem Beispiel können Sie auch sehen, dass das Link-Element (<a>) gleich mit zwei Attributen ausgestattet wurde: Zum einen mit href, das anzeigt, was das Ziel des Links sein soll, also die URL einer anderen Website oder eben die URL zu einer Datei. Und zum anderen mit download, das einfach nur angehängt wird, ganz ohne ="". Sie sehen, dass auch mehrere Attribute einfach nur durch Leerzeichen voneinander getrennt werden.

Der Aufbau eines HTML-Dokuments

Keine Sorge, Sie müssen nicht lernen, wie man eine eigene HTML-Website erstellt. Nicht einmal eine Unterseite. Denn WordPress und das Theme nehmen Ihnen fast alles ab. Es ist dennoch gut, wenn Sie zumindest rudimentäre Kenntnisse darüber haben, wie ein HTML-Dokument aufgebaut ist. Einfach, damit Sie sich im Fall der Fälle zurechtfinden.

Oben sehen Sie den Aufbau eines ziemlich simplen HTML-Dokuments. Würden Sie das in Ihrem Browser aufrufen, würden Sie nicht mehr als eine weiße Seite sehen, denn es enthält bloß strukturelle Angaben, weder Texte noch Bilder.

Ein Dokument beginnt immer mit dem !DOCTYPE, er legt lediglich fest, dass es sich hier um ein HTML-Dokument handelt, und zwar um HTML 5. Sie haben Glück, denn vor HTML 5 sahen die sehr viel komplizierter aus.

Eigentlich beginnt das Dokument aber erst mit dem <html>-Element. Es umschließt das gesamte Dokument und wird deshalb in der letzten Zeile geschlossen. Immer. Überhaupt ist ein HTML-Dokument nur eine manchmal große, manchmal kleine Verschachtelung von Elementen. Dem <html>-Element wird zusätzlich noch das Attribut lang übergeben, das die Sprache des Dokumentes festlegt.

<head> leitet den Kopfbereich ein und wird in Zeile 6 wieder geschlossen. Der Kopfbereich ist für Ihre Besucher vollkommen unsichtbar, sie können ihn nur erkennen, wenn sie den Quelltext der Website aufrufen. Aber diese Angaben sind trotzdem sehr, sehr wichtig. Sie entdecken in Zeile 4 beispielsweise ein <meta>-Tag. Es legt den Zeichensatz fest (UTF-8).

Wichtig für die Suchmaschinenoptimierung ist hier aber <title>, das den Titel Ihrer Seite enthält. Dieser wird allerdings gar nicht auf Ihrer Website angezeigt, jedoch in den Suchergebnissen als Überschrift Ihres Ergebnisses. Außerdem finden Sie ihn als Bezeichnung auf den Tabs in Ihrem Browser.

Der Hauptbereich ist aber natürlich <body> – hierin findet sich alles, was Ihre Besucher wirklich von der Website sehen können. Alle Überschriften, Texte, ja auch das ganze Layout Ihrer Website, also Hauptbereiche, Seitenleisten, Navigationen, Fußbereiche und vieles mehr. Wenn Sie in WordPress Ihre Beiträge schreiben oder die Texte Ihrer Seiten anpassen, dann befinden Sie sich immer im <body>, genau genommen sogar nur in einem kleinen Teil davon, nämlich dem Content-Bereich. Wie dieser genau aussieht und heißt, das hängt vom Layout Ihres Themes ab.

Die allerwichtigsten HTML-Elemente

Niemand verlangt von Ihnen, alle HTML-Elemente auswendig zu lernen. Kaum jemand kennt wirklich alle wie seine Westentasche. Eine Handvoll begegnen Ihnen aber bei Ihrer täglichen Arbeit und die lohnt es, im Hinterkopf zu haben.

Titel der Seite: <title>

Das <title>-Tag im Kopfbereich Ihrer Website ist, wie gesagt, unsichtbar, aber es ist so elementar wichtig für Ihre Website. Dieser Titel wird nicht nur bei Google als Überschrift des jeweiligen Suchergebnisses verwendet, er ist auch einer der wichtigsten Ranking-Faktoren. Denn für einen Begriff, der nicht einmal im Titel Ihrer Unterseite vorkommt, haben Sie kaum Chancen, bei Google gerankt zu werden.

Deshalb repräsentiert das <title>-Element auch nicht den Titel Ihrer gesamten Website, sondern bloß immer den Titel der jeweiligen Unterseite. Der Titel der gesamten Website steht zwar üblicherweise in demselben Element, allerdings nur auf der Startseite. Er kann in Form Ihres Firmennamens jedoch auch wiederkehrend auf Unterseiten auftauchen, meistens nach folgendem Schema: Titel der Unterseite | Firma. Schließlich schadet etwas Branding ja nie.

Das, was im <title> steht, beeinflussen Sie in WordPress lediglich über den Titel Ihrer Unterseite oder Ihres Beitrags. Dieser wird je nach der Konfiguration von Ihrem Yoast SEO Plugin verwendet, um das <title>-Tag zu konstruieren. Sie können diesen Titel bei jeder Seite, bei jedem Beitrag aber auch separat festlegen, und zwar indem Sie in dem Abschnitt von Yoast SEO den sogenannten SEO-Titel ändern. Das ist aber nur selten erforderlich.

Unsichtbare Angaben: <meta>

Ein weiteres Element aus dem <head>-Bereich möchte ich Ihnen noch vorstellen, weil man damit immer wieder zu tun hat. Das <meta>-Tag ist dazu da, verschiedene Fakten über die Website zu hinterlegen, ohne dass der Nutzer sie sieht. Sie sind aber wichtig für manche Geräte und vor allem für Suchmaschinen.

So ist im Rahmen der Suchmaschinenoptimierung immer wieder von Meta Descriptions die Rede und dieses "Meta" bezieht sich einfach nur auf das gleichnamige HTML-Element. Diese Beschreibung wird gerne von Google und Bing verwendet, um für Ihr Suchergebnis einen beschreibenden Text anzuzeigen – sofern sie ihn für relevant erachten. (Ein Suchergebnis besteht also aus einem Titel (<title>), einer Beschreibung (Meta Description) und der URL zur Zielseite.)

Das <meta>-Element wird nicht geschlossen, kann aber trotzdem nicht für sich allein stehen. Einfach nur <meta> gibt es nicht, es muss immer das Attribut name festgelegt werden. Das ist in diesem Fall description, es könnte aber auch (das heute irrelevante) keywords sein. Oder robots, das die Indexierung durch Suchmaschinen steuert (ihnen zum Beispiel über den Wert noindex die Indexierung einzelner Unterseiten verbietet). Im Attribut content ist jeweils der zu übergebende Wert enthalten.

Überschriften: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Überschriften sind ein unheimlich wichtiges Thema, das meist sträflich vernachlässigt wird. Aber Sie können in Suchergebnissen kaum gute Ergebnisse erzielen, wenn Sie diese wichtigen Elemente nicht korrekt einsetzen. Ständig begegnen mir Überschriften, die einfach nur fett gesetzt wurden (Sie erinnern sich an <strong>?). Das ist dann bloß keine Überschrift, sondern nur fetter Text. Das sieht nicht gut aus, lässt enorme Chancen bei der Suchmaschinenoptimierung aus und ist schlicht und einfach falsch. Das Internet ist kein Blatt Papier.

Dabei wäre es so einfach. Denn die Zahlen dieser HTML-Elemente stehen einfach für die jeweilige Ebene der Überschrift. Eine Überschrift 1. Ordnung ist also in ein <h1>-Tag gekleidet, eine Überschrift 2. Ordnung in ein <h2>-Tag und so weiter:

In WordPress setzt jedes ordentliche Theme den Titel Ihrer Unterseite bzw. Ihres Beitrags automatisch in <h1>. Da es logischerweise nur einmal <h1> pro Dokument geben kann (schließlich kann ein Dokument doch nur einen einzigen Titel haben), dürfen in Ihrem Text alle Überschriften erst bei <h2> beginnen. Merken Sie sich also: Bei WordPress ist das Feld für den Titel gleichbedeutend mit <h1> – im Editor selbst verwenden Sie bloß <h2> bis <h6>.

Für Anwender ist oft schwierig zu verstehen, wo genau der Unterschied zwischen <title> und <h1> ist. Wenn Sie eine neue Seite oder einen neuen Beitrag anlegen, geben Sie einen Titel (und einen Inhalt) an. Dieser Titel wird üblicherweise zweifach verwendet: Aus ihm wird sowohl das <title>-Tag konstruiert als auch das <h1>-Tag. Während das Erstere nur im Quellcode steht und eigentlich nur innerhalb von Suchergebnissen ausgegeben wird, ist die <h1>-Überschrift auf Ihrer Website selbst zu sehen, sie ist die eigentliche Überschrift des Dokuments. Durch diese Unterscheidung ist es jedoch möglich, in den Suchergebnissen einen etwas anderen Titel anzuzeigen als auf Ihrer Website – zum Beispiel aufgrund der Zeichenbegrenzung auf Suchergebnisseiten.

Achten Sie bitte genau darauf, wie die einzelnen Überschriften wirklich zueinander stehen. Oft wird einfach jede Überschrift in <h2> gesetzt, aber nicht beachtet, dass diese Überschriften gar nicht auf derselben Ebene stehen. Ein einfaches Beispiel:

Sie werden Überschriften vielleicht für etwas Bedeutungsloses halten, aber das sind sie beileibe nicht. Wenn Sie suchmaschinentechnisch nur eine Sache richtig machen möchten, dann setzen Sie Ihre Überschriften korrekt.

Absätze: <p>

Der größte Teil Ihrer Inhalte dürfte aus ganz normalem Fließtext bestehen, also aus verschiedenen Absätzen. Und einen Absatz kennzeichnet man in HTML einfach dadurch, dass man ihn in das <p>-Tag einkleidet:

Absätze gehören zu den simpelsten Elementen. Achten Sie nur darauf, keine leeren zu produzieren, WordPress hat dazu manchmal eine Neigung. Die sehen dann so aus: <p>&nbsp;</p>, wobei das &nbsp; einfach für ein geschütztes Leerzeichen steht. Manche Nutzer wollen durch so etwas Abstände erzeugen, das sollte man allerdings niemals auf diese Weise tun, sondern ausschließlich durch CSS. Sonst zerstören Sie die semantische Struktur Ihrer Seite. Mehrmals Enter drücken wie in Word ist also verboten.

Zeilenumbrüche: <br>

Absätze sind gleich immer ein sehr hartes Mittel, um einen Umbruch zu erzeugen. Manchmal soll es ein wenig softer sein. Denn üblicherweise wird nach jedem Absatz ein Abstand erzeugt, auf modernen Websites ist dieser umso größer. Wenn Sie aber bloß einen klassischen Zeilenumbruch möchten, also bloß in die nächste Zeile rutschen wollen (z.B. bei der Angabe einer Anschrift im Impressum), dann ist der reine Zeilenumbruch <br> wirklich Gold wert:

Das <br>-Element ist übrigens eines der wenigen Tags, das für sich allein steht und immer an genau der Stelle, an der Sie den Zeilenumbruch erzwingen möchten. Passen Sie allerdings auf, dass Sie diesen nicht zu oft einsetzen. Es ist im Zeitalter responsiver Websites nicht sinnvoll, alle Absätze mit solchen Umbrüchen zu versehen, das würde vielleicht auf dem Desktop gut, aber auf dem Mobilgerät grauenhaft aussehen. Sparen Sie sich das Element für die Momente, in denen es nicht anders geht.

Listen: <ul>, <ol> und <li>

Reiner Fließtext ist wirklich anstrengend zu lesen. Es lohnt sich, ihn regelmäßig zu unterbrechen, spätestens alle 2-3 Absätze. Das geht nicht nur mit Überschriften, auch Listen sind ein ganz wunderbares Mittel. Denn sie unterbrechen nicht nur, sie ziehen Blicke von Lesern auch magisch an, weil sie so komfortabel im Gehirn zu verarbeiten sind.

Listen sind ein ganz kleines bisschen komplizierter als zum Beispiel Absätze, weil sie verschachtelt werden. Aber Sie sehen sofort, dass das kein Grund zur Beunruhigung ist:

Zunächst unterscheiden wir zwischen zwei Arten von Listen: ungeordneten und geordneten. Die ungeordneten sind die mit den Spiegelstrichen oder Bullet Points, sie werden vom <ul>-Tag umschlossen. Die geordneten werden üblicherweise durch arabische Ziffern sowie einen Punkt gekennzeichnet, sie umschließt man mit <ol>. Das <ul> bzw. <ol> muss einmal um die gesamte Liste herumgelegt werden, wie eine Schlange, die ihre Beute einkreist.

Die einzelnen Listenpunkte selbst werden durch <li> umschlossen. Und das Gute ist: Bei beiden Listentypen ist das identisch. Wollen Sie also aus einer geordneten eine ungeordnete Liste machen, dann müssen Sie nur aus dem <ol> ein <ul> machen – die Listenpunkte selbst bleiben, wie sie sind.

Übrigens: Es ist jetzt weder nötig noch sinnvoll, diese einzelnen Punkte entweder durch "-", "•" oder "1.", "2.", "3." einzuleiten. Das übernimmt der Browser ganz automatisch für Sie, indem er die Liste interpretiert. Würden Sie das zusätzlich hineinschreiben, würde es dem Leser doppelt angezeigt werden.

Verschachtelte Listen

Jetzt wird es einmal kompliziert. Zumindest, wenn Sie wissen möchten, wie man mehrere Listenebenen erstellt. Denn nicht immer stehen alle Listenpunkte auf derselben Ebene, manche sind anderen untergeordnet. Die Herangehensweise in HTML ist hierbei durchweg logisch, aber für den Laien auf den ersten Blick kompliziert. Wir machen das ganz langsam am Beispiel einer ungeordneten Liste:

Vergleichen Sie das mit dem obigen Listen-Beispiel und Sie werden sehen, dass fast alles so geblieben ist, wie bisher. Wir haben ein <ul>, das um die gesamte Liste herumgelegt ist. Wir haben auch weiterhin einzelne <li>’s, die die Listenpunkte repräsentieren.

Aber beim ersten Listenpunkt sehen Sie, dass dieser zunächst gar nicht durch ein </li> geschlossen wird. Es geht in Zeile 3 direkt weiter mit… oh je, einer neuen Liste. In den Zeilen 3 bis 7 finden Sie eine komplette ungeordnete Liste. Das <li>, was wir in Zeile 2 geöffnet haben, wird tatsächlich erst in Zeile 8 wieder geschlossen.

Komplizierter wird HTML nicht mehr als an dieser Stelle. Sie werden wahrscheinlich kurz mit dem Kopf geschüttelt haben, aber nun feststellen, dass das absolut logisch (wenngleich auch vollkommen unübersichtlich) ist. Und genau so ginge es auch weiter, wenn Sie nun eine dritte oder vierte Ebene hinzufügen wollten. Sie schließen das <li> des Unterpunktes noch nicht, fügen eine komplette Liste ein und schließen es erst danach.

Ich habe gerade erst gesehen, wie jemand, der es sich einfach machen wollte, mit <br> mehrere Zeilenumbrüche innerhalb eines Listenpunktes erzeugt hat, um diesen neuen Zeilen dann einen Spiegelstrich am Anfang hinzuzufügen. Das sieht zwar für Laien korrekt aus, ist aber falsch und Suchmaschinen können Ihre Inhalte so nicht verstehen. Sie halten das dann für einen einzelnen, ziemlich seltsamen Punkt. Machen Sie das also bitte nicht, das ist schlampige Arbeit.

Hervorhebungen: <strong>, <em>, <del> und <small>

Es wäre wirklich schade, wenn alle Wörter und Sätze das gleiche Gewicht hätten. Wenn es unter ihnen niemand Besonderes gäbe. Das können Sie ändern, indem Sie einzelne Textbereiche hervorheben. Das funktioniert sowohl innerhalb von Absätzen als auch in Listenpunkten oder wo auch immer sich sonst sichtbarer Text befindet:

Mit diesen vier Elementen kommen Sie durch alle Texte hindurch: <strong> macht Texte fett, <em> macht sie kursiv, <del> streicht sie durch (praktisch bei Preisen) und <small> sorgt für das Kleingedruckte.

Eines der wichtigsten HTML-Elemente, das überhaupt erst dafür sorgt, dass das Internet existieren kann, ist das Link-Element namens <a>:

Das <a>-Tag kann nicht für sich alleine stehen, es benötigt Attribute. Das Wichtigste ist href, denn es legt das Ziel des Links fest. Also beispielsweise eine Unterseite Ihrer Website, eine vollkommen fremde Website oder eine Datei, die aufgerufen bzw. heruntergeladen werden soll. Denken Sie daran, immer die volle URL anzugeben (inkl. Protokoll http:// oder https://), damit alles reibungslos funktioniert.

Übrigens: Link-Tags können Sie nicht nur um Text, sondern z.B. auch um Bilder legen. Dann führt der Klick auf das Bild zum angegebenen Ziel.

Ein weiteres nützliches Attribut nennt sich target, es legt fest, wo der Link geöffnet werden soll:

Es gibt hier verschiedene Werte, die Sie target übergeben können, allerdings benötigen Sie lediglich _blank. Das öffnet den Link nämlich in einem neuen Tab bzw. Fenster. Da praktisch jeder Browser so eingestellt ist, dass Links standardmäßig in demselben Tab geöffnet werden (alles andere wäre sehr anstrengend), können Sie dieses Attribut einfach ganz weglassen, wenn sich der Link in demselben Tab öffnen soll.

Tipp: Mittlerweile ist es üblich, Links zu externen Websites mit dem target="_blank" Attribut auszuzeichnen. Denn Sie möchten schließlich nicht, dass Besucher Ihre Website plötzlich verlassen, weil sie auf einen Link zu einer anderen Website klicken. Links zu Ihren eigenen Unterseiten sollten sich jedoch immer in demselben Tab öffnen, sonst sorgt das für eine ganz bescheidene Usability.

Zitate: <blockquote>

Manchmal wiegen die Worte der anderen schwerer als die eigenen. Zitate sind ein tolles Mittel, um Texte aufzulockern. Entweder indem Sie Zitate von anderen verwenden oder indem Sie Teile Ihres eigenen Textes zitieren, der noch folgen wird. So wie Sie es vielleicht aus modernen Magazinen kennen:

Natürlich können Sie auch angeben, von wem das Zitat stammt. Am ordentlichsten machen Sie das, indem Sie den Zitierten wie folgt verewigen:

Durch das <cite>-Element innerhalb der <blockquote> geben Sie an, wer der Autor der vorstehenden Worte war.

Achten Sie darauf, es mit den Zitaten nicht zu übertreiben. So sehr sie für Ruhepausen beim Lesen sorgen, so sehr sie auch die Blicke auf sich ziehen, es ist wie mit Schokolade: Eine Tafel ist köstlich, hunderte Tafeln hintereinander sorgen für Bauchschmerzen (wir haben das für Sie getestet).

Bilder: <img>

Entfernen wir uns ein wenig von den Texten. Denn immerhin sagt ja ein Bild mehr als tausend Worte. Deshalb sollten Sie auch wissen, wie man so eines korrekt einfügt. Dafür steht Ihnen das <img>-Tag zur Verfügung:

Und es kommt gleich mit zahlreichen Attributen hinterher. Diese sind zwar nicht alle Pflicht, sollten aber trotzdem nicht fehlen. Das src-Attribute legt zunächst einmal fest, wo sich das Bild befindet. Hier kann zum Beispiel ein relativer Pfad stehen wie im Beispiel, wenn sich das Bild auf derselben Ebene wie die Unterseite befindet. Das kommt vor allem bei WordPress nicht vor und wurde hier deshalb nur gewählt, um den Code nicht unnötig lang zu machen. In der Praxis sollten Sie hier die vollständige URL (also den absoluten Pfad) zum Bild eintragen, das bei WordPress meist im Unterordner /wp-content/uploads/jahr/monat/ liegt.

Mit width und height legen Sie die Breite respektive die Höhe des Bildes in Pixeln fest, in der es eingebunden werden soll. Das muss nicht zwingend die tatsächliche Größe des Bildes sein. Alternativ können Sie auch Prozentzahlen angeben, also z.B. width="100%". Die Angabe der Größe beschleunigt den Seitenaufbau.

Sehr wichtig ist auch das alt-Attribut. Es legt nämlich einen alternativen Titel für das Bild fest, falls es nicht angezeigt werden kann. In Wahrheit benötigt man es aber vor allem für die Suchmaschinen. Denn sie bewerten den Text, der im alt-Attribut steht im Rahmen des Rankings. Suchmaschinen verstehen so besser, was auf dem Bild zu sehen ist. Man sollte sich allerdings bemühen, das nicht zu stark zu missbrauchen. Auch weil Sehbehinderte sich darauf verlassen, dass sie das Bild verstehen können, wenn ihnen der Inhalt dieses Attributs automatisch vorgelesen wird.

Block-Bereiche: <div>

Wie bereits erwähnt, zeichnet man in HTML nicht nur Texte aus oder fügt Bilder ein. Man legt auch fest, wie einzelne Bereiche heißen sollen, damit man sie später in CSS gestalten kann. Ein Element, auf das Sie in diesem Zusammenhang immer wieder treffen werden, ist das <div>-Tag. Es ist ein Block-Element, das nichts weiter tut, als einen neuen Block bzw. Abschnitt zu erzeugen. Mehrere <div>-Bereiche hintereinander im Code werden standardmäßig untereinander im Browser angezeigt. Möchte man sie nebeneinander stehen haben, muss man das in CSS festlegen.

Üblicherweise werden solche <div>’s mit einer ID oder Klasse versehen. Das spielt innerhalb von HTML nur eine untergeordnete Rolle und ist vor allem wichtig, um diese einzelnen <div>’s später in CSS ansprechen zu können. Denn es ist nicht möglich, zu sagen: "Sprich mal das <div> da in der 349. Zeile im Quellcode an". Durch IDs (die nur einmal vergeben werden dürfen) und Klassen (die mehrmals pro Dokument auftauchen können) gibt man den <div>’s Namen, mit denen man in CSS nach ihnen rufen kann. Diese IDs und Klassen kann man übrigens fast jedem HTML-Element zuweisen.

Sie sehen am obigen Beispiel, dass <div>’s auch gerne verschachtelt werden. Hier haben wir einen Logo-Bereich definiert, der verschiedene einzelne Logos im Rahmen der <div>’s enthalten soll. Das hätte man auch direkt mit <img>-Tags machen können, aber dann würde das Beispiel nicht funktionieren. Wichtig ist nur, dass Sie wissen, dass das <div> mit der Klasse new-york-times ein Unterbereich des <div>’s mit der ID logos ist. Und dass sich das beliebig weiter verschachteln ließe.

Alle <div>’s müssen natürlich am Ende immer wieder geschlossen werden. Und hier zeigt sich auch ein großes Problem, wenn Website-Betreiber kein HTML verstehen. Denn von der Agentur werden manche Bereiche einfach direkt in HTML-Code hinterlegt, wie z.B. ein solcher Logo-Bereich. Wenn Kunden dann das letzte Logo entfernen möchten, weil es nicht benötigt wird, tendieren sie leider dazu, nicht nur Zeile 6, sondern auch Zeile 7 zu entfernen. Und zerstören damit das gesamte Konstrukt. Passen Sie bei <div>’s und bei HTML-Elementen generell also auf, was Sie entfernen.

Inline-Bereiche: <span>

Neben den Block-Bereichen lassen sich aber auch noch sogenannte Inline-Bereiche definieren, also solche, die schon von ihrer Natur her keine Form von Zeilenumbruch erzeugen. Das ist zum Beispiel nützlich, wenn man mitten in einem Text eine Passage anders gestalten will, aber die herkömmlichen Elemente dafür nicht ausreichen:

Hier wurde ein Teilbereich des Textes in ein <span>-Element eingekleidet und mit der Klasse code versehen. Es ist nicht nötig, eine Klasse oder ID anzugeben, da sich das Element vielleicht auch anders ansprechen ließe, aber eine Klasse hinzuzufügen ist üblich. Nun könnte man in CSS festlegen, dass der Text innerhalb dieses <span>’s eine andere Schriftart hat, zum Beispiel Roboto Mono, weil es Code darstellen soll.

Genauso gut könnte man die Klasse aber auch red nennen und in CSS definieren, dass die Schriftart dieses <span>’s fortan #ff0000, also rot sein soll. Mit diesen <span>-Elementen können Sie fast alles machen. Überlegen Sie aber immer, ob es nicht schon ein HTML-Element gibt, das genau das macht, was Sie bewirken wollen.

Tabellen & Formulare

Zwei prominente Themen werden in diesem Guide nicht besprochen. Das eine, weil es heute überflüssig ist. Das andere, weil es zu komplex ist und vom normalen Anwender seltener benötigt wird.

Tabellen werden immer wieder nachgefragt, weil sie im Editor von WordPress gar nicht eingefügt werden können. Dabei gäbe es, trotz ihrer komplexen Architektur, Möglichkeiten hierfür. Der Editor, den WordPress verwendet, bietet diese sogar von Haus aus an, sie wurden hier bloß ausgeschaltet. Das Problem mit Tabellen ist, dass sie im heutigen responsiven Webdesign keinen Platz mehr haben. Es gibt praktisch keinen Weg, sie so einzubinden, dass sie auf Smartphones komfortabel zu lesen sind. So unbefriedigend diese Antwort für Sie sein mag, aber suchen Sie sich besser eine andere Darstellungsform für Ihre Inhalte auf Websites und wagen Sie sich als Anfänger nicht selbst daran.

Formulare hingegen findet man sehr häufig auf Websites und sie verursachen natürlich auch wenig Probleme auf Smartphones. Allerdings ist das Thema Formulare ein sehr umfangreiches und würde diesen Guide hier sprengen. Formulare werden von Website-Betreibern ohnehin selten selbst und nicht unbedingt per Hand eingebaut, deshalb sparen wir es an dieser Stelle aus und bitten um Ihr Verständnis.

Ordnung ist der halbe Code

Das schöne an Sprachen wie HTML ist, dass sie durchweg logisch sind. Wenn etwas nicht funktioniert, haben Sie einen Fehler gemacht. Das hört sich frustrierend an, ist aber eine fantastische Grundvoraussetzung. Denn dann wissen Sie, dass es nicht an der Technik liegt, dass niemand anders schuld ist. Und dass es da irgendwo etwas gibt, was Sie verbessern müssen und können.

Aus diesem Grund ist es von immenser Wichtigkeit, dass Sie stets ordentlich arbeiten. Eine spitze Klammer vergessen oder ein Anführungszeichen und schon funktioniert nichts mehr. Zugegeben, Browser sind heute gut darin, Fehler im HTML-Code auszugleichen, aber das klappt nicht immer und schon gar nicht bei schwerwiegenden Fehlern. Und verlassen sollte man sich darauf ohnehin nicht. Zudem wissen Sie nicht, wie Suchmaschinen darauf reagieren – denen ist es im Zweifel vollkommen gleichgültig, dass in Ihrem Browser doch alles gut aussieht. Denn sie lesen bloß Code.

Arbeiten Sie ordentlich und Sie werden deutlich weniger Probleme haben. Ein simpler Code-Editor wie Atom.io kann Ihnen dabei helfen, da er den Code farbig hervorhebt und mögliche Werte vorschlägt.

2Übrigens: Ihnen werden in den Codebeispielen die zahlreichen Einrückungen aufgefallen sein. In den meisten Fällen sind das Leerzeichen, manchmal auch Tabs. Sie dienen lediglich der Übersichtlichkeit des Codes (untergeordnete Elemente werden eingerückt, um ihre Beziehung zum übergeordneten Element darzustellen). Leerzeichen werden in HTML einfach ignoriert, deshalb sorgen diese Unmengen davon auch nicht für Chaos bei der Ausgabe.

Fazit

Mit dem obigen Wissen über HTML können Sie nun bereits sehr souverän mit dem Code umgehen, der in der täglichen Anwendung von WordPress relevant ist. Die Liste der HTML-Elemente ist natürlich noch länger, aber viele davon finden selbst im professionellen Einsatz keinerlei Verwendung. Dennoch schadet es nie, sein Wissen auf eigene Faust zu erweitern. Ich hoffe, hiermit ein gutes Fundament geschaffen zu haben.

Foto: Unsplash.com / Lee Campbell

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht.