HTML

Erklärung Magento SEO

HTML, kurz für “Hypertext Markup Language“, ist eine Auszeichnungssprache, die verwendet wird, um Webseiteninhalte zu strukturieren und für Webbrowser verarbeitbar zu gestalten. Zu diesen Inhalten zählen unter anderem Texte, Bilder, Links und andere multimediale Inhalte.

Inhalts­übersicht

Was ist HTML?

HTML ist die Sprache des Webs und bildet das Grundgerüst jeder Webseite im Internet. Der Webbrowser kann ein HTML-Dokument auslesen und anschließend darstellen. Anders als viele denken, ist die Hypertext Markup Language keine Programmiersprache, sondern eine Auszeichnungssprache.

HTML besteht aus einer Sammlung von Auszeichnungselementen, den sogenannten Tags. Diese Tags sind wie Anweisungen für den Webbrowser und teilen ihm mit, wie die Inhalte dargestellt werden sollen. HTML ist darüber hinaus eine plattformübergreifende Sprache, was bedeutet, dass HTML-Dateien auf jedem Computer mit einem Webbrowser angezeigt werden können, unabhängig vom verwendeten Betriebssystem oder Browser.

Seit der Einführung von der Hypertext Markup Language im Jahr 1989 durch Tim Berners-Lee hat HTML eine enorme Entwicklung erlebt. Ursprünglich als einfache Sprache zur Textformatierung konzipiert, hat sich HTML zu einem komplexen Werkzeug für das Webdesign entwickelt. Mit der Einführung von HTML5 wurden neue Möglichkeiten für Multimedia und Interaktivität geschaffen, was es zu einem unverzichtbaren Werkzeug im modernen Online-Marketing macht.

HTML Tags und Elemente

Ein HTML-Dokument besteht aus Tags und Elementen, die den Inhalt einer Webseite auszeichnen. Tags werden in spitzen Klammern geschrieben, zum Beispiel <p> und geben dem Webbrowser durch ihre individuellen Bedeutungen zu erkennen, wie der Inhalt auszusehen hat. Das <p>-Tag steht für Paragraph, deklariert einen Textabschnitt und fügt einen Absatz darunter ein.

Es gibt immer ein Starttag <p> und ein Endtag </p> Tag. Zwischen diesen beiden Tags steht der Inhalt, der formatiert werden soll. Ein ganzes Element besteht dementsprechend aus einem öffnenden und einem schließenden Tag, die den Bereich definieren, auf den sich das Tag bezieht, zum Beispiel <h1>Überschrift</h1>.

html-element-aufbau_webseite

Neben Tags, die dem Browser zeigen, wie ein Inhalt auszusehen hat, gibt es auch Tags, die interaktive Elemente definieren, wie zum Beispiel der Button Tag <button>. Wichtig zu wissen ist, dass nicht alle Tags immer zwingend geschlossen werden müssen. Bei dem Tag zum Zeilenumbruch <br> kann dieses ohne schließenden Tag verwendet werden. Das Image Tag <img> ist ebenfalls eine Ausnahme und stellt wie das <br> Tag einen inhaltsleeren Tag dar. 

Es ist jedoch wichtig zu beachten, dass das Nicht-Schließen der meisten Tags Auswirkungen auf den gesamten Code haben und zu einer fehlerhaften Darstellung des Inhalts führen kann. Daher ist es ratsam, stets sorgfältig zu überprüfen, ob ein Tag tatsächlich nicht geschlossen werden muss.

Verschachtelung von Tags

HTML erlaubt die Verschachtelung von Tags, was bedeutet, dass Tags innerhalb anderer Tags platziert werden können. Dies ermöglicht komplexe Strukturen und Layouts auf einer Webseite. 

Ein grundlegendes Beispiel ist die Verschachtelung von Text innerhalb eines Absatzes. Ein <p>-Tag kann Text und andere Tags wie <strong> oder <em> enthalten. In diesem Fall bildet das <p>-Tag den äußeren Container, der den gesamten Absatz umschließt, während <strong> als sogenanntes Inline-Tag keinen eigenen Absatz bildet, sondern den Text formatiert. Inline-Tags nehmen nur so viel horizontalen Platz ein, wie sie benötigen und ermöglichen es anderen Inhalten, neben ihnen zu fließen.

				
					<p>Dies ist ein <strong>Absatz</strong></p>
				
			
html-code-verschachtelung

Durch geschickte Verschachtelung können Entwickler das Aussehen und die Anordnung von Inhalten präzise steuern.

