Gunnar Bittersmann: Warum Funktionieren die Befehle nicht?

Beitrag lesen

SELF-Forum

Warum Funktionieren die Befehle nicht?

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

@@Simon

Ich poste hier mal meinen Code

Dass ein Online-Beispiel mehr sagt als 1000 Code-Zeilen, deutete MrMurphy schon an. Aus Gründen.

Ein paar Hinweise zum Markup:

<html lang="de">

Das an der Stelle die Sprache des Seiteninhalts angegeben werden sollte ist richtig; es muss aber auch die richtige Sprache angegeben werden. Bei dir passt das nicht zusammen. Wenn der Seiteninhalt englisch ist: lang="en".

Außerdem sollte <meta name="viewport" content="width=device-width, initial-scale=1.0"> im head nicht fehlen, damit die Seite auf Smartphones vernünftig dargestellt wird.

    <section class="intro">
        <div class="inner">
            <div class="content">

section ist für Unterabschnitte des Inhalts in einem Dokument. Ein solcher liegt hier nicht vor, section ist falsch.

Die ganzen divs brauchst du auch nicht.

                <h1>THIS IS A TITLE</h1>

Auch wenn du die Ausgabe in Großbuchstaben haben willst, sollte im Quelltext die normale Schreibweise verwendet werden: <h1>This is a title</h1>

Ein Screenreader könnte sonst unverständliches „te-ha-i-es i-es a te-i-te-el-e“ ausgeben. (Auf deutsch buchstabiert, da ja Deusch angegeben ist – ein Grund, warum es wichtig ist, die richtige Sprache anzugeben.)

Die Ausgabe in Großbuchstaben erfolgt per CSS: h1 { text-transform: uppercase }.[1]

                <h3>this is a really great subtitle</h3>

Ein Untertitel darf nicht in einem h#-Element stehen. Entweder alles in h1 – in spans eingepackt, damit man’s unterschiedlich stylen kann – oder

<header>
  <h1>This is a title</h1>
  <p>this is a really great subtitle</p>
</header>

                <a class="btn" href="#">LEARN MORE</a>
                <ul class="footer">
                    <li><a href="#">CONTACT</a></li>
                    <li><a href="#">IMPRESSUM</a></li>
                    <li><a href="#">DATASECURITY</a></li>
                </ul>

Für Footer gibt es ein spezielles HTML-Element: footer.

Für den Hauptinhalt auch: main. Darin könnte der Link „Learn more“ untergebracht werden – muss aber hier in dem Fall nicht sein.

Das Markup sollte dann so aussehen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Page One</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <header>
      <h1>This is a title</h1>
      <p>this is a really great subtitle</p>
    </header>
    <p><a class="btn" href="#">Learn more</a></p>
    <footer>
      <ul>
        <li><a href="#">Contact</a></li>
        <li><a href="#" lang="de">Impressum</a></li>
        <li><a href="#">Data security</a></li>
      </ul>
    </footer>
  </body>    
</html>

LLAP 🖖

--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

  1. Dass dabei ß zu SS anstatt zum großen ẞ wird, ist eine kleine Unschönheit. ↩︎

Beitrag melden
–
Informationen zu den Bewertungsregeln