Steigt man in das Blogger Business ein, so benötigt man einige wenige Kenntnisse im Bereich des HTML. Natürlich gibt es verschiedenste Content Management Systeme, die mit visuellen Editoren arbeiten, quasi so wie man es aus Word und Co. kennt – der Text wird markiert und die Auswahl „fett“, „kursiv“, etc. wird gedrückt – und aus Zauberhand sind die gewünschten Wörter dann auch fett oder kursiv. Aber wäre es an einigen Stellen nicht auch interessant, zu wissen, was sich hinter HTML-Befehlen verbirgt und wie man diese sinnvoll einsetzt oder sogar mehr aus ihnen herausholt? Wir haben uns hierbei einige wichtige Punkte herausgesucht, die für einen optimal geschriebenen Blogpost von Relevanz sein können.

Was ist HTML überhaupt?

Entgegen der weit verbreiteten Meinung, HTML sei eine Programmiersprache, so handelt es sich dabei eigentlich „nur“ um eine Strukturierungssprache. HTML macht nämlich nichts anderes als Inhalte, die man im Browser anzeigen lassen möchte, zu strukturieren. Nicht mehr und nicht weniger. Aber was anderes brauchen wir an dieser Stelle nicht einmal.

 
  
 
 
   Hier kann Text eingesetzt werden, der anschließend über HTML-Tags 
   strukturiert werden kann.
 

„Aber ich dachte, das Design ist vom HTML-Code abhängig?“

Das ist nicht wirklich richtig, aber auch nicht wirklich falsch. Früher hat man versucht, das Design direkt über den HTML-Code zu definieren. Heute gehört das allerdings der Vergangenheit an und man verwendet dafür zusätzlich ein extra Stylesheet (CSS). Auch damit werden wir uns hier ein wenig beschäftigen, sodass du deine HTML-Tags gegebenenfalls deinen Bedürfnissen (oder die deines Blogs) anpassen kannst.

Was sind eigentlich HTML-Tags?

Übersetzen lässt sich das Wort Tag ins Deutsche mit „Befehl“ und das ist eigentlich auch schon alles, was man wissen muss: HTML-Befehle werden genutzt, um einem bestimmten Wort, Abschnitt oder ähnlichem zu sagen „Hey du, erscheine kursiv!“. Und weil dieser Tag etwas befohlen hat, wird dies dann auch im Text umgesetzt. Einen geöffneten Tag muss man im Anschluss immer auch wieder schließen. Der Befehl ummantelt also den Bereich, dem er etwas befiehlt.

mit mir passiert etwas

Hierbei gibt es allerdings auch einige Ausnahmen, wie es zum Beispiel beim Einfügen eines Bildes der Fall ist: Der Befehl bei einem Bild liegt hierbei darin, dass es aus einer bestimmten Quelle eingefügt werden soll. Da es aber keinen konkreten Text oder Abschnitt gibt, den man umformt, bedarf das eingefügte Bild keinen End-Tag.

Fünf Bereiche, für die du HTML-Tags verwenden kannst

Damit dein Blogpost ein optischer Blickfang ist – was durchaus wichtig ist, um Leser davon zu überzeugen, deinen Post zu lesen – solltest du auf jeden Fall auf eine gute Strukturierung deines Textes achten. Dabei kann man verschiedenste HTML-Tags grob in fünf Teilbereiche eingliedern, die wie folgt aussehen:

1. So strukturierst du deinen Text optimal

Absätze

Das kennt man wohl schon aus den Schulzeiten: Die Lehrer haben einen doch schon immer gebeten, bei Aufsätzen Absätze zu verwenden, damit sie dann einen übersichtlichen Text vor sich liegen haben. Viel geändert hat sich dabei nicht. Absätze sind wichtig für das Auge, aber auch für das Verständnis. Auch wir bei Stetic benutzen genau aus diesem Grund Absätze. So verwendest du Absätze in deinem Text:

 
  Ich bin ein Absatz.


 
  Ich bin ein längerer Absatz.

Überschriften

Um diese einzelnen Absätze besser darzustellen, empfiehlt sich die Verwendung von einigen der sechs vorhandenen Headlines. Dadurch kann ein Absatz direkt betitelt werden. Es empfiehlt sich, nicht zu viele verschiedene Headlines zu verwenden, da somit eine gewonnene Struktur auch schnell wieder kaputt gehen kann. Wir bei Stetic verwenden zum Beispiel nur zwei verschiedene. Die verwendeten Tags sehen dabei so aus:

Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
Headline 6

Überschrift 1 ist dabei am größten und Überschrift 6 am kleinsten.

Listen

Möchtest du in deinem Text Aufzählungen verwenden, so hast du die Möglichkeit zwischen geordneten (1.; 2.; 3.; …) und ungeordneten Listen zu wählen. Mit

beginnt man eine

(=geordnete Liste) und verwendet dann für für jedes

(=Listenitem; Listeneintrag) ein

. Dabei darf man natürlich nicht vergessen, die zuvor geöffneten Tags am Ende wieder zu schließen. Auf dieselbe Art und Weise geht man mit

vor. Wie man bei diesen Listen Spielereien betreiben kann, findest du übrigens auf

.

 
Hund
 
Katze
 
Maus

 
Tiger
 
Puma
 
Jaguar

Zitate