Es ist jedoch wichtig, die richtige Reihenfolge und Struktur der Tags einzuhalten, da falsche Verschachtelungen zu Fehlern im Rendering der Webseite führen können. Ähnlich wie bei ineinander gesteckten Schachteln müssen die HTML-Tags geöffnet und wieder geschlossen werden. Der Tag, der zuerst geöffnet wurde, muss als letztes geschlossen werden. Eine korrekte Verschachtelung ist ein wesentlicher Bestandteil der Wahrung der semantischen Struktur einer Webseite, was nicht nur die Darstellung, sondern auch die Barrierefreiheit und die Suchmaschinenoptimierung beeinflusst.

HTML Attribute verwenden

HTML-Tags können Attribute enthalten, die zusätzliche Informationen über das Element bereitstellen. Um die Quelle des Bildes anzugeben, muss das <img>-Tag zum Beispiel das src-Attribut verwenden.

HTML-Attribute werden im öffnenden Tag eines Elements platziert und ihre Werte werden in Anführungszeichen gesetzt. Wenn Attribute falsch geschrieben werden oder der Name eines Attributs nicht existiert, hat dies in der Regel keine unmittelbaren Auswirkungen auf die Darstellung im Browser. Die meisten Browser ignorieren Attribute, die sie nicht erkennen, ohne Fehler anzuzeigen. 

Hier ein Beispiel-Element mit der Verwendung des <img> Tags und des src-Attributes:

<img src=”bild.png” width=”300″ height=”200″ alt=”Noch ein Bild”>

Es gibt vier Hauptkategorien von HTML-Attributen:

Erforderliche Attribute

Einige Attribute sind spezifisch für bestimmte HTML-Tags. Das href Attribut muss zum Beispiel innerhalb des <a>-Tags eingebunden werden, damit die Verlinkung richtig funktioniert. Genauso muss das Attribut src immer im <img>-Tag genutzt werden.

Richtig: <a href=”URL”> </a>

Falsch: <a src=”URL”> </a>

Einige Attribute wie rowspan und colspan kommen nur in Tabellen-Elementen wie <td> und <th> vor.

Optionale Attribute

Ändern die Standardfunktion und können bei mehreren Elementen genutzt werden. Ein Beispiel hierfür ist das “alt-“Attribut bei Bildern. Das Bild wird auch ohne das Attribut angezeigt, aber für ein barrierefreies Web sollte der Inhalt des Bildes in diesem Attribut beschrieben werden.

Globale Attribute

Können von fast allen HTML-Tags wie <div>, <p> oder <button> verwendet werden. Beispiele hierfür sind id, class, oder style.

Ereignis-Attribute (Events)

Diese Attribute erlauben das Registrieren von Ereignissen für ein HTML-Element, wie z. B. onmouseover und können ebenfalls verschiedenen HTML-Tags zugeordnet werden.

Das Grundgerüst von HTML-Dokumenten

Jedes HTML-Dokument sollte mit einem grundlegenden Gerüst beginnen, das aus den <html>, <head> und <body>-Tags besteht. Die sogenannte Dokumenttyp-Deklaration befindet sich stets zu Beginn eines HTML-Dokuments im Format <!DOCTYPE html>. Sie informiert den Webbrowser über den genauen Dokumenttyp, die verwendete Code-Syntax sowie die HTML-Version, die im Dokument verwendet werden.

Das <html>-Tag umschließt den gesamten HTML-Inhalt und zeigt den Start und das Ende vom Inhalt an.

Für den Kopfbereich des Dokumentes wird der <head>-Tag verwendet, welcher Metainformationen, wie den Titel der Seite oder den Autor, umschließt. Der sogenannte Körper des HTML-Dokumentes wird über den <body>-Tag eingeleitet und enthält den sichtbaren Inhalt der Webseite.

Ein Grundgerüst eines HTML-Dokumentes sollte so aussehen:

				
					<!DOCTYPE html>
<html>
    <head>
        <title>Beispielseite</title>
    </head>
    <body>
        <div>
            <h1>Hauptüberschrift</h1>
            <p>Dies ist ein Absatz</p>
        </div>
    </body>
</html>
				
			
HTML-code
Erklärung Magento SEO

Tipp: Wenn du damit beginnst, ein neues HTML-Dokument zu erstellen, empfiehlt es sich, zuerst das Grundgerüst aufzubauen, sodass diese essenziellen Tags bereits von Anfang an ordnungsgemäß geschlossen sind.

Die wichtigsten HTML-Tags

Es gibt sehr viele verschiedene Möglichkeiten, Inhalte per HTML zu strukturieren oder auch direkt das Erscheinungsbild anzupassen. Einige Tags, wie <strong>, vermitteln dem Crawler zusätzliche Bedeutungen, die für die Suchmaschinenoptimierung ausschlaggebend sind und verändern nicht nur das Aussehen.

