‹b›Aufgepasst!‹/b› – HTML Basics für Content Manager

HTML_basics_fuer_content_manager.jpgSeltsame Einrückungen, fette Hervorhebungen, wo ich sie nicht will, dafür aber keine Kursivschrift, wo ich sie gerne hätte: Hin und wieder hat es mir in der Vergangenheit bei meinem Content die Formatierung zerschossen – aus für mich damals unerfindlichen Gründen. Von meinem Kollegen aus der Technik bekam ich dann immer die gleiche Antwort: "Hast Du schon mal in den Quelltext geschaut?" Nein, hatte ich nicht. Hätte mir aber auch nichts genutzt, weil ich von HTML schlicht keine Ahnung hatte. Ich bin auch heute noch alles andere als ein HTML-Crack, aber ich habe mir ein paar einfache Codes gemerkt, die auch für mich als Content Manager äußerst hilfreich sind!

Als Content Manager muss man vieles können – programmieren gehört, den modernen Content Management Systemen sei Dank, nicht zwangsläufig dazu. Aber: Zum einen hat es noch nie geschadet, ein wenig über den eigenen Tellerrand hinaus zu schauen und zum anderen reichen eben auch schon einige einfache Basics, um im Fall der Fälle den Fehler zu erkennen und sich selber aus der Patsche zu helfen.

Das folgende Wissen ist für mich immer wieder überaus hilfreich:

Grundlegender Aufbau und Funktionsweise von HTML

Bevor wir uns einzelne Funktionen im Detail ansehen, vorneweg zum besseren Verständnis noch ein kurzes Intro in die allgemeine Funktionsweise und Struktur von HTML:

HTML steht für "Hypertext Markup Language", und genau das ist es: Eine Auszeichnungssprache, mit der man Texte semantisch strukturieren kann.

Mit Hilfe von HTML-Befehlen, sogenannten HTML-Tags, kann man also Texten eine Struktur verleihen. Diese Tags folgen in der Regel einem bestimmten, ziemlich simplen Aufbau:

Jeder codierte Textabschnitt hat einen Start- und einen Schluss-Tag. Gestartet wird mit <>, geschlossen mit </>. Innerhalb der spitzen Klammern steht dann der jeweilige Code, der für die Formatierung des Textabschnittes sorgt.

In der Praxis sieht dann beispielsweise der vorherige Satz so aus:

<p>Jeder codierte Textabschnitt hat einen Start- und einen Schluss-Tag. <strong>Gestartet wird mit &lt;&gt;, geschlossen mit &lt;/&gt;</strong>. Innerhalb der spitzen Klammern steht dann der jeweilige Code, der für die Formatierung des Textabschnittes sorgt.</p>

Gar nicht mal so kompliziert, oder? Nun aber rein in die gängisten Tags – damit Sie das nächste Mal, wenn Ihr Text im Front-End nicht so aussieht, wie er soll, das Problem einfach selber lösen können!

Text-Formatierungen

Eine der gängigsten Arten, in einem Fließtext eine bestimmte Stelle hervorzuheben, ist die Fettschrift. Dafür gibt es mit <b> und <strong> gleich zwei HTML-Tags, die im Front-End nicht voneinander zu unterscheiden sind – weil sie beide schlicht das Gleiche machen: Fetten Text.

Allerdings empfiehlt es sich, im zweifelsfalle <strong> zu benutzen, denn: <b> ist ein physisch-visueller HTML-Tag, das heißt, er hat lediglich Präsentationscharakter – er lässt "normale" Schriftzeichen also fett erscheinen. 

<strong> hingegen ist ein semantisch-logischer Tag, der die markierte Textstelle nicht nur optisch, sondern auch inhaltlich hervorhebt.

Das mag jetzt auf den ersten Blick keinen großen Unterschied machen – "Hauptsache, der Text wird fett!" – aber: Gerüchteweise bevorzugt beispielsweise der Google Crawler den <strong>-Tag. Und was Google mag, das mag auch der Content Manager...

HTML Code für das fette Hervorheben von Textteilen: <b> </b> oder besser: <strong> </strong>

Ein ebenfalls beliebtes Formatierungselement ist die Kursivschrift. Sei es, um ein Zitat zu kennzeichnen, oder um einen Fachbegriff oder Eigennamen hervorzuheben: Italics, wie man sie im Englischen nennt, tauchen in beinahe jedem Text auf. Auch hier gibt es wieder zwei HTML-Tags, die für den Leser gleich aussehen, es aber trotzdem zu unterscheiden gilt:

