Ihr Logo mit CSS korrekt anzeigen

Jede Website verfügt über ein Logo. Egal, ob es sich um eine Funktion zum Ausfüllen von Seiten oder um ein kleines Gestaltungselement handelt, sie bildet häufig die Haupttitelfunktion Ihrer Seite. In diesem Artikel erfahren Sie, wie Sie ein Logo mit korrektem semantischen Markup und einfachem HTML-Code implementieren. Die gesamte Präsentation erfolgt über CSS.

Dadurch wird sichergestellt, dass Personen, die auf Ihrer Website ohne Bilder surfen, eine anständige Alternative erhalten und Suchmaschinen eine korrekte Darstellung Ihres Seitentitels bieten.

Beginnen wir mit HTML-Code. Es muss so einfach wie möglich sein und nur den Namen Ihrer Website / Ihres Logos in den Header-Tags und einen Link enthalten:

Wenn Sie den HTML-Code nun einmal installiert haben, können Sie ihn einfach mit etwas direktem CSS gestalten.

Dieses CSS führt zwei Hauptaufgaben aus:

  • Sie weist den Browser an, einen bestimmten Bereich für Ihr Logo zu erstellen und einen Hintergrund anzuwenden
  • Verschiebt den eigentlichen Text zur Anzeige außerhalb des Sichtbereichs (9,999 Pixel links)

Wenn jemand Ihre Site mit aktiviertem CSS und Bildern besucht, wird Ihr schönes Logo angezeigt. Wenn nicht, wird das Hintergrundbild nicht angezeigt - der Texteinzug wird jedoch auch nicht angewendet. Dies bedeutet, dass der Überschriftentext normal angezeigt wird. Perfekt!

Dies ist eine einfache, aber effektive Methode, um sicherzustellen, dass Ihr Logo korrekt angezeigt wird, zugänglich bleibt und von Suchmaschinen korrekt abgerufen wird.