Webdesign Blog
Webdesign im Fokus
Tipps aus der Praxis, für die Praxis
Profitieren Sie von unseren gesammelten Erfahrungen. Machen Sie es gleich richtig.
HTML: Auszeichnungssprache und Basis für das SEO
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.
Inhaltsverzeichnis
- HTML: Auszeichnungssprache und Basis für das SEO
- Was ist HTML und wer hat HTML erfunden?
- Was bedeutet HTML ausgeschrieben?
- Was ist der Unterschied zwischen HTML und einem Quellcode?
- Was sind tags bei HTML? Ein paar Beispiele kurz erklärt...
- Das Grundgerüst einer HTML-Seite
- HTML und der Head: wichtige Details für Darstellung und Funktionalität der Webseite
- Bieten Sie der Suchmaschine Title und description an
- CSS und JavaScript der HTML-Datei hinzufügen
- HTML und der Body: das Sichtbare für den Website-Besucher
- Die Aufgaben des Browsers: das Web lesbar machen
- Inline Styles bei HTML
- Welche Bedeutung hat HTML für das SEO?
- Snippets richtig aufbauen
- Fazit
- Ein pragmatischer Einblick zeigt die Bedeutung vom HTML
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
- h2 ... sind die einzelnen Kapitel des Buches / der Webseite
Aber zurück zu unserer h1-Überschrift: In der HTML-Sprache wird diese Überschrift dann folgendermaßen gekennzeichnet:
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:
ergibt fetten Text und
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
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.
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.
Bieten Sie der Suchmaschine Title und description an
Meta Title und Meta description werden nahezu immer von der Suchmaschine für die Überschrift und den Text bei den Suchergebnissen angezeigt. Das ist das sogenannte Snippet. Falls Sie keinen Meta Title und keine Meat description hinterlegen, sucht sich die Suchmaschine selbst einen Text zusammen. Das ist dann meist der erste Fließtext auf der Startseite, inhaltlich nicht unbedingt ideal für das Snippet.
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.
HTML und der Body: das Sichtbare für den Website-Besucher
Die Aufgaben des Browsers: das Web lesbar machen
Für HTML übernehmen Browser wie Mozilla Firefox oder Google Chrome eine wichtige Aufgabe. Sie konvertieren die Daten, die durch die Internetleitung kommen und aus Computerbefehlen bestehen. Der Browser bewirkt eine lesbare Darstellung auf dem Endgeräte des Nutzers, so wie sie vom Webdesigner vorgesehen ist. Das Interessante daran: Vieles der Gestaltung der heutigen Webseiten orientiert sich an Layouts, die sich im Bereich Print bewährt haben. Der Mensch und seine Lesegewohnheiten stehen trotz hochmoderner Technik bei den Webseiten im Mittelpunkt.
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.
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.
Snippets richtig aufbauen
Drei kurze Hinweise für Meta title und Meta description: Achten Sie bitte auf die maximale Länge. Bei zu langen Texten wird Ihre Formulierung gekappt. Zählen Sie einfach bei ein paar angezeigten Snippets, wieviel Buchstaben inkl. Leerzeichen die Suchmaschine aktuell zulässt. Bauen Sie Keywords in Title und description ein, ohne dass die Keywords aufdringlich wirken. Schaffen Sie mit Ihren Formulierungen keine Erwartungen, die Sie auf Ihrer Website nicht erfüllen.
Ein pragmatischer Einblick zeigt die Bedeutung vom HTML
Vielen Kunden ist die Bedeutung von HTML für das SEO nicht bewusst. Als Webagentur kann man an einem Beispiel zeigen, wie mächtig das Tool HTML in Verbindung mit einer gezielten Suchmaschinenoptimierung ist.
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.
Professionelles Webdesign für den Mittelstand mit TYPO3
Wir beleuchten, welche Möglichkeiten TYPO3 bietet und warum sich TYPO3 als ideales Content Management System für den gehobenen Mittelstand etabliert…
TYPO3 Camp Mitteldeutschland 2024
TYPO3 Camp Mitteldeutschland 2024 in Dresden: Innovation, Vernetzung, Inspiration. Seien Sie dabei! #t3cmd
Planung einer barrierefreien Website
Barrierefreiheit erweitert Ihr Publikum, verbessert die Nutzererfahrung und stärkt Ihre Marke – ideal für Marketing-Experten, die mehr erreichen…
- Erfolg durch Performance und Barrierefreiheit mit TYPO3
- Wie Texter Ihre Website und Suchmaschinenoptimierung verbessern
- ChatGPT im Marketing: Wie die KI Zielgruppen anspricht und Texte optimiert
- Social Media vs. Website: Wie Unternehmer beides effektiv nutzen
- Leitfaden zur umfassenden Website-Optimierung
- Trends Webdesign 2023
- Machen Sie Ihre Webseiten erfolgreicher. Wir geben Tipps für Ihren Erfolg.
- Website, Webseite, Homepage schnell und einfach erklärt
- Das war 2022, so wird 2023
- Fonts und Schriftarten für Webseiten
- Was braucht eine bestehende Website?
- 10 Gründe gegen ein professionelles Webdesign, die eigentlich keine sind
- Website erstellen lassen + dabei geschickt Synergien nutzen
- Cookie Consent Banner korrekt gestalten
- Mythen zur Barrierefreiheit von Webseiten
- Gezielte Benutzerführung auf der Website
- Google Webfonts und die DSGVO Webfonts sicher einbinden
- SEO Selbstcheck: 6 einfache Dinge, die Sie ohne Fachwissen optimieren können
- 12 Merkmale einer vertrauenswürdigen Website
- Permission Marketing mit sendinblue
- Beratung und Bedarfsermittlung
- Ankündigung auf Überprüfung der Barrierefreiheit
- Fragen an Ihre Website - Teil 1 unserer Serie
- So gehen Sie mit Ihrem Geschäftsmodell online
- So gewinnen Sie Mitarbeiter über Ihre Website
- Welche Schriftarten eigenen sich besonders gut für Ihre Website?
- Barrierefreies Webdesign, Chance für alle Websites
- Mit digitaler Barrierefreiheit Mehrwerte schaffen
- Core Web Vitals, entscheidend für das SEO?
- TYPO3 Passwort ändern
- Webseiten komfortabel entwickeln mit Bootstrap
- Google Ads für Vertrieb und Marketing
- Matomo in der Anwendung für Ihr digitales Marketing
- Wann ist es Zeit für eine neue Website?
- Organische Suchergebnisse
- Überzeugen Sie mit Google-Bewertungen
- Vorbereitung für den Relaunch Ihrer Webseite
- Was ist TYPO3 CMS?
- Websites mit Servicevertrag
- Professionell formulierter Inhalt für Ihre Webseite
- "Hilfe, meine Webseite wird nicht fertig!"
- Schöpfen Sie das Potenzial Ihrer Webseiten aus!
- Mythen im Webdesign
- Onepager erstellen lassen
- Landingpage erstellen lassen