Du hast eine eigene Website, aber von HTML keine Ahnung?
Durch Auslagerung an einen Webdesigner oder den Einsatz eines CMS mit entsprechenden Funktionen kommt man zu einer eigenen Onlinepräsenz, auch ohne HTML zu beherrschen. Vielleicht gibt es auch Vorbehalte, weil man “einfach nicht programmieren kann” oder bei technischen Dingen etwas unsicher ist. Ich möchte in diesem kleinen Artikel nicht nur zeigen, dass HTML sehr praktisch ist, sondern auch sieben ganz konkrete Grundlagen vermitteln, die die Arbeit mit der eigenen Website erleichtern sollen.

HTML wird nicht programmiert

Ein häufiger Vorbehalt gegen HTML ist die Tatsache, dass man zunächst programmieren lernen müsste. Das stimmt aber nicht. HTML ist keine Programmiersprache, sondern eine Sprache, die zur Auszeichnung von Dokumenten benutzt wird – HTML Dokumenten. Diese Art von Dokumenten sind im Grunde genommen reine Textdateien mit der Endung .html, in denen der Inhalt und die Struktur einer Website zu finden ist. Die Inhalte werden mit der Hilfe von HTML strukturiert und beschrieben.

Ein ganz konkretes Beispiel:
Im HTML wird mit sogenannten “Tags” gearbeitet. Das sind sozusagen Formatierungsbefehle, die dem Browser später erklären, wie er die Inhalte zu verstehen hat. Solche Tags bestehen meistens aus einem Paar, dem öffnenden und dem schließenden Tag. In der Mitte steht dann der eigentliche Inhalt. Die Tags werden mit spitzen Klammern geschrieben. Im nachfolgenden Beispiel wird also ein Überschrifts-Tag erster Ordnung, ein sogenanntes h1-Element eingesetzt, in dessen Mitte (Inhalt) die Überschrift steht.

<h1>Hier steht eine Überschrift</h1>

Diese Zeile ist ein klassischer Fall von HTML im Einsatz. Durch den h1-Tag wird dem Browser zu verstehen gegeben: das hier ist eine Überschrift erster Ordnung. Der Browser kann mit dieser Information arbeiten. Evtl. gibt es sogar passende Styling-Informationen für diese Art von Element, dann werden sie angewandt.

HTML ist also im Grunde genommen gut lesbar, wenn man sich an die Struktur gewöhnt hat. Doch auch ohne komplette HTML-Dokumente aufsetzen zu können, ist es hilfreich einige Tags für die tägliche Arbeit mit Website und/oder Blog zu beherrschen.

Wozu HTML im Alltag nützlich ist

Viele Content Management Systeme unterstützen Editoren, die die Formatierung von Inhalten gut abbilden. Wieso sollte man also im Alltag überhaupt HTML-Code nutzen?

Die Antwort darauf ist ganz einfach: Manchmal ist es einfacher und schneller mit HTML zu arbeiten, manchmal ist es unerlässlich, weil ein Bereich oder eine Formatierungsoption schlicht nicht bereitsteht. Stößt der Editor an seine Funktionsgrenzen, sind bestimmte Elemente nicht aufzufinden oder möchte man Bereiche bearbeiten, die nicht im CMS hinterlegt sind, kommt man um die Arbeit mit HTML in der Regel nicht herum. Insbesondere die Formatierung von Texten ist jedoch sehr gut machbar. Hier also sieben wichtige HTML-Tags für die Arbeit an deinen Website-Inhalten:

7 praktische HTML-Grundlagen für die Text-Formatierung

Eine der häufigsten Aufgaben bei der Verwaltung der eigenen Website ist das Formatieren von Texten. Hierzu gibt es unzählige Funktionen, die HTML bereitstellt. Sieben sehr praktische Tags möchte ich nun vorstellen:

<h1>Überschriften</h1>

<p>Absätze</p>

<ul>
    <li>unsortierte Listen mit Listenpunkten</li>
    <li>unsortierte Listen mit Listenpunkten</li>
</ul>

<strong>Fett geschriebener Text</strong>

<u>Unterstrichener Text</u>

<hr>

Ich möchte die einzelnen Elemente kurz erklären:

h1
Das h1-Element bedeutet, wie bereits erklärt, eine Überschrift erster Ordnung. Es gibt noch weitere Überschrift-Tags, die sich entsprechend wie folgt darstellen: h2, h3, h4, h5, h6

p
Das p-Element steht für einen Absatz (Englisch: Paragraph). Ein Absatz ist, wie man das von Texten kennt, ein Block an Text. Häufig befindet sich zwischen Absätzen ein wenig Platz um sie voneinander zu trennen.

ul und li
Das ul-Element öffnet einen unsortierte Liste. Innerhalb der Liste gibt es mehrere Listenpunkte, die jeweils durch das li-Element ausgezeichnet werden. In diesem Beispiel sieht man gut, dass einzelne HTML-Bereiche andere HTML-Elemente beinhalten können.

strong
Markanter und fett geschriebener Text wird mit dem strong-Tag beschrieben.

u
Unterstrichene Texte werden mit dem u-Tag beschrieben.

hr
Um eine horizontale Linie zu erzeugen, kann das hr-Tag verwendet werden. Eine kleine Besonderheit hierbei: während alle anderen hier vorgestellten Tags immer aus einem öffnenden Tag (<h1>) und einem schließenden Tag (</h1>, also ergänzt um ein /) bestehen, kommt das hr-Element nur mit einem öffnenenden Tag aus.

Neugierig?

Texte mit HTML zu formatieren ist, zumindest bei einfachen Aufgabestellungen, nicht sehr kompliziert und lässt sich gut erschließen. Wenn dich dieser Artikel also neugierig gemacht hat, dann versuch doch dich ein bisschen in HTML einzuarbeiten. Ich biete spezielle hierfür auch einen praktischen Workshop an, in dessen Rahmen wir uns gemeinsam den gesamten Webdesign-Prozess inkl. Grundlagen in HTML & CSS widmen werden und deine eigene Landingpage erarbeiten.

Wenn dir dieser Artikel gefallen hat oder du noch Fragen hast, melde dich gerne bei mir – ich freue mich über Feedback!

close

Newsletter Abonnement

Der Newsletter informiert über neue Inhalte, Kurse, Leistungen, Tipps und ähnliche Inhalte. Mit einem Abonnement bleibst du informiert!