Springe zur HauptnavigationSpringe zum HauptinhaltSpringe zu den Kontaktdaten und SupportSpringe zum Footer
Blick auf die Frauenkirche Dresden

Webdesign Blog

Webdesign im Fokus

Tipps aus der Praxis, für die Praxis

Profitieren Sie von unseren gesammelten Erfahrungen. Machen Sie es gleich richtig.

TYPO3 Association Bronze MemberTYPO3 CMS Certified Integrator (TCCI)

HTML: Auszeichnungssprache und Basis für das SEO

Der Klassiker HTML erfüllt immer noch wichtige Aufgaben. Richtig eingesetzt handelt es sich um ein mächtiges Tool.

HTML-Grundgerüst, HTML-Code

HTML: Auszeichnungssprache und Basis für das SEO

Warum HTML-Code für erfolgreiche Webseiten unentbehrlich ist

Der Klassiker HTML erfüllt immer noch wichtige Aufgaben. Richtig eingesetzt handelt es sich um ein mächtiges Tool.

TYPO3 Association Bronze MemberTYPO3 CMS Certified Integrator (TCCI)

Was ist HTML und wer hat HTML erfunden?

Was HTML ist, lässt sich sehr gut damit erklären, wie HTML entstanden ist. Wissenschaftler hatten in den 80er Jahren den Bedarf, sich weltweit untereinander über den Stand Ihrer Forschungen auszutauschen. Hierfür ist ein schnelles Kommunikationsmittel erforderlich, schneller als Briefe und komfortabler als Telefax. Gleichzeitig sollte das, was der Absender geschrieben hat, möglichst unverändert beim Empfänger ankommen. Überschriften und Zwischenüberschriften müssen dafür weiterhin als solche erkennbar sein und sich vom normalen Text abheben. So können die Überschriften weiterhin den Text strukturieren und damit die Übersichtlichkeit bewahren.

Was bedeutet HTML ausgeschrieben?

Das bedeutet Hypertext Markup Language. Übersetzt lautet das sinngemäß: Eine Sprache, um Inhalte zu kennzeichnen. In der Praxis wird HTML angewendet, um Inhalten bei der Gestaltung einer Website ein bestimmtes Merkmal zuzuweisen wie zum Beispiel: das ist eine Überschrift.

Was ist der Unterschied zwischen HTML und einem Quellcode?

Auf den ersten Blick sehen ein HTML-Dokument und ein Quellcode gleich aus. Auch beim Quellcode ist der Text, der gelesen werden soll, von technischen Anweisungen umrahmt. 

Zwischen HTML und einem Quellcode gibt es jedoch einen wesentlichen Unterschied. Die eckigen Klammern bei HTML haben die Bezeichnung "tag". Tag kommt aus dem Englischen und heißt übersetzt "Etikett". Tatsächlich erfüllt dieser tag nichts weiter als die Funktion, zu beschreiben, worum es sich bei dem Inhalt zwischen Anfang und Ende des tags handelt – also beispielsweise um eine Überschrift oder um einen fett gedruckten Text.

Beim Quellcode hingegen handelt es sich um Programmieranweisungen, die für das menschliche Auge lesbar sind. Für den Computer werden sie dann noch manuell oder maschinell in Computersprache übersetzt. Mit einem Quellcode könnte man ein Programm schreiben, das zum Beispiel prüft, ob eine Zahl eine Primzahl ist. Das geht mit HTML nicht.

HTML ist, wenn man es auf eine sehr einfache Formel herunterbrechen will, eine Auszeichnung für den Inhalt und sagt: Jetzt kommt eine Überschrift, dann kommt ein längerer Text, dann kommt ein Absatz und dies hier ist ein Bild.

Was sind tags bei HTML? Ein paar Beispiele kurz erklärt...

Damit die Überschrift für den Empfänger erhalten bleibt, hat man bei HTML folgendes vereinbart: Bei einem Text, der als

Überschrift

Und hier steht dann der normale Text 

für den Empfänger lesbar sein soll, wird die Überschrift als sogenannte h1 gekennzeichnet. Das h kommt vom englischen Headline = Überschrift. h1 gilt als Überschrift erster Ordnung gegenüber Zwischenüberschriften. Zwischenüberschriften bezeichnet man als h2, h3 usw.

Die Ordnung oder auch Hierarchie von Überschriften stellen Sie sich bitte als Inhaltverzeichnis eines Buches vor.

  • h1 ... ist der Titel des Buches / der Webseite und somit die wichtigste "Überschrift".
    • h2 ... sind die einzelnen Kapitel des Buches / der Webseite
      • h3 ... sind die jeweiligen Unterkapitel

Aber zurück zu unserer h1-Überschrift: In der HTML-Sprache wird diese Überschrift dann folgendermaßen gekennzeichnet:

<h1>Überschrift</h1>
Überschrift 1. Ordnung