Bei Verwendung des Zitat-Befehls wird dein Text eingerückt dargestellt. Dadurch hebt er sich vom normalen Textfluss ab und ist ein guter Eyecatcher.

 Ich bin ein normaler Text.
 

   Ich bin ein Zitat und werde im Gegensatz zum normalen Text eingerückt dargestellt.
 

2. Mit diesen HTML-Tags zeichnest du deinen Text aus

Da es viele verschiedene HTML-Befehle gibt, die bestimmte Auswirkungen auf deinen Text haben können, haben wir hier eine kleine Liste mit den Wichtigsten erstellt. Wie mittlerweile mehrmals erwähnt, umschließen Anfang- und End-Tag immer das Zeichen, die Wörter oder Sätze, die in dem Stil erscheinen sollen.

3. So verlinkst du eigene oder fremde Inhalte

„Geh zuerst auf die Startseite von Stetic, klicke dann oben links auf „Blog“ und suche dann den Blogeintrag mit dem Thema ‚Du oder Sie? Wie du garantiert die richtige Anrede für soziale Netzwerke findest‘.“ – So umständlich muss es doch gar nicht sein, wenn wir in unsere Texte Links einfügen können. Da ein einfach eingefügter Link wie https://www.stetic.com/blog/12-tipps-fuer-mehr-klicks-facebook-twitter.html aber nicht so toll aussieht, nutzen wir einfach den -Tag. So kann man den Link dann direkt auf ein Wort, Satz oder Bild legen. Funktionieren tut das ganze so:

Das ist der verlinkte Text.

Im vorhergehendem Beispiel öffnet sich der Link im selben Fenster. Möchtest du allerdings, dass er sich in einem neuen Tab öffnet, so muss der HTML-Code durch ein target="blank" erweitert werden.

Das ist der verlinkte Text.

Was sich bei Verweisen ebenso als nützlich gestaltet, ist die „Weiterleitung“ auf eine Email-Adresse. Verwendet man also Outlook oder ein anderes Mail-Programm, so öffnet sich bei einem Klick auf die Mail-Adresse direkt ein Fenster zum Schreiben einer Mail. Aussehen muss der HTML-Text dann folgendermaßen:

hello@stetic.com

4. Auch Tabellen lassen sich kinderleicht durch HTML einfügen

Wenn du viele Daten oder Vergleiche in einem Post einbringen möchtest, kannst du dafür Tabellen verwenden. Zunächst einmal leitest du dabei mit 

ein, dass nachfolgend eine Tabelle kommt. Durch

(=table row) wird die erste Tabellenzeile begonnen. Dann kann man entscheiden, ob man

(=table header), also einer Überschrift startet oder einen Datensatz durch

(=table data) einfügt. Eine Tabellenzeile kann so viele Datensätze wie gewünscht enthalten. Möchte man in seiner Tabelle eine Lücke, so verwendet man die Tags ohne Inhalt. Wichtig ist zum Schluss auch hier wieder, alle Tags ordentlich zu schließen.

 
Land
 
Hauptstadt


 
Deutschland
 
Berlin



 
Frankreich
 
Paris

5. Last but not least: Grafiken und Multimedia einbinden

Ein Bild sagt mehr als tausend Worte – und das ist ein guter Grund auch in seinem Blogpost viele Bilder zu benutzen. Dafür wird der -Tag genutzt. Das Mindeste, was man dabei angeben muss, ist die Bild-URL und das sieht dann folgendermaßen aus:

Und weil das Internet so viel mehr bietet als nur Bilder, sondern auch Audio und Video, kann man auch ganz bequem diese Daten einfügen. Einfache Beispiele hierfür sind Soundcloud und Youtube, bei welchen man den vorgegebenen Code einfach kopiert und einfügt.

Und falls du deine Tags noch einmal extra definieren möchtest …

Mit dem bereits zu Beginn erwähntem Stylesheet (CSS) kannst du einzelne Tags noch mal genauer definieren. So kannst du zum Beispiel einstellen, dass ein fetter Text sich in der Textfarbe zum normalen Text unterscheidet. Oder auch, dass du sobald du einen kursiven Text verwendest, dieser im Verhältnis kleiner oder größer dargestellt wird.

Minimalistisch ist wie folgt definiert:

strong {font-weight: bold;}

Möchte man aber zum Beispiel, dass fett abgebildete Textteile immer in blau dargestellt werden, so kann man folgendermaßen vorgehen:

strong {font-weight: bold; 
        color: blue;}

Dabei gibt es noch viele, viele weitere Attribute, die man für seinen Text verwenden kann. An dieser Stelle möchte ich einfach noch einmal auf das SELFHTML und deren CSS-Dokumentation verweisen. Dort kannst du dir alle denkbaren Möglichkeiten anschauen.

Summa summarum:

Es ist wichtig, dass du deine Texte möglichst gut strukturierst. Unübersichtliche Texte werden oftmals nicht gelesen; genauso, wenn diese schlecht lesbar sind oder durch zu viele verschieden genutzte Textstile schon fast in den Augen schmerzen. Natürlich kann es auch sein, dass sich ein kompletter Text „ohne Punkt und Komma“ – oder halt in unserem Fall ohne Zwischenüberschriften und Absätzen – nur mühevoll lesen lässt. Man muss also das richtige Mittelmaß finden und jetzt, da du weißt, wie man HTML-Befehle sinnvoll nutzt, kannst du diese für deine künftigen Blogposts benutzen.