Was HTML ist: das Fundament jeder Website
HTML steht für Hypertext Markup Language und bildet die Grundstruktur jeder Website. Der Browser liest HTML und erfährt daraus, welche Inhalte eine Seite zeigt: Überschriften, Texte, Bilder und Links.
Ein Vergleich macht es greifbar. HTML ist der Bauplan eines Hauses und legt die Struktur fest: Wände, Räume, Türen. CSS übernimmt die Innenausstattung und bestimmt Farben, Formen und Abstände. JavaScript ergänzt die Technik wie Aufzüge oder automatische Türen und macht die Seite interaktiv.
Diese drei Ebenen arbeiten zusammen, erfüllen aber verschiedene Aufgaben. HTML trägt den Inhalt, CSS das Aussehen, JavaScript die Funktion. Wer das trennt, baut Websites, die sich leichter pflegen und erweitern lassen.
HTML-Tags und Attribute einfach erklärt
HTML besteht aus Tags. Ein Tag umschliesst einen Inhalt und sagt dem Browser, worum es sich handelt. Meist gibt es einen öffnenden und einen schliessenden Tag, dazwischen steht der Inhalt.
Ein Beispiel ist die Hauptüberschrift, im Fachjargon H1 genannt. Sie markiert das wichtigste Thema einer Seite. Google liest diese erste Überschrift und leitet daraus ab, worum es auf der Seite geht. Darum zählt eine klare H1 für die Auffindbarkeit.
Attribute ergänzen einen Tag um zusätzliche Angaben. Sie stehen innerhalb des öffnenden Tags und liefern Details: die Adresse eines Links, den Alternativtext eines Bildes oder die Sprache. Der Tag nennt die Art des Inhalts, das Attribut beschreibt ihn genauer.
<!-- Ein Tag umschliesst Inhalt -->
<h1>Willkommen bei der Muster AG</h1>
<!-- Ein Attribut ergänzt den Tag -->
<img src="team.jpg" alt="Unser Team vor dem Büro">Links in HTML: intern, extern, Mail und Telefon
Links verbinden das Web und gehören zu den wichtigsten HTML-Elementen. Ein Link führt von einer Seite zur nächsten, und HTML kennt dafür mehrere Varianten.
Ein interner Link führt zu einer anderen Seite derselben Website, etwa von der Startseite zum Kontakt. Ein externer Link verweist auf eine fremde Website. Ein Mailto-Link öffnet direkt das E-Mail-Programm mit der richtigen Adresse. Und ein Tel-Link startet auf dem Smartphone einen Anruf mit einem Tipp.
Gerade die letzten beiden erleichtern den Kontakt spürbar. Wer seine Telefonnummer als Tel-Link setzt, spart der Kundschaft das Abtippen und senkt die Hürde für einen Anruf.
<!-- Interner Link zu einer eigenen Seite -->
<a href="/de/kontakt">Kontakt</a>
<!-- Externer Link zu einer fremden Website -->
<a href="https://www.example.ch">Partnerseite</a>
<!-- E-Mail-Link: öffnet das Mailprogramm -->
<a href="mailto:[email protected]">[email protected]</a>
<!-- Telefon-Link: startet einen Anruf -->
<a href="tel:+41441234567">044 123 45 67</a>
Setzt eure E-Mail-Adresse und Telefonnummer als echte Links, nicht nur als Text. Auf dem Smartphone genügt dann ein Tipp für den Anruf oder die Mail. Das klingt klein, entscheidet aber oft über eine Anfrage.
Warum sauberes HTML über Erfolg entscheidet
Sauberes HTML fällt Besuchern nicht auf, wirkt aber im Hintergrund an drei Stellen. Zuerst zeigt der Browser die Seite korrekt an, weil klarer Code weniger Fehler erzeugt. Dann liest Google den HTML-Code und versteht dank sauberer Struktur besser, worum es geht. Und schliesslich brauchen Screenreader für blinde Menschen ein sauberes Grundgerüst, um Inhalte vorzulesen.
Sichtbarkeit und Zugänglichkeit hängen damit am selben Fundament: gut geschriebenem HTML. Wer hier sorgfältig baut, gewinnt an beiden Fronten.
Noël Bossart baut seit über 25 Jahren Websites und kennt diese Grundlagen aus der Praxis. Als Dozent in der Erwachsenenbildung hat er am ZBW in St. Gallen Webthemen unterrichtet. Noevu baut jede Website auf diesem Wissen auf.
Squarespace und individuelle Lösungen
Squarespace ist ein beliebter Baukasten und bringt viele Kundinnen und Kunden schnell online. Das Werkzeug hat seine Stärken, aber auch Grenzen beim Zugriff auf den HTML-Code.
Dank fundiertem HTML-Wissen holt Noevu aus Squarespace-Websites das Beste heraus. Wo der Baukasten Spielraum lässt, verbessert sauberer Code die Struktur und die Auffindbarkeit.
Für höhere Ansprüche baut Noevu vollständig individuelle Lösungen auf professionellen CMS wie Payload, Strapi oder Umbraco. Diese Systeme geben die volle Kontrolle über den HTML-Code und damit über Qualität, Tempo und Barrierefreiheit.
AHV AIHK und VRM: HTML in Hochform
Wie viel sauberes HTML bewirkt, zeigen zwei Projekte von Noevu. Die Websites für die Ausgleichskasse AIHK Aargau und für die VRM Gebäudetechnik laufen auf dem modernen Framework Astro.
Beide erreichen im Google PageSpeed nahezu volle Punktzahl. Ein wichtiger Grund dafür ist optimiertes, sauberes HTML. Weniger überflüssiger Code bedeutet kürzere Ladezeiten und bessere Werte.
Schnelle Seiten überzeugen Besucher und Suchmaschinen gleichermassen. Sauberes HTML zahlt damit direkt auf Erfolg und Sichtbarkeit ein.
Die Astro-Websites für AIHK Aargau und VRM erreichen im Google PageSpeed nahezu 100 von 100 Punkten. Optimiertes HTML ist einer der Gründe: Je schlanker der Code, desto schneller lädt die Seite. Die Fallstudien zeigen die Werte im Detail.
Fazit: HTML verstehen, bessere Entscheide treffen
HTML zu verstehen macht niemanden zur Entwicklerin oder zum Entwickler. Es hilft aber, bessere Entscheidungen für die eigene Website zu treffen und die richtigen Fragen zu stellen.
Sauberes HTML bildet die Grundlage für gutes SEO, Barrierefreiheit und schnelle Ladezeiten – neben anderen Faktoren wie Hosting, Bildoptimierung und Caching.
Bei Unsicherheit über den Zustand der eigenen Website hilft ein nüchterner Blick von aussen. Eine kurze Prüfung zeigt, wo die Seite steht und was sich lohnt.
Unsicher, ob eure Website auf sauberem HTML aufgebaut ist? Ein kurzes Gespräch ordnet den Stand ein und zeigt, wo ihr steht.
Häufig gestellte Fragen
Was ist der Unterschied zwischen HTML, CSS und JavaScript?
HTML liefert die Struktur und den Inhalt einer Website, etwa Überschriften, Texte und Links. CSS bestimmt das Aussehen mit Farben, Schriften und Abständen. JavaScript ergänzt Funktionen und macht die Seite interaktiv. Die drei Ebenen arbeiten zusammen, erfüllen aber verschiedene Aufgaben.
Muss ich als Unternehmerin oder Unternehmer HTML lernen?
Nein, das ist nicht nötig. Ein Grundverständnis hilft aber, bessere Entscheidungen zu treffen und mit der Agentur auf Augenhöhe zu sprechen. Wer die Rolle von sauberem HTML kennt, erkennt schneller, warum Qualität beim Code zählt.
Warum ist sauberes HTML wichtig für SEO?
Google liest den HTML-Code, um den Inhalt einer Seite zu verstehen. Klare Überschriften, sinnvolle Struktur und beschreibende Attribute erleichtern diese Arbeit. Sauberes HTML verbessert damit die Chance auf gute Platzierungen in den Suchergebnissen.
Kann ein Baukasten wie Squarespace sauberes HTML erzeugen?
Baukästen erzeugen ihren Code automatisch, was die Kontrolle über das HTML einschränkt. Für viele Websites reicht das aus. Bei höheren Ansprüchen an SEO oder Barrierefreiheit stösst dieser Ansatz aber an Grenzen. Mit HTML-Wissen lässt sich trotzdem einiges herausholen.
Was ist semantisches HTML?
Semantisches HTML nutzt Tags, die ihre Bedeutung beschreiben, statt nur die Optik. Eine Überschrift wird als Überschrift ausgezeichnet, ein Navigationsbereich als Navigation. Browser, Suchmaschinen und Screenreader verstehen die Seite dadurch besser. Semantik ist die Grundlage für gute Barrierefreiheit.
