Heim > Artikel > Web-Frontend > Achten Sie unbedingt auf drei häufige falsche Verwendungen von HTML5

Achten Sie unbedingt auf drei häufige falsche Verwendungen von HTML5

php中世界最好的语言Original: 2018-01-29 09:41:431862Durchsuche

Dieses Mal stelle ich Ihnen drei häufige falsche Verwendungen von HTML5 vor, auf die Sie achten müssen. Auf welche Vorsichtsmaßnahmen Sie achten müssen, werfen wir einen Blick darauf. einmal.

Einer der häufigsten Fehler, die Menschen bei der Verwendung von Tags machen, besteht darin, HTML5s 2f8332c8dcfd5c7dec030a070bf652c3 gleichzusetzen – insbesondere, es direkt als Ersatz zu verwenden (für das Styling). In XHTML oder HTML4 sehen wir oft Code wie diesen:

<!-- HTML 4-style code --><div id="wrapper">
    <div id="header">
        <h1>My super duper page</h1>
        Header content  </div>
    <div id="main">
        Page content    </div>
    <div id="secondary">
        Secondary content   </div>
    <div id="footer">
        Footer content  </div></div>

Und jetzt in HTML5 sieht er so aus:

Bitte kopieren Sie diese Codes nicht! Das ist falsch!

<section id="wrapper">
    <header>
        <h1>My super duper page</h1>
        <!-- Header content -->
    </header>
    <section id="main">
        <!-- Page content -->
    </section>
    <section id="secondary">
        <!-- Secondary content -->
    </section>
    <footer>
        <!-- Footer content -->
    </footer></section>

ist falsch zu verwenden: **

ist kein 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 im 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 möglicherweise auch Divs entsprechend Ihrem eigenen Design hinzufügen müssen)

<section id="wrapper">
    <header>
        <h1>My super duper page</h1>
        <!-- Header content -->
    </header>
    <section id="main">
        <!-- Page content -->
    </section>
    <section id="secondary">
        <!-- Secondary content -->
    </section>
    <footer>
        <!-- Footer content -->
    </footer></section>

ist falsch zu verwenden: **

<body><header>
    <h1>My super duper page</h1>
    <!-- Header content --></header><div role="main">
    <!-- Page content --></div><aside role="complementary">
    <!-- Secondary content --></aside><footer>
    <!-- Footer content --></footer></body>

2. Header und hgroup nur bei Bedarf verwenden

Es ist natürlich sinnlos, Tags zu schreiben, die nicht geschrieben werden müssen. Leider sehe ich oft, dass Header und Hgroups sinnlos missbraucht werden. Für ein detailliertes Verständnis können Sie die beiden Artikel über Header- und Hgroup-Elemente lesen. Ich fasse den Inhalt wie folgt kurz zusammen:

Das Header-Element stellt eine Reihe von Einführungs- oder

Navigations-Eigenschaften dar , wird oft als Kopfzeile des Abschnitts verwendet

Wenn die Kopfzeile mehrere Strukturebenen hat, wie Unterüberschriften, Untertitel, verschiedene Logotexte usw., verwenden Sie hgroup, um h1-h6-Elemente als Abschnittsüberschrift zu kombinieren

Missbrauch von Headern

Da Header mehrfach in einem Dokument verwendet werden können, kann dieser Codestil beliebt sein:

请不要复制这段代码！此处并不需要header –>
<header>
    <h1>My best blog post</h1>
</header>
<!-- Article content --></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: Falsche Verwendung von

<article>
    <h1>My best blog post</h1>
    <!-- Article content --></article>

Beim Thema Header sehe ich oft die falsche Verwendung von hgroups. Manchmal sollten hgroups und Header nicht zusammen verwendet werden:

Wenn es nur einen Unterheader gibt

Wenn hgroup selbst einwandfrei funktioniert. . . Ist das nicht Unsinn?

Die erste Frage lautet normalerweise so:

请不要复制这段代码!此处不需要hgroup –>
    <hgroup>
        <h1>My best blog post</h1>
    </hgroup>
    <p>by Rich Clark</p></header>

Entfernen Sie in diesem Beispiel einfach die hgroup und lassen Sie die Überschrift läuft reibungslos.

<header>
    <h1>My best blog post</h1>
    <p>by Rich Clark</p></header>

Die zweite Frage ist ein weiteres unnötiges Beispiel:

请不要复制这段代码!此处不需要header –>
<hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2>
</hgroup></header>

If header Das einzige untergeordnete Element ist hgroup, was macht der Header sonst noch? Wenn der Header keine anderen Elemente enthält (z. B. mehrere hgroups), entfernen Sie den Header einfach direkt.

<hgroup>
    <h1>My company</h1>
    <h2>Established 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 wir es Konstruktion

Die Auswahl semantischer und strukturierter Tags ist ebenfalls etwas nachlässig geworden. Allerdings sollten wir hypersemantische Elemente nicht missbrauchen. Leider ist die Navigation ein Beispiel für einen solchen Missbrauch. Die Spezifikation des Navigationselements wird wie folgt beschrieben: Das Navigationselement stellt einen Block auf der Seite dar, der auf andere Seiten oder andere Teile dieser Seite verweist.

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.

Das Schlüsselwort ist „Hauptnavigation“. Natürlich könnten wir den ganzen Tag damit verbringen, uns gegenseitig zu erklären, was „primär“ bedeutet. Ich persönlich definiere es so:

Hauptnavigation

Site-Suche

Sekundärnavigation (etwas umstritten)

In-Page-Navigation (z. B. Sehr lang Artikel)

Da es kein absolutes Richtig oder Falsch gibt, also basierend auf einer informellen Abstimmung und meiner eigenen Erklärung, werde ich es in den folgenden Situationen, egal ob Sie es loslassen oder nicht, nicht in den Artikel aufnehmen jedenfalls in der Mitte:

PaginierungSteuerung

Soziale Links (obwohl einige soziale Links auch primäre Navigationselemente sind, wie „Über“ und „Favoriten“)

Blog-Beitrags-Tags

Kategorien von Blogbeiträgen

Navigation der dritten Ebene

Zu lange Fußzeile

Wenn Sie nicht sicher sind, ob Sie eine Reihe von Links in die Navigation einfügen sollen, fragen Sie sich: „Ist es die Hauptnavigation?“ Um Ihnen bei der Beantwortung dieser Frage zu helfen, beachten Sie die folgenden ersten Grundsätze:

Wenn die Verwendung von section und hx gleichermaßen angemessen ist, verwenden Sie nicht nav – Hixie im IRC

Fügen Sie für einen einfacheren Zugriff in einem „Schnellsprung“ einen Link zu diesem Navigations-Tag hinzu?

Wenn die Antwort auf diese Fragen „Nein“ lautet, verbeugen Sie sich einfach und gehen Sie alleine los.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website Andere verwandte Artikel!

Verwandte Lektüre:

So gehen Sie beim Einfügen eines Formulars mit einer Leerzeile über und unter dem Formular um

Anleitung Verwenden Sie das Titelattribut von HTML, um dies zu erreichen. Text beim Bewegen der Maus anzeigen

Das obige ist der detaillierte Inhalt vonAchten Sie unbedingt auf drei häufige falsche Verwendungen von HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie man die FileReader-Distribution von H5 zum Lesen von Dateien verwendet und eine Einführung in ihre MethodenNächster Artikel：Wie man die FileReader-Distribution von H5 zum Lesen von Dateien verwendet und eine Einführung in ihre Methoden

In Verbindung stehende Artikel

Mehr sehen