Aus unserer Sicht sind die folgenden Tags die wichtigsten, um ansprechende Inhalte zu bauen:

Textelemente

<p>

Der Inhalt wird als Absatz dargestellt.

<strong>

Hebt die eingeschlossenen Inhalte hervor und markiert sie für Crawler als wichtig.

<b>

Der Inhalt wird fettgedruckt dargestellt, aber vermittelt keine weiteren Bedeutungen.

<em>

Setzt den Inhalt kursiv und schreibt ihm Wichtigkeit zu.

<i>

Setzt den Inhalt nur kursiv.

<u>

Unterstreicht den Inhalt.

<br>

Ist für einen Zeilenumbruch zuständig.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Mit den Überschriften Tags kann die Relevanz der einzelnen Überschriften deklariert und formatiert werden. Die H1 Überschrift stellt die wichtigste Überschrift im Dokument dar und H6 die Unwichtigste.

Multimediaelemente

<img>

Mit diesem Tag wird ein Bild eingebunden. Dazu wird außerdem die URL des Bildes benötigt, welches über das Attribut src=”URL” aufgerufen wird.

<video>

Wird genutzt, um Videodateien einzubinden. Hierbei werden ebenfalls die URL und das src Attribut benötigt.

<audio>

Bindet eine Audiodatei ein.

Verlinkung mit dem a-Tag

<a>

Einen Hyperlink auf eine andere Seite erzeugt man mit dem a Tag und zwingend mit dem Attribut href=”URL”.

Listen

<ul>

Definiert ungeordnete Listeneinträge (meistens Bulletpoints).

<ol>

Definiert Listeneinträge mit einer bestimmten Reihenfolge (1. 2. 3. 4.).

<li>

Wird für Listeneinträge innerhalb einer ungeordneten oder geordneten Liste genutzt. <li> gibt immer die Zeile an.

				
					<p>Ungeordnete Liste</p>
<ul>
<li>Obst</li>
<li>Gemüse</li>
<li>Süßes</li>
</ul>
				
			
html-liste-ul
				
					<p>Geordnete Liste</p>
<ol>
<li>Obst</li>
<li>Gemüse</li>
<li>Süßes</li>
</ol>
				
			

Tabellen

<table>

Markiert eine Tabelle.

<thead>

Mit diesem Tag werden die Überschriften der Tabellenspalten definiert.

<th>

Markiert eine Kopfzelle

<tr>

Definiert eine Tabellenzeile mit Tabellenzellen.

<td>

Definiert eine Tabellenzelle.

				
					<table>
<thead>
<tr>
<th>Überschrift</th>
<th>Überschrift2</th>
</tr>
</thead>
<tr>
<td>Beispiel Eintrag</td>
<td>zweiter Beispieleintrag</td>
</tr>
</table>
				
			
tabellen-html

Sonstige HTML-Tags

<div>

Wird oft als Container-Element genutzt, um die Inhalte zu strukturieren und CSS einzubinden.

<span>

Das span-Tag wird ebenfalls oft in Kombination mit CSS verwendet und markiert einen allgemeinen Textabschnitt.

<button>

Erzeugt einen Button.

HTML und CSS

HTML allein definiert die Struktur und den Inhalt einer Webseite, während CSS (Cascading Style Sheets) verwendet werden, um das Aussehen und das Layout zu gestalten. Mit CSS kann also der Inhalt vom Aussehen getrennt werden. Das hat den Vorteil, dass das Aussehen global geändert werden kann und auch auf mehreren Seiten anwendbar ist. 

Es gibt verschiedene Möglichkeiten, CSS in HTML zu integrieren:

CSS inline im Tag einbinden

CSS-Styles wie color können direkt in HTML-Tags mit dem style-Attribut eingebettet werden. Der direkte Einbau innerhalb der Tags muss gut überlegt sein, da globale Änderungen nicht möglich sind und jedes Element individuell angepasst werden muss. 

Beispiel: <p style=”padding:30px; color:#ffffff;”></p>

CSS einbinden am Anfang der HTML-Datei

Mit dem <style>-Tag kann CSS im Head-Bereich des HTML-Dokumentes eingebunden werden. Dadurch können im Dokument Tags, Klassen oder IDs benutzt werden, um zu definieren, welche Elemente welchen Style bekommen.

Beispiel:

				
					<head>
		 <style>
    h1 { 
       color: #000000;
    }
    p {
    	text-align: center; 
    }

    </style>
  </head>

				
			

CSS über eine ausgelagerte Datei aufrufen

