Testseite - HTML 5 lernen
 

Hallo,

unter title - link könnt ihr meine "Testseite" finden.
Lerne gerade das HTML5 - Schreiben.

Ist zwar nicht viel vorhanden, aber einige Fachleute unter uns haben bestimmt bereits einige Ratschläge für mich. Wichtig ist mir vor allem die HTML 5 Struktur & Semantik.

Alle Verbesserungsvorschläge sind willkommen.

Bedanke mich im voraus!

Ein lobenswertes Ziel.

• Das html-Element sollte noch ein dir-Attribut (Wert ltr) erhalten. Beispielsweise arabsiche Besucher, deren Browser auf Rechts-Nach-Links eingestellt ist, sehen die Seite dadurch ebenfalls korrekt dargestellt.
• Für die Angabe der Kodierung reicht (und das ist auch rückwärtskompatibel)
  HTML-Code:

  ---

  <meta charset="utf-8"/>

  ---

  Der abschließende Slash ist nicht erforderlich, (aber auch nicht falsch). Er wäre nur bei Polyglott-Dokumenten erforderlich (gleichzeitig HTML und XML). Der Aufwand dafür ist aber bei den meisten Seiten nicht nötig.
• Nach der Angabe der verwendeten Kodierung sollte das title-Element folgen und darauf das meta-Element description. Anschließend sollte nur ein Stylesheet eingebunden werden (HTTP-Requests sparen).
  • In diesem kannst du dann allgemeine und spezialisierte Regeln (mit @media screen {} usw.) definieren.
  • Du solltest dir auch überlegen, ob ein so ausführlicher Reset überhaupt notwendig ist.
  • Vor allem solltest du :focus {outline: 0;} löschen. Das beinträchtigt die Benutzbarkeit der Seite für sehr viele Benutzer und ist damit tödlich.
  • Um Rückwärtskompatibel zu sein (insbesondere für IE8 und andere ältere Browser) ist es zudem notwendig, die Standardformate für die neuen HTML5-Elemente vorzugeben (ein display: block; ist dafür ausreichend - sofern, ich sehe es gerade - das HTML5 shiv das nicht mit übernimmt).
• Zur Abwärtskompatibilität: Du hast zwar ein HTML5-shiv eingebunden, sei dir aber bewusst, dass nicht alle IE8-Nutzer JavaScript aktiviert haben (z.B. weil das die Vorgabe der IT-Abteilung ist).
  Wenn du IE8 berücksichtigen willst/musst, darf das Design nicht von den neuen HTML5-Elementen abhängig sein (du musst als Übergangslösung zusätzlich div-Elemente verwenden, auch wenn das unschön ist).
• Slogans und ähnliches werden zusammen mit der Überschrift im hgroup-Element zusammengefasst.
• Die Struktur selbst musst du selber überprüfen.
• title-Attribute bei Links sind nicht sehr nützlich, überlege dir ihren Einsatz sehr gut.
• Wenn du den Deppenlink entfernst, benötigst du keine Klasse .active, du kannst dann einfach ein a ohne href-Attriut verwenden und mit a:not([href]) oder einer einfacheren rückwärskompatiblen) Methode die Verweise unterschiedlich gestalten.
• Wenn ich mich richtig erinnere, ist das nav-Element ncht für verweise im footer geeignet, aber das kannst du selber nochmal genauer nachlesen :)
• Vermeide auch, mit Selektoren dein HTML nachzubauen. header li bedeutet das selbe wie header nav ul li (zumindest bei der aktuellen Struktur).

Gerne.

Bedanke mich herzlichst...

Du hast recht, nav darf komischerweise nicht im footer auftauchen!
Einige Dinge muss ich noch anpassen, das Grobe wurde aber angepasst.

Danke nochmals!

Und das steht wo? Die Spezifikation sagt folgendes aus:
Leider hast du es schon geändert, so dass ich nicht nachvollziehen kann, ob ein nav passend wäre oder nicht. Im Übrigen benutzt du section und article genau falsch herum, es sei denn, das ganze wäre ein Artikel mit zwei Unterpunkten, dann kannst du section aber auch ganz weglassen.

Hatte den footer wie folgt aufgebaut:

Okay, der Post in einem Blog war fehlerhaft.
Du hast natürlich recht:
4.4.9 The footer element — HTML5
4.4.4 The nav element — HTML5

Eher veraltet. Die Spec wurde diesbezüglich irgendwann mal geändert.

Unter title gibt es eine neue Version :)))