17.09.2019 — Jasmin Dahler. Quelle: Verlag Dashöfer GmbH.
Mit anderen Fachabteilungen so zu kommunizieren, dass alle sich gegenseitig verstehen, ist immer eine Herausforderung. Vor allem dann, wenn viele Fachbegriffe zum Einsatz kommen. Das gilt natürlich auch für das Kommunizieren mit IT-Abteilungen, Webdesign oder SEO-Experten. Hier hilft Ihnen das grundlegende Verständnis von HTML deutlich weiter, denn: HTML ist die Sprache des Internets.
Hypertext Markup Language oder kurz HTML ist die Sprache, die Webseiten strukturiert. Ihr Browser (wir empfehlen Firefox) interpretiert HTML-Dokumente und zeigt dem Nutzer die Inhalte der Seite in einer lesbaren Form. Wenn Sie sich über einen Rechtsklick den Seitenquelltext einer Seite anzeigen lassen, können Sie das entsprechende HTML Dokument, welches hinter einer Seite steckt, sehen. Sie werden sehen, dass sich der eigentliche Text, der sich auf der Webseite befindet, auch im HTML-Dokument wiederfindet. Das ist für Suchmaschinen (und SEO) wichtig, denn ansonsten könnte die Seite bei einer Suchanfrage gar nicht gefunden werden. Deshalb sollten Webseiten auch mit HTML statt mit Flash erstellt werden. Hier kann der Inhalt nicht von Suchmaschinen gelesen werden und auch einige mobile Geräte haben Probleme damit, Flash-Inhalte darzustellen.
HTML ist übrigens keine Programmiersprache, sondern eine textbasierte Auszeichnungssprache. Während HTML zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten verwendet wird, werden mit einer Programmiersprache bestimmte Aufgaben durch eine Abfolge von Befehlen gelöst. Demzufolge wird mit HTML nicht programmiert, sondern einfach nur geschrieben.
Damit eine Seite im Internet genau so aussieht, wie Sie sich das vorher überlegt haben, müssen Sie alle Seiten-Inhalte als HTML-Elemente definieren. Nur so versteht ein Browser, was die HTML-Datei eigentlich von ihm möchte, und schreibt nicht nur Text untereinander. Elemente defnieren Sie mittels HTML-Tags, die durch spitze Klammern umschlossen werden. Es wird zwischen einem Anfang-Tag <> und einem End-Tag unterschieden. In der Regel muss jeder Anfang-Tag geschlossen werden, damit dieser funktioniert. Alles was zwischen dem Anfang-Tag und dem End-Tag steht, ist Teil des definierten Elements.
In HTML bieten die Tags unter anderem folgende Möglichkeiten:
Das Wort Tag stammt übrigens aus dem Englischen und kann mit dem Begriff Kennzeichnung sinnvoll übersetzt werden. Denn wer mit HTML arbeitet, kennzeichnet bestimmte Bereiche anhand ihrer Funktion, damit diese vom Browser z. B. als Bild, Tabelle oder Link erkannt werden. Praktischerweise lassen sich die meisten Tags (<img> für image, <p> für paragraph, <h1> für headline erster Ordnung) auch recht gut übersetzen und können deshalb auch gelesen und verstanden werden, wenn HTML nicht Ihre Muttersprache ist.
Eine HTML-Seite besteht grundsätzlich aus drei großen Blöcken: Dem <html>-Block, dem <head>-Block und dem <body>-Block. Der <html>-Block sagt Ihrer Webseite, dass nun HTML geschrieben wird. Die anderen Blöcke werden in den <html> -Block geschachtelt und stehen in der Hierarchie einer HTML-Seite unter ihm. Im HEAD stecken alle wichtigen Metainformationen über die Seite. Dieser Bereich ist besonders wichtig für die Suchmaschinenoptimierung. Bis auf eine Ausnahme kann der Besucher einer Website die Dinge im Head-Bereich nicht sehen.
Im BODY schließlich steckt der eigentliche Inhalt der Seite mit den sichtbaren Elementen.
Eine ganz einfache Version einer HTML-Seite sähe daher so aus:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Name der Seite</title>
<meta name="description" content="Kurzbeschreibung">
<link href="design.css" rel="stylesheet">
</head>
<body>
</body>
</html>
Die HTML-Tags innerhalb des Bodys können nun bunt gemischt, also verschachtelt werden, solange die geöffneten Tags immer wieder geschlossen werden. Dabei gilt die Regel: Der, der zuerst aufgemacht wurde, muss zuletzt geschlossen werden.
Wie Sie am obigen Beispiel sehen, sind einige Zeilen eingerückt. Den Webbrowsern wäre es egal, wenn sie alle Tags hintereinander wegschreiben würden, aber für einen sauberen Code sollte unbedingt mit Umbrüchen, Leerzeilen und Einrückungen gearbeitet werden. So behalten Sie nicht nur besser den Überblick, sondern auch Vertretungskräfte und Laien erhalten eine schnelle Übersicht über den Aufbau.
Im obigen Beispiel sehen Sie bereits einige Meta-Tags im Head-Bereich. Diese dienen Suchmaschinen zum Katalogisieren und Einordnen von Seiten und wie bereits erwähnt für einige technische Dinge, die für den Seitenaufbau und die Anzeige nötig sind. So gibt der Title-Tag den Seitentitel an und <meta charset=UTF-8“> gibt den verwendeten Zeichensatz an. Dies ist besonders wichtig, damit nationale Sonderzeichen korrekt dargestellt werden. Ansonsten würde es kein ä, ö, ü oder ß geben.
Vor langer Zeit wurde HTML auch für das Design genutzt. Heutzutage gehört die Trennung von Inhalt und Design nicht nur zum guten Ton der HTML-Nutzung, sondern ist sehr wichtig für das ordnungsgemäße Funktionieren von Webseiten. Für Design ist CSS (Cascading Style Sheets) zuständig. Kurz gefasst wird der HTML-Seite lediglich gesagt, dass sie eine CSS-Datei nutzen soll, diese sorgt dann für die schönen Dinge wie Farben, Bilder und andere visuelle Schönheiten.
Wenn Sie also mit Ihrem Webdesigner oder Ihrer Webdesignerin sprechen, dann werden Sie es nicht nur mit HTML-Tags zu tun haben und von Struktur, Containern (Code-Blöcken, die Inhalte beherbergen), Images und ähnlichem hören, sondern auch von CSS und Styles.
Sie müssen nicht alle Tags auswendig lernen, um mit Ihrer Technik reden zu können und zu verstehen, worum es geht. Wichtiger ist, dass Sie wissen, was Tags sind und dass eine HTML-Seite überhaupt so stark strukturiert und markiert werden muss, wie es nun einmal der Fall ist. Wenn man Ihnen zum Beispiel sagt, dass Ihr Plan für eine dreispaltig gestaltete Webseite nur umzusetzen ist, wenn neue Klassen geschrieben werden, die den <div>-Containern erlauben, nebeneinander zu floaten, und Sie außerdem idealerweise Flex-Boxen verwenden sollten, damit die Responsiveness gewährleistet ist – dann brauchen Sie nur die Keywords herauszuhören. Floaten heißt, dass Elemente nebeneinander fließen, anstatt untereinander zu stehen. Responsiveness heißt, dass das Layout Ihrer Webseite sich an die Display-Größe anpasst. Ein <div> ist ein äußerst flexibler Container, der mittels Styles so ziemlich alles tun kann, was Sie möchten, und Flex-Boxen heißen so, weil sie ihre Größe flexibel an verwandten Elementen ausrichten. Klassen wiederum fassen all solche Styles zusammen, damit Ihre Webpräsenz auch überall gleichmäßig aussieht und nicht jede Seite völlig anders.
Das Wissen um die zugrunde liegende Struktur bedeutet übrigens auch, dass Sie wissen: Vieles geschieht erst einmal im Hintergrund. Selbst vermeintlich einfache Darstellungsfälle erfordern genaue Planung und gründliche Umsetzung auf Code-Ebene, bevor Sie etwas sehen können. Doch wenn das gelingt, freut sich auch die Suchmaschine: Sauberer Code mit stringenter Hierarchie (beispielsweise sinnvoll gestaffelte Überschriftenebenen) ist nämlich ganz nebenbei auch noch ein Indiz für die Qualität Ihrer Webseite.
Bild: Pixabay (Pexels, Pexels Lizenz)