Um globale Änderungen direkt an mehreren Seiten durchführen zu können, muss der CSS-Code in eine eigene Datei geschrieben werden. Diese wird anschließend auf dem Server hochgeladen und innerhalb des HTML-Dokumentes im Head-Bereich verlinkt.

				
					<head>
    <link rel="stylesheet" href="stylesheet.css">
…

				
			

Bedeutung von HTML für SEO

Die Hypertext Markup Language spielt eine entscheidende Rolle in der Suchmaschinenoptimierung (SEO), da Suchmaschinen den HTML-Code einer Webseite analysieren, um deren Inhalt und Struktur zu verstehen. Bots und Crawler suchen unter anderem gezielt nach Keywords, um die Relevanz der Webseite für die Suchanfrage bestimmen zu können. Gut strukturiertes HTML und relevante Keywords können dazu beitragen, dass eine Webseite in den Suchergebnissen besser platziert wird. Viele der möglichen OnPage-Optimierungen bei der SEO konzentrieren sich dementsprechend auf die Auszeichnungen in HTML.

Diese Tags sind für SEO optimierten HTML-Code wichtig

Title-Tag: Im HTML-Header befindet sich der <title>-Tag, der als Überschrift für Suchmaschinen-Snippets fungiert und eine maßgebliche Rolle beim Ranking innerhalb der SERPS spielt.

Meta Description: Die Meta Description bietet eine kurze und prägnante Zusammenfassung des Webseiten-Inhalts. Sie erscheint sowohl im HTML-Header als auch in den Suchergebnissen und hat somit direkten Einfluss auf das SEO-Ranking.

Überschriften-Tags: Eine klare Überschriftenstruktur hilft dem Crawler, die Inhalte besser zu lesen. Das Hauptkeyword der Seite sollte immer in der H1 Überschrift eingebaut werden.

Alt-Tag: Durch die Verwendung von Alt-Tags <alt> kann der Inhalt von eingebetteten Bildern beschrieben werden. Dies trägt zur Barrierefreiheit bei und verbessert die Sichtbarkeit in der Bildersuche.

Nofollow Attribut im <a>-Tag: Bei Links, die auf externe Seiten gehen, bietet es sich an, das nofollow Attribut einzubauen, um den Crawler zu hindern, dem Link auf die andere Seite zu folgen.

Canonical-Tag: Dieser Tag ist dafür verantwortlich zu signalisieren, dass es mehrere ähnliche Seiten einer Seite gibt und zeigt gleichzeitig, welche die Hauptseite ist.

HTML Weiterentwicklungen

HTML hat im Laufe der Jahre verschiedene Versionen und Weiterentwicklungen erfahren, darunter:

HTML5

Die neueste Version von HTML ist HTML5, die viele neue Funktionen für Multimedia- und interaktive Inhalte bietet.

XHTML

XHTML ist eine Weiterentwicklung von HTML in Richtung XML, die strengere Regeln für die Dokumentsyntax einführt.

DHTML

Steht für “Dynamisches HTML” und bezieht sich auf die Verwendung von JavaScript und CSS, um Webseiten interaktiver zu gestalten.

CHTML

Ist eine HTML-Variante speziell für mobile Endgeräte, die die Inhalte möglichst speichereffizient darstellt

Hypertext Markup Language – Fazit

Insgesamt ist HTML eine grundlegende und unverzichtbare Auszeichnungssprache für die Erstellung von Webseiten und spielt eine zentrale Rolle im Online Marketing und der Suchmaschinenoptimierung. Erstellt werden kann eine HTML-Datei mit jedem Texteditor. Die Dateiendung muss allerdings .html lauten. Wesentlich nutzerfreundlicher sind HTML-Editoren wie Notepad++ oder Visual Studio Code, die den Code zum Beispiel bei Fehlern farblich markieren.

Heutzutage werden HTML-Dateien nur noch selten selbst geschrieben. Content Management Systeme, wie WordPress oder Typo3, liefern die grafische Oberfläche, mit der ganz einfach Webseiten gebaut werden können. Ein Verständnis davon, was HTML ist und wie es eingesetzt wird, ist dennoch wichtig, um zu verstehen, wie Webseiten aufgebaut sind und funktionieren.

Unsere Expertise als Online Marketing Agentur wird durch langjährige Erfahrung und zahlreiche erfolgreiche Projekte gestützt. Diese Erfahrung ermöglicht es uns, die grafische Oberfläche Ihres Systems maßgeschneidert auf Ihre und die Bedürfnisse Ihrer Kunden anzupassen.

Kontaktieren Sie uns für eine individuelle Beratung
Ihr Weg zu einem optimierten Online-Auftritt beginnt hier!
Dieser Artikel wurde verfasst von:
Jana Hildebrand
Jana Hildebrand
Jana Hildebrand
Jana Hildebrand
Inhalts­übersicht