Das <h1> bedeutet: Achtung, was jetzt folgt, soll als Überschrift dargestellt werden. Das </h1> mit dem Querstrich / bedeutet: die Überschrift ist jetzt zu Ende.

Die HTML-Befehle erlauben weitere Hervorhebungen der Schrift in fett oder in kursiv:

<b>fetten Text</b>
Text fett markieren bzw. hervorheben

ergibt fetten Text und

<i>kursiver Text</i>
Text kursiv stellen

ergibt kursiven Text.

Ein wichtiger Begriff sind die Tags. Die HTML-tags sind die Befehle mit den spitzen Klammern wie <h1>. Diese tags können noch andere Aufgaben erfüllen als Überschriften oder Teile eines Textes besonders hervorzuheben. Tags bieten auch die Möglichkeit, mit <img src=""> ein Bild zu kennzeichnen oder mit <table>Tabelle</table> eine Tabelle.

Wird ein Inhalt mit <p>Inhalt</p> umfasst, entsteht ein Absatz - nach dessen Inhalt typischerweise immer etwas Platz gelassen wird.

Aufzählungen als Listen mit Spiegelstrichen lassen sich ebenfalls darstellen, indem der Inhalt mit <li>Inhalt</li> umfasst wird.

Die HTML-Befehle tauchen jedoch nicht immer als Zwillinge wie <h1> </h1> auf. Für einen Zeilenumbruch reicht ein einziges <br> aus, es gibt nicht wie bei den oben stehenden Beispielen zwei Befehle, die einen Inhalt umschließen. Gleiches gilt bei der Einbindung von Bilder, wie bereits oben beschrieben.
Wichtig war den Erfindern von HTML auch, einen Link beifügen zu können. Wissenschaftler lieben es, Bezug auf Quellen zu nehmen. Das geht folgendermaßen

<a href="https://www.fiz-soft.de/" title="Webagentur aus Dresden">FIZ soft</a>
Hyperlink mit Titel

Dieser Befehl enthält sowohl die Ziel-URL www.fiz-soft.de, den Titel des Links "Webagentur aus Dresden" als auch die gewünschte Bezeichnung des Links welche auf der Webseite angezeigt werden soll, in diesem Fall FIZ soft.

Bei HTML ist es möglich, für einen Inhalt mehrere verschachtelte Befehle zu geben. Vielleicht soll eine Überschrift erscheinen worin das zweite Worte unterstrichen sein soll, danach eine Einleitung worin der erste Satz in fetten Buchstaben und dann der ausführlichere Lesetext in ganz normaler Schrift ausgegeben werden soll. Die zuerst erteilten Befehle werden dabei zuletzt geschlossen, was bei einer Gliederung wie eben beschrieben recht komfortabel ist. Die Befehle wären dann

<h1>Überschrift <u>Einleitung</u></h1>
<p>
  <b>Einleitung in fetten Buchstaben</b>,<br>
  danach, ab der zweiten Zeile soll wieder normale Lesetext folgen.
</p>

Die Buchstaben in den HTML-Befehlen werden bis auf wenige Ausnahmen immer klein geschrieben werden.

Das Grundgerüst einer HTML-Seite

Wie ist nun aber der Aufbau einer HTML-Seite, also wie wird aus einer "weißen Seiten" ein HTML-Dokument?

Zuerst wird mit dem Befehl <!DOCTYPE html> verdeutlicht, um was für eine Art von Dokument es sich handelt - hier: ein Dokument vom Typ HTML.

Der Bereich, in dem HTML gilt, wird zusätzlich gekennzeichnet – ganz in der Art, wie wir es oben bereits gesehen haben: mit Umrahmungen. Der Bereich wird durch ein <html> … </html> eingehegt.

Das HTML-Dokument wird in zwei Bereich geteilt, dem Head / Kopf und Body / Inhaltsbereich.

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>
Als Grundgerüst bezeichnet man ein HTML-Dokument, das nur diese Elemente enthält.

HTML und der Head: wichtige Details für Darstellung und Funktionalität der Webseite

Das <head> HTML Element legt den Kopf des Dokuments fest. In diesem Bereich werden Informationen für das Dokument angegeben, darunter der Dokumententitel und Meta-Daten. Der Head ist für den Website-Besucher nicht direkt sichtbar, aber dennoch von elementarer Bedeutung. Vergleichbar mit einem Motor im Auto.

Der Title der Website wird im Bereich des Heads definiert, auch hier gilt wieder: mit <title> … </title> werden Anfang und Ende des Titles gekennzeichnet.

Im Head werden zudem noch viel mehr Informationen als nur der Title hinterlegt. Meta-Descriptions bezeichnen einen Bereich, der für den Leser ebenfalls nicht direkt sichtbar ist, wohl aber für die Suchmaschine. Metas helfen der Suchmaschine u. a., einzuordnen, um welches Thema es bei der Website geht. Besonders wichtig ist hier die Meta description - einer kurzen aber aussagekräftigen Beschreibung, welcher Inhalt auf dieser Webseite dargestellt wird.