<i> ist derphysisch-visuelle Tag, <em> der semantisch-logische Tag – die Unterscheidung verläuft analog zu <b> und <strong>!

HTML Tag für kursive Texte: <i> </i> oder auch <em> </em>

Und schließlich gibt es noch die Möglichkeit, Textpassagen oder einzelne Wörter durch Unterstreichung hervorzuheben.

Ich persönlich benutze diese Formatierung so gut wie gar nicht, da ich selbst bei unterstrichenen Wörtern immer automatisch an eine Verlinkung denke und dann enttäuscht bin, wenn doch kein Hyperlink hinterlegt ist.

HTML Tag zum Text unterstreichen: <u> </u>

Textstrukturierung

Ich betone es in meinen Bloggingschulungen immer wieder: Damit Texte online nicht nur geklickt, sondern auch wirklich gelesen werden, brauchen sie unbedingt Struktur. Machen Sie es dem Online-Leser so einfach wie möglich, sich am Text entlang zu hangeln.

Als erstes Mittel zur Strukturierung empfehle ich meist Zwischenüberschriften. Wichtig dabei: Gehen Sie immer hierarchisch vor! Der Titel Ihres Blogposts, also die Überschrift, trägt in der Regel den <h1>-Tag – sie ist also die Headline #1. Zwischenüberschriften zu Kapiteln Ihres Textes sind dann also H2-Überschriften mit dem <h2>-Tag. Und wenn Sie innerhalb eines Kapitels noch weiter gliedern wollen, folgt logischerweise die H3-Überschrift:

HTML Tags für Überschriften: <h1>, <h2>, <h3> und <h4>

Ein weiterer Tipp in Sachen Textstruktur sind Aufzählungen und Listen – weil Sie über die reine Strukturgebung  hinaus auch noch ein hervorragender Weg sind, um jede Menge Fakten komprimiert zu vermitteln.

Ich unterscheide immer ganz bewusst zwischen "Bullet Lists" und Aufzählungen. Wenn es mir nur darum geht, eine Reihe von Fakten anzubringen, ohne dass es dabei auf die Reihenfolge ankommt, dann wähle ich die Listenpunkte:

HTTML Code Bullet List

Wenn die einzelnen Punkte allerdings aufeinander aufbauen, also einer logischen Reihe folgen, dann entscheide ich mich für eine Aufzählung mit Ziffern. Alternativ können Sie natürlich auch mit Buchstaben aufzählen, wichtig ist nur eines: "Wer a sagt, muss auch b sagen..." – es gilt also, auf Kontinuität zu achten!

HTML Code Nummern Liste Aufzaehlung.png

Sei es, um das Ende eines semantischen Abschnitts auch visuell zu kennzeichnen, oder um etwas inhaltlich völlig anderes einzuschieben – eine horizontale Linie als Trenner ist ein weiteres Mittel, um Texte zu strukturieren. Noch dazu eines mit einem denkbar einfachen HTML-Tag, der nur aus vier Zeichen besteht. Denn: Mit einer solchen Trennlinie umklammert man ja nicht einen Teil eines bestehenden Textes, man fügt lediglich ein Strukturelement hinzu. Den schließenden Teil kann man sich also getrost sparen:

HTML Code für eine horizontale Linie: <hr>

Verlinkungen

Seien es interne oder externe Verlinkungen, immer wieder kommt es vor, dass diese nicht wie gewünscht funktionieren. Vielleicht hilft dann ja ein kleiner Blick in den HTML-Code, um den Fehler zu finden:

HTML Code link.jpg


Sie sehen es: HTML folgt einer schönen, stringenten Logik – und zumindest die Basics sind schnell erlernt! Wie gesagt, in 99% der Fälle brauche ich als Content Manager auch das Wissen um die Basics nicht, da mein CMS sich um alles Nötige kümmert. Aber gerade in diesem 1%, wo die Dinge nicht so funktionieren, wie sie sollen, finde ich es überaus praktisch, die Sache selbst in die Hand nehmen zu können.

Und: Inzwischen habe ich Blut geleckt und mag mich mit den Grundlagen nicht mehr zufrieden geben. Ich habe mich deswegen bei Codecademy zu einem kostenlosen HTML- und CSS-Kurs angemeldet – mehr dazu vielleicht bald! Kostenloses Content Planungstool

Veröffentlicht am 27.07.2017 und zuletzt aktualisiert am 07.08.2017

Hat Ihnen der Artikel gefallen?

Dann abonnieren Sie doch unseren Newsletter!