Einer der häufigsten Fehler, die Menschen bei der Verwendung von Tags machen, besteht darin, HTML5s <section> mit <div> gleichzusetzen – insbesondere, es direkt als Ersatz zu verwenden (zu Gestaltungszwecken). In XHTML oder HTML4 sehen wir häufig Code wie diesen:
<!-- HTML 4-Code --><div id=wrapper> <div id=header> <h1>Meine Super-Duper-Seite</h1> Header-Inhalt </div> <div id=main> Seiteninhalt < /div> <div id=secondary> Sekundärer Inhalt </div> <div id=footer> Fußzeileninhalt </div></div>
In HTML5 sieht es jetzt so aus:
Bitte kopieren Sie diesen Code nicht! Das ist falsch!
<section id=wrapper> <header> <h1>Meine Super-Duper-Seite</h1> <!-- Header-Inhalt --> </header> <section id=main> <!-- Seiteninhalt --> </ section> <section id=secondary> <!-- Sekundärer Inhalt --> </section> <footer> <!-- Footer content --> </footer></section>
Diese Verwendung ist falsch:**
Es handelt sich nicht um einen Stilcontainer. Das **section-Element stellt den semantischen Teil des Inhalts dar, der zum Erstellen einer Dokumentzusammenfassung verwendet wird. Es sollte einen Header enthalten. Wenn Sie nach einem Element suchen, das als Seitencontainer fungiert (wie der HTML- oder XHTML-Stil), sollten Sie erwägen, den Stil direkt in das Body-Element zu schreiben, wie Kroc Camen vorschlägt. Wenn Sie noch zusätzliche Stilcontainer benötigen, bleiben Sie bei divs.
Basierend auf den oben genannten Ideen finden Sie im Folgenden Beispiele für die korrekte Verwendung von HTML5 und einigen ARIA-Rollenfunktionen (beachten Sie, dass Sie je nach Ihrem eigenen Design möglicherweise auch Divs hinzufügen müssen).
<body><header> <h1>Meine Super-Duper-Seite</h1> <!-- Header-Inhalt --></header><div role=main> <!-- Seiteninhalt --></div>< aside role=complementary> <!-- Sekundärer Inhalt --></aside><footer> <!-- Fußzeileninhalt --></footer></body>2. Verwenden Sie Header und Hgroups nur bei Bedarf
Es macht natürlich keinen Sinn, Etiketten zu schreiben, die nicht geschrieben werden müssen. Leider sehe ich oft, dass Header und Hgroups zwecklos missbraucht werden. Für ein detailliertes Verständnis können Sie die beiden Artikel über Header- und Hgroup-Elemente lesen. Ich fasse den Inhalt kurz wie folgt zusammen:
Da Kopfzeilen in einem Dokument mehrfach verwendet werden können, macht dies diesen Codierungsstil möglicherweise beliebt:
Bitte kopieren Sie diesen Code nicht! Hier wird kein Header benötigt –>
<header> <h1>Mein bester Blog-Beitrag</h1> </header> <!-- Artikelinhalt --></article>
Wenn Ihr Header-Element nur ein Header-Element enthält, verwerfen Sie das Header-Element. Da das Artikelelement bereits garantiert, dass die Kopfzeile in der Dokumentzusammenfassung erscheint, und die Kopfzeile nicht mehrere Elemente (wie oben definiert) enthalten kann, warum sollte dann zusätzlicher Code geschrieben werden? Schreiben Sie es einfach so:
<article> <h1>Mein bester Blogbeitrag</h1> <!-- Artikelinhalt --></article>
falsche Verwendung von
Beim Thema Header sehe ich auch oft, dass hgroups falsch verwendet werden. Manchmal sollten hgroup und header nicht zusammen verwendet werden:
Die erste Frage sieht normalerweise so aus:
Bitte kopieren Sie diesen Code nicht! Hier wird keine hgroup benötigt –> <hgroup> <h1>Mein bester Blog-Beitrag</h1> </hgroup> <p>von Rich Clark</p></header>
Entfernen Sie in diesem Beispiel einfach die hgroup und lassen Sie die Überschrift weiterlaufen.
<header> <h1>Mein bester Blogbeitrag</h1> <p>von Rich Clark</p></header>
Die zweite Frage ist ein weiteres unnötiges Beispiel:
Bitte kopieren Sie diesen Code nicht!
<hgroup> <h1>Mein Unternehmen</h1> <h2>Gegründet 1893</h2> </hgroup></header>
Wenn das einzige Unterelement des Headers hgroup ist, was macht der Header dann noch? Wenn der Header keine anderen Elemente enthält (z. B. mehrere hgroups), entfernen Sie den Header einfach direkt.
<hgroup> <h1>Mein Unternehmen</h1> <h2>Gegründet 1893</h2></hgroup>3. Fügen Sie nicht alle listenähnlichen Links in die Navigation ein
Mit der Einführung von 30 neuen Elementen in HTML5 (zum Zeitpunkt der ursprünglichen Veröffentlichung) sind unsere Entscheidungen beim Aufbau semantischer und strukturierter Tags etwas nachlässig geworden. Allerdings sollten wir hypersemantische Elemente nicht missbrauchen. Leider ist die Navigation ein Beispiel für einen solchen Missbrauch. Die Spezifikation für das Navigationselement wird wie folgt beschrieben:
Das Navigationselement stellt einen Block auf der Seite dar, der auf andere Seiten oder andere Teile dieser Seite verweist; ein Block, der Navigationsverbindungen enthält.
Hinweis: Nicht alle Links auf der Seite müssen im Navigationselement platziert werden – dieses Element soll als Hauptnavigationsblock verwendet werden. Um ein konkretes Beispiel zu nennen: In der Fußzeile befinden sich häufig viele Links, z. B. zu Nutzungsbedingungen, Homepage, Seite mit Urheberrechtserklärung usw. Das Fußzeilenelement selbst reicht aus, um diese Situationen zu bewältigen. Obwohl das Navigationselement hier auch verwendet werden kann, halten wir es normalerweise für unnötig.
Schlüsselwörter sind die primäre Navigation. Natürlich können wir uns den ganzen Tag gegenseitig über das Wesentliche bespritzen. So definiere ich es persönlich:
Fügen Sie für einen einfacheren Zugriff einen Link zu diesem Navigations-Tag in einem Shortcut-Sprung hinzu?
Wenn die Antwort auf diese Fragen „Nein“ lautet, verbeugen Sie sich einfach und machen Sie sich auf den Weg.
4. Häufige Fehler bei FigurenelementenDie korrekte Verwendung von Abbildungen und Bildunterschriften ist in der Tat schwer zu beherrschen. Werfen wir einen Blick auf einige häufige Fehler:
Nicht alle Bilder sind Figuren
Oben habe ich Ihnen gesagt, dass Sie keinen unnötigen Code schreiben sollen. Das Gleiche gilt für diesen Fehler. Ich habe auf vielen Websites gesehen, dass alle Bilder als Abbildungen gekennzeichnet sind. Bitte fügen Sie aus Gründen des Bildes keine zusätzlichen Tags hinzu. Sie verletzen sich nur selbst und machen Ihre Seite nicht klarer.
Abbildungen werden in der Spezifikation als fließender Inhalt beschrieben, teilweise mit einer eigenen Titelbeschreibung. Im Allgemeinen werden sie als unabhängige Einheiten im Dokumentenfluss referenziert. Das ist das Schöne an der Abbildung: Sie kann von der Hauptinhaltsseite in die Seitenleiste verschoben werden, ohne den Dokumentenfluss zu beeinträchtigen.
Diese Probleme werden auch durch das zuvor erwähnte HTML5-Elementflussdiagramm abgedeckt.
Wenn das Diagramm lediglich der Präsentation dient und an keiner anderen Stelle im Dokument darauf verwiesen wird, ist dies definitiv nicht der Fall
. Der Rest hängt von der Situation ab, aber fragen Sie sich zunächst: Muss dieses Bild für den Kontext relevant sein? Wenn nicht, ist es das wahrscheinlich auch nicht (vielleicht ist es das auch). Weiter geht es: Kann ich das in einen Anhang verschieben? Wenn beide Fragen zutreffen, ist dies wahrscheinlich der Fall.
Logo ist keine Figur
Darüber hinaus gelten Logos auch nicht für Figuren. Hier sind einige häufig verwendete Codeausschnitte:
<!-- Bitte kopieren Sie diesen Code nicht! Das ist falsch--><header> <h1> <figure>  </figure> Mein Firmenname </h1 > </header><!-- Bitte kopieren Sie diesen Code nicht! Das ist auch falsch--><header> <figure>  </figure></header>
Es gibt nichts mehr zu sagen. Dies ist ein sehr häufiger Fehler. Wir können miteinander streiten, bis die Kühe nach Hause gehen, ob das Logo ein H1-Tag sein soll, aber darum geht es hier nicht. Das eigentliche Problem ist die übermäßige Verwendung des Figurenelements. Abbildungen sollten nur innerhalb des Dokuments referenziert oder von Abschnittselementen umgeben werden. Ich halte es für unwahrscheinlich, dass auf Ihr Logo auf diese Weise verwiesen wird. Es ist ganz einfach, verwenden Sie keine Zahl. Sie müssen nur Folgendes tun:
<header> <h1>Mein Firmenname</h1> <!-- Mehr Sachen hier --></header>
Figur ist nicht nur ein Bild
Ein weiteres häufiges Missverständnis über Zahlen ist, dass sie nur für Bilder verwendet werden. Eine Abbildung kann ein Video, ein Audio, ein Diagramm, ein Zitat, eine Tabelle, ein Code, eine Prosa oder eine beliebige Kombination davon oder anderer sein. Beschränken Sie Zahlen nicht auf Bilder. Es ist die Aufgabe von Webstandards, Inhalte mithilfe von Tags genau zu beschreiben.
5. Verwenden Sie keine unnötigen TypattributeDies ist ein häufiges Problem, aber kein Fehler, und ich denke, wir sollten diesen Stil durch Best Practices vermeiden.
In HTML5 benötigen Skript- und Stilelemente nicht mehr das Typattribut. Da diese jedoch wahrscheinlich automatisch von Ihrem CMS hinzugefügt werden, ist es nicht so einfach, sie zu entfernen. Wenn Sie jedoch von Hand programmieren oder die vollständige Kontrolle über Ihre Vorlagen haben, gibt es wirklich keinen Grund, das Typattribut einzubeziehen. Alle Browser denken, dass Skripte Javascript und Stile CSS-Stile sind, sodass Sie dies nicht mehr tun müssen.
<!-- Bitte kopieren Sie diesen Code nicht! --><link type=text/css rel=stylesheet href=css/styles.css /><script type=text/javascript src=js/ scripts /></script>
Eigentlich brauchen Sie nur zu schreiben:
<link rel=stylesheet href=css/styles.css /><script src=js/scripts /></script>
Sogar der Code, der den Zeichensatz angibt, kann weggelassen werden. Mark Pilgrim erklärt es im Semantik-Kapitel von Dive into HTML5.
6. Falsche Verwendung des FormularattributsHTML5 führt einige neue Formularattribute ein. Hier einige Hinweise zur Verwendung:
Boolesche Eigenschaften
Einige Multimedia-Elemente und andere Elemente verfügen auch über boolesche Eigenschaften. Hier gelten die gleichen Regeln.
Einige der neuen Formularattribute sind boolesch, was bedeutet, dass das entsprechende Verhalten garantiert eingestellt ist, solange sie im Etikett erscheinen. Zu diesen Eigenschaften gehören:
Ehrlich gesagt sehe ich das selten. Am Beispiel von „Required“ lauten die häufigsten wie folgt:
<!-- Bitte kopieren Sie diesen Code nicht! --><input type=email name=email required=true /><!-- Ein weiteres Beispiel für einen Fehler --><input type=email name = E-Mail erforderlich=1 />
Streng genommen ist das keine große Sache. Solange der HTML-Parser des Browsers erkennt, dass das erforderliche Attribut in einem Tag erscheint, wird seine Funktionalität angewendet. Was aber, wenn Sie „required=false“ andersherum schreiben?
<!-- Bitte kopieren Sie diesen Code nicht! --><input type=email name=email needed=false />
Der Parser behandelt das erforderliche Attribut weiterhin als gültig und führt das entsprechende Verhalten aus, selbst wenn Sie versuchen, ihm mitzuteilen, dass er es nicht ausführen soll. Das ist offensichtlich nicht das, was Sie wollen.
Es gibt drei gültige Möglichkeiten, boolesche Eigenschaften zu verwenden. (Die beiden letztgenannten sind nur in xthml gültig)
Der richtige Weg, das obige Beispiel zu schreiben, ist:
<Eingabetyp=E-Mail-Name=E-Mail erforderlich />Zusammenfassen
Das Obige stellt Ihnen vor, wie Sie 6 häufige falsche Verwendungen von HTML5 vermeiden können. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!