Antwort an „Gunnar Bittersmann“ verfassen

Unverständnis von CSS-Eigenschaften; Hintergrund der aktiven Navigationsauswahl ändern

Gunnar Bittersmann E-Mail-Adresse des Autors Homepage des Autors 22.12.2023 08:45 (Versionen)

@@HTML_go

Mal in deinen Kopf geschaut:

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />

Die doppelte Angabe der Zeichencodierung macht keinen Sinn. Weg mit der ersten Angabe! Übrig bleibt:

    <meta charset="utf-8" />

    <title>
      Startseite | Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen
    </title>
    <link href="./standard.css" type="text/css" rel="stylesheet" />

Das sollte weiter oben stehen, gleich hinter der Viewportangabe:

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      Startseite | Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen
    </title>
    <link href="./standard.css" type="text/css" rel="stylesheet" />

Siehe Slide 39 von Harry Roberts’ Talk Get Your <head> Straight (Video + Transkiption).

Mal in deinen Kopf geschaut (mal sollte head und header auseinanderhalten können 😏):

      <a href="./index.html">
        <img
          src="https://kontakt-vs.de/kontakt.png"
          alt="Banner Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen"
        />
      </a>

Gut, dass das Bild einen Alternativtext hat. Nur passt der hier nicht so richtig. Das Bild verlinkt auf die Startseite; der Alternativtext sollte das in diesem Kontext auch sagen.

“Universal law is for lackeys. Context is for kings.” — Lorca in Star Trek: Discovery S1:E3

(Hier in der passenden Schrift. Dasselbe hab ich bei dem Vortrag auch gesagt. Das Video gibt’s wohl noch nicht online. Aber diesen Codepen.)

Wo wir bei Accessibility sind und du nun schon <main id="main"> hast, kannst du auch noch einen Skip-Link einfügen.

Das dort zu tabindex="-1" Gesagte ist schlecht gealtert; AFAIK sollte man das nicht mehr tun.

🖖 Живіть довго і процвітайте

--
Ad astra per aspera