<!DOCTYPE html>
<html>
  <head>
    <title>Titel der Webseite</title>
    <meta name="description" content="HTML-Tags verständlich erklärt + sofort für Ihre Website umsetzbar. Lassen Sie sich von uns die Wirkung eines konsequent eingesetzten HTML in Verbindung mit engagierter Suchmaschinenoptimierung zeigen.">
  </head>
  <body>

  </body>
</html>
Dem Titel und der Description kommen eine besondere Bedeutung zu, diese sollten daher aussagekräftig sein.

Mehr zu diesem Thema finden Sie unter organische Suchergebnisse.

Keyword-tags brauchen Sie übrigens nicht zu befüllen. Das wird von den Suchmaschinen nicht mehr beachtet.

CSS und JavaScript der HTML-Datei hinzufügen

Fast alle Webseiten benutzen für die Formatierung und Darstellung von Inhalten sogenannte Stylesheets oder kurz CSS, um diese gut aussehen zu lassen.

Mit JavaScript können der Webseite zudem interaktive Elemente hinzugefügt werden, wie z. B. ein Video-Spieler, aufklappbare Menüs und vieles mehr. Diese werden der HTML-Datei über ausgelagerte Dateien hinzugefügt. Den Verweis auf solch ausgelagerten Dateien bezeichnet man als Referenzierung.

<!DOCTYPE html>
<html>
  <head>
	<link rel="stylesheet" href="stylesheet-datei.css">
	<script src="javascript-datei.js"></script>    
  </head>
  <body>
    ...
  </body>
</html>
ausgelagerte CSS und JavaScript der HTML-Datei hinzufügen

HTML und der Body: das Sichtbare für den Website-Besucher

Mit einem beginnenden und schließenden body-Befehl wird durch HTML für den Browser der Bereich umrahmt, der für den Besucher der Website sichtbar sein soll.

Das HTML <body> Element repräsentiert den Inhalt eines HTML Dokuments. Es gibt immer nur genau ein <body> Element pro HTML-Seite.

Inline Styles bei HTML

Inline Styles sind ebenfalls innerhalb von HTML möglich. Der Name drückt es bereits aus: Einzelne Elemente innerhalb des gültigen Bereiches von HTML können mit Stylesheet-Eigenschaften formatiert werden.

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <p style="font-weight: bold;">
      Dieser Text wird fett markiert, 
      <span style="color: red;">der zweite Teil zudem in der Farbe rot</span>.
	</p>
  </body>
</html>
Beispiel Inline Style bei HTML

Dieser Text wird fett markiert, der zweite Teil zudem in der Farbe rot.

Welche Bedeutung hat HTML für das SEO?

HTML gehört zum Urgestein des Internets. Wie konnte sich eine Auszeichnungssprache in einem Medium wie dem Internet, das sich schnell weiterentwickelt, so lange halten?

HTML hat eine besondere Bedeutung für Webdesigner und SEO-Nerds. Nahezu alle Metainformationen einer Website, die von der Suchmaschine ausgelesen werden, beziehen sich auf HTML oder stehen damit in Verbindung. Die Wichtigsten hatten wir oben bereits erwähnt: Meta Title und Meta description bilden zusammen das Snippet = die Kurzbeschreibung, die von der Suchmaschine angezeigt wird.

Fazit

Alt, aber nicht veraltet. Obwohl HTML zum Ursprung des Internet zählt, hat es seine Bedeutung für die Erstellung von Webseiten bis heute nicht verloren. Die wichtigen Informationen für die Suchmaschine werden als Metas in HTML-Tags hinterlegt.

Wissenswertes rund um das Thema Webdesign ...

Webdesign im Fokus - wissenswerte Informationen rund um Ihre Homepage. Lesen Sie hier alle wichtigen Informationen zu Webdesign und Suchmaschinenoptimierung.

TYPO3 Camp Mitteldeutschland 2020

TYPO3 Camp Mitteldeutschland 2024

TYPO3 Camp Mitteldeutschland 2024 in Dresden: Innovation, Vernetzung, Inspiration. Seien Sie dabei! #t3cmd

Barrierefreie Website: Ein Leitfaden für mehr Engagement

Planung einer barrierefreien Website

Barrierefreiheit erweitert Ihr Publikum, verbessert die Nutzererfahrung und stärkt Ihre Marke – ideal für Marketing-Experten, die mehr erreichen…

Analyse und Konzeption von Webseiten und Homepages

Erfolg durch Performance und Barrierefreiheit mit TYPO3

Erfahren Sie, wie TYPO3 Caching und Responsive Design die Ladezeiten verbessern, die SEO steigern und die Konversionsraten erhöhen.