detaillierte Erl?uterung von html5 semantischen Elementen und Leitfaden zum Geb?udeteitenstruktur

Kernpunkte

• HTML5 führt neue semantische Elemente ein, um die Bedeutung von Dokumentstrukturen wie Header, Abschnitt, Artikel, NAV, beiseite und Fu?zeile zu verbessern. Diese Elemente k?nnen verwendet werden, um die Seite zu teilen und den Zweck des Inhalts zu kl?ren.
Das
• -Header -Element wird nicht nur für Seitentitel verwendet, sondern führt auch jeden Teil des Inhalts ein. Das Abschnittselement repr?sentiert die Subjektgruppierung von Inhalten, normalerweise mit einem Titel. Das Artikelelement stellt eine vollst?ndige und unabh?ngige Komponente im Dokument dar und kann unabh?ngig existieren.
Das
• NAV -Element repr?sentiert eine Reihe von Navigationsverbindungen und sollte für die prim?re Navigation reserviert werden. Das beispielte Element stellt einen Teil der Seite dar, der indirekt mit dem umgebenden Inhalt zusammenh?ngt und vom Inhalt getrennt betrachtet werden kann.
Das
• Fu?zeilenelement repr?sentiert die Fu?zeile des jüngsten Abschnitts des Vorfahren inhaltlich. Normalerweise enth?lt es Urheberrechtsinformationen, verwandte Linklisten, Autoreninformationen und ?hnliche Informationen, von denen Sie normalerweise glauben, dass sie sich am Ende des Inhaltsblocks befinden.

(Das Folgende wird aus dem Buch "HTML5 & CSS3 für die reale Welt, 2. Ausgabe" von Alexis Goldstein, Louis Lazaris und Estelle Weyl ausgehoben. Das Buch ist in Gesch?ften auf der ganzen Welt erh?ltlich und erh?ltlich. Sie k?nnen es auch hier finden Nachdem Sie die Grundlagen der Vorlage abgebaut haben, fügen wir der Seite einige Inhalte hinzu und erstellen Sie deren Struktur.

Nach diesem Buch werden wir speziell die Hinzufügung von CSS3 -Funktionen und anderen HTML5 -Elementen einführen. In diesem Abschnitt und in den folgenden Kapiteln werden wir die Semantik umfassend behandeln. Wenn wir den Begriff "semantisch" verwenden, beziehen wir uns auf die Art und Weise, wie ein bestimmtes HTML -Element die Bedeutung seines Inhalts beschreibt.

Wenn Sie auf den Screenshot des HTML5 -Herald zurückblicken (oder die Website online anzeigen), werden Sie feststellen, dass sie in die folgenden Abschnitte unterteilt ist:

Header -Abschnitt mit Logo und Titel

• Navigationsleiste
• Der Hauptinhalt unterteilt in drei Spalten
Artikel und Anzeigenbl?cke in der Spalte
• Fu?zeile mit Autoren- und Urheberrechtsinformationen
Bevor wir bestimmen, welche Elemente für diese verschiedenen Teile der Seite geeignet sind, sollten wir einige Optionen betrachten. Zun?chst stellen wir Ihnen einige neue semantische HTML5 -Elemente vor, mit denen Sie die Seitenunterteilung teilen und der Dokumentstruktur mehr Bedeutung verleihen k?nnen.

Header -Element

Natürlich werden wir uns zuerst auf das Header -Element konzentrieren. Die Spezifikation beschreibt sie pr?zise als "eine Reihe von Einführungs- oder Navigationshilfen".

Im Gegensatz zu dem, was Sie normalerweise annehmen, k?nnen Sie ein neues Header -Element einfügen, um jeden Teil des Inhalts einzuführen. Es ist nicht auf Seitenheader beschr?nkt (Sie k?nnen normalerweise <div> verwenden, um zu markieren). Wenn wir hier das Wort ?Abschnitt“ verwenden, sind wir nicht auf die im n?chsten Abschnitt beschriebenen Abschnittselemente beschr?nkt. Dies bedeutet, dass jeder Inhaltsblock, der m?glicherweise einen eigenen Header ben?tigt, auch wenn dies bedeutet, dass mehrere solche Bl?cke auf einer Seite enthalten sind. Das Header -Element kann verwendet werden, um Einführungsinhalte oder Navigationshilfen zu enthalten, die für einen einzelnen Teil der Seite spezifisch sind oder sich für die gesamte Seite oder beides bewerben. <p> W?hrend das Header -Element normalerweise oben auf einer Seite oder einem Abschnitt platziert ist, hat seine Definition nichts mit seiner Position zu tun. Ihr Website -Layout erfordert m?glicherweise den Titel des Artikels oder des Blog -Beitrags, um sich links, rechts oder sogar unter dem Inhalt zu befinden. </p> <p> <strong> Abschnitt Element </strong> </p> <p> Das n?chste Element, mit dem Sie vertraut sein sollten, ist das Abschnittselement von HTML5. Die Spezifikation definiert den Abschnitt wie folgt: </p> <blockquote> Das Abschnittselement <p> stellt einen gemeinsamen Teil eines Dokuments oder einer Anwendung dar. In diesem Zusammenhang ist der Abschnitt eine Themengruppierung von Inhalten, normalerweise mit einem Titel. </p> </blockquote> <p> Es wird weiter erkl?rt, dass der Abschnitt nicht nur für Stil- oder Skriptzwecke als allgemeine Container verwendet werden sollte. Wenn Sie den Abschnitt nicht als Allzweck -Container verwenden k?nnen (z. B. um das erforderliche CSS -Layout zu implementieren), was sollten Sie verwenden? Unser altes Freund Div -Element, es bedeutet semantisch nichts. </p> <p> Zurück zur Definition in der Spezifikation sollte der Inhalt des Abschnittselements "thematisch" sein, daher ist es falsch, ihn auf eine gemeinsame Weise zu verwenden, um nicht verwandte Teile zu wickeln. </p> Einige Beispiele für akzeptable Verwendungen des Abschnittselements <p> geh?ren: </p> <ul> <li> Abschnitte der Registerkartenschnittstelle </li> <li> Der Abschnitt der Seite "About"; </li> Verschiedene Abschnitte der Long -Nutzungsbedingungen <li> </li> <li> Jeder Abschnitt einer Online -Nachrichtenwebsite; </li> </ul> <p> Hinweis: Verwenden Sie den Abschnitt richtig <strong> </strong> </p> Jedes Mal, wenn ein neuer semantischer Marker an Webdesigner zur Verfügung gestellt wird, wird die korrekte Verwendung dieser Elemente, die Absicht der Norm usw. diskutiert. M?glicherweise erinnern Sie sich an die vorherige Diskussion über die angemessene Verwendung von DL -Elementen in der HTML -Spezifikation. Wie erwartet ist HTML5 nicht immun gegen dieses Ph?nomen, insbesondere in Bezug auf Abschnittselemente. Sogar Bruce Lawson, eine angesehene HTML5 -Beh?rde, gibt zu, in der Vergangenheit den Abschnitt falsch zu verwenden. Für ein klareres Verst?ndnis lohnt es sich, Bruce 'Artikel zu lesen, der seine Fehler erkl?rt. <p> Kurz gesagt: </p> <ul> <li> Abschnitt ist <em> generisches </em>. Wenn also ein spezifischeres semantisches Element (z. B. Artikel, beiseite oder NAV) stattdessen gilt. </li> <li> Abschnitt <em> hat semantische Bedeutungen; Wenn Sie nicht nur ein paar W?rter verwenden k?nnen, um alles zu beschreiben, was Sie in den Abschnitt einfügen m?chten, m?chten Sie m?glicherweise einen semantisch neutralen Container: eine unauff?llige Div. </em> </li> </ul> Das hei?t, wie Semantik kann es in einigen F?llen interpretiert werden. Wenn Sie das Gefühl haben, dass Sie erkl?ren k?nnen, warum Sie das angegebene Element anstelle eines anderen Elements verwenden, gehen Sie weiter. Wenn jemand Sie wirklich darüber kritisiert, wird die daraus resultierende Diskussion für alle Teilnehmer sowohl interessant als auch vorteilhaft sein und m?glicherweise sogar der breiteren Gemeinschaft helfen, die Norm zu verstehen. <p> </p> Denken Sie auch daran, dass Sie gegebenenfalls die Abschnittselemente in vorhandene Abschnittselemente nisten k?nnen. Für Online -Nachrichtenseiten kann beispielsweise der Abschnitt "World News" weiter in Abschnitte der einzelnen globalen Region unterteilt werden. <p> </p> <p> Artikelelement <strong> </strong> Das Artikelelement </p> ?hnelt dem Abschnittselement, weist jedoch einige signifikante Unterschiede auf. Im Folgenden finden Sie die Definitionen in der Spezifikation: <p> </p> Das Artikel -Element <blockquote> Artikel stellt eine vollst?ndige oder unabh?ngige Komponente eines Dokuments, einer Seite, einer Anwendung oder eines Standorts dar und kann im Prinzip unabh?ngig verteilt oder wiederverwendet werden, beispielsweise in einer gemeinsamen Ver?ffentlichung. <p> </p> </blockquote> Die Schlüsselw?rter in dieser Definition sind <p> unabh?ngige Komponenten <em> und </em> unabh?ngig voneinander verteilt <em>. W?hrend der Abschnitt alles enthalten kann, was nach Thema gruppiert werden kann, muss Artikel ein einzelner Inhalt sein, der unabh?ngig existieren kann. Dieser Unterschied kann schwer zu verstehen sein. Wenn Sie also Fragen haben, probieren Sie einen gemeinsamen Ver?ffentlichungstest aus: Wenn der Inhalt ohne ?nderung auf einer anderen Website neu ver?ffentlicht werden kann oder wenn er über RSS oder Social -Media -Websites wie Twitter oder Facebook Push erfolgen kann Ein Update, dann hat es die Eigenschaften eines Artikels. </em> </p> letztendlich liegt es an Ihnen, zu entscheiden, was einen Artikel ausmacht, aber hier sind einige Vorschl?ge, die den Spezifikationen entsprechen: <p> </p> <ul> Forum Posts <li> </li> Zeitschrift oder Zeitungsartikel <li> </li> Blog -Beitr?ge <li> </li> Kommentare zu Blog -Posts oder Artikeln, die von Benutzern <li> übermittelt wurden </li> </ul> Schlie?lich kann das Artikelelement wie das Abschnittselement in anderen Artikelelementen verschachtelt werden. Sie k?nnen auch Abschnitte in Artikeln nisten und umgekehrt. Es h?ngt alles davon ab, was Sie markieren m?chten. <p> </p> <p> Navigel Element <strong> </strong> </p> Nehmen Sie sicherlich das Navigationselement in fast jedem Projekt. NAV, wie seine Bedeutung bedeutet: eine Reihe von Navigationslinks. W?hrend die h?ufigste Verwendung von NAV eine ungeordnete Liste von Verpackungslinks ist, gibt es andere Optionen. Sie k?nnen beispielsweise das NAV -Element um einen Textabsatz, der den Hauptnavigationslink für den Abschnitt "Seite oder für Seite" enth?lt, umrissen. <p> </p> In beiden F?llen sollte das NAV -Element für die wichtigste Navigation reserviert werden. Daher wird empfohlen, beispielsweise die Verwendung von NAV für kurze Linklisten im Fu?zeilen zu vermeiden. <p> </p> <p> Hinweis: überspringen Sie den Navigations -Link <strong> </strong></p> <p> Ein Designmuster, das Sie m?glicherweise auf vielen Websites implementieren, ist der Link "Navigation überspringen". Der Zweck ist es, den Bildschirmleser -Benutzern die Hauptnavigation der Website schnell zu überspringen, wenn sie sie geh?rt haben. Schlie?lich müssen Sie das gesamte Navigationsmenü einer gro?en Website jedes Mal nicht anh?ren, wenn sie auf eine neue Seite klicken! Das NAV -Element hat das Potenzial, diesen Bedarf zu beseitigen. Die Spezifikation hei?t auf der Seite </p> W?hrend nicht alle Hilfsger?te NAV erkennen, k?nnen Sie nun sicherstellen, dass Ihre Seite im Laufe der Zeit besser zug?nglich wird, wenn sich die Bildschirmleser verbessern. <p> </p> <p> Hinweis: Benutzeragent <strong> </strong> </p> Sie werden h?ufig auf den Begriff "Benutzeragenten" beim Surfenspezifikationen sto?en. Tats?chlich ist es nur ein ausgefallener Begriff für den Browser - der von Benutzern verwendete Software "Agent", um auf den Inhalt der Seite zuzugreifen. Der Grund, warum die Spezifikation nicht einfach "Browser" besagt, ist, dass Benutzeragenten Bildschirmleser oder andere technische Mittel zum Lesen von Webseiten einbeziehen k?nnen. <p> </p> Sie k?nnen NAV mehrmals auf einer bestimmten Seite verwenden. Wenn Sie die Hauptnavigationsleiste für Ihre Website haben, ben?tigen Sie ein Marine -Element. Wenn Sie über eine Reihe von Hilfslinks zu verschiedenen Teilen der aktuellen Seite verfügen (unter Verwendung von Ankern oder "lokalen" Links), kann dies auch in das Navigationselement eingewickelt werden. <p> </p> Wie bei Abschnitt gibt es einige Debatten darüber, was eine akzeptable Verwendung von NAV ausmacht und warum dies in einigen F?llen nicht empfohlen wird (z. B. in der Fu?zeile). Einige Entwickler glauben, dass dieses Element für Paging- oder Breadcrumb -Links oder für Suchformulare geeignet ist, aus denen die Hauptnavigation der Website besteht (wie im Fall bei Google). <p> </p> Diese Entscheidung h?ngt letztendlich von Ihnen, dem Entwickler, ab. Ian Hickson, der Hauptredakteur der HTML5 -Spezifikation von Whatwg, beantwortete die Frage direkt: "Verwenden Sie sie jederzeit, wenn Sie Class = NAV verwendet h?tten. <p> [7] <sup> </sup> </p> <p> Abgesehen von Element <strong> </strong> </p> Dieses Element repr?sentiert einen Teil der Seite, "indirekt mit dem Inhalt des beiseite und kann als getrennt vom Inhalt betrachtet werden". <p> Das Element </p> Abgesehen von Elementen kann verwendet werden, um Inhaltsteile zu wickeln, die indirekt mit: <p> verwandt sind </p> <ul> spezifische unabh?ngige Inhalte (wie Artikel oder Abschnitte). <li> </li> Die gesamte Seite oder Dokument, die normalerweise beim Hinzufügen einer Seitenleiste zu einer Seite oder Website durchgeführt wird. <li> </li> Abgesehen von dem Element wird nie das Seitenteil verwendet, in dem sich der Hauptinhalt befindet. Abgesehen von Inhalten kann unabh?ngig existieren, sollte aber immer noch Teil eines gr??eren Ganzen sein. </ul>Zu den m?glichen Verwendungen von <p> geh?ren Seitenleisten, Hilfsverbindungslisten oder Anzeigenbl?cke. Es sollte auch angemerkt werden, dass das Abschnitt Element (wie der Header) nicht durch seine Position auf der Seite definiert ist. Es kann auf der Seite oder anderswo sein. Definiert seinen Inhalt selbst und seine Beziehung zu anderen Elementen. </p> <p> <strong> Fu?zeile Element </strong> </p> <p> Das letzte Element, das in diesem Kapitel er?rtert wird, ist das Fu?zeilenelement. Wie bei Header k?nnen Sie mehrere Fu?zeile auf einer einzelnen Seite haben und sollten Fu?zeile anstelle von etwas gemeinsamem wie <code><div> verwenden. Nach Angaben repr?sentiert das Fu?zeilenelement die Fu?zeile seines jüngsten Abschnitts des Vorfahren inhaltlich. Der Inhaltsteil kann das gesamte Dokument sein oder ein Abschnitt, ein Artikel oder ein Element beiseite sein. <p> Fu?zeile enth?lt normalerweise Urheberrechtsinformationen, verwandte Linklisten, Autoreninformationen und ?hnliche Informationen, die Sie normalerweise am Ende eines Inhaltsblocks haben. Seite, daher muss es nicht am Ende eines Abschnitts oder am Ende der Seite angezeigt werden. Es ist wahrscheinlich, dass es wird, aber es ist nicht notwendig. Beispielsweise k?nnen Informationen über den Autor eines Blog -Beitrags über dem Artikel statt darunter angezeigt werden und werden weiterhin als Fu?zeileninformationen angesehen. </p> <p> <strong> Hinweis: Wie sind wir zu diesem Punkt gekommen? </strong> </p> <p> Wenn Sie einige Fragen zum Pfad zu HTML5 und zu den Tags haben, mit denen wir enden, m?chten Sie m?glicherweise Luke Stevens 'Buch The Truth über HTML5 ansehen. Lukes Buch ist derzeit in der zweiten Ausgabe ver?ffentlicht und der Inhalt ist etwas umstritten. Zus?tzlich zur Abdeckung vieler HTML5 -Technologien wie Videos und Leinw?nde befasst er sich auch mit der Geschichte von HTML5, erl?utert einige der neuen Elemente der Semantik und Zug?nglichkeit und enth?lt einige Vorschl?ge zur Umgehen mit ihnen. </p> <hr> <p> <sup> [7] </sup> Siehe <a href="http://ipnx.cn/link/729db3e07a09db3a41dc1734e04ce44e"> http://ipnx.cn/link/729db3e07a09db3a41dc1734e04ce44e </a>. </p> <p> <strong> HTML5 -Seitenstruktur FAQ (FAQ) </strong> </p> <h3 id="Was-bedeutet-die-Aussage-in-HTML"> Was bedeutet die Aussage in HTML5? </h3> <p> Die Deklaration ist die erste Zeile des HTML5 -Dokuments. Es ist kein HTML -Tag. In HTML5 wird die Erkl?rung auf <code><!DOCTYPE html> vereinfacht. Dies hilft sicher, dass der Browser die Seite im Standardmodus rendert, was die neuesten HTML -Spezifikationen unterstützt.

Wie funktioniert ein Element in einem HTML5 -Dokument?

Das

Element ist ein Container mit Metadaten (Daten über Daten), das sich zwischen dem -Tag und dem -Tag befindet. Metadaten werden nicht auf der Seite angezeigt, sondern k?nnen von der Maschine analysiert werden. Es definiert normalerweise Dokumenttitel, Zeichens?tze, Stile, Skripte und andere Meta -Informationen. Der Inhalt des -Elements kann Elemente wie <title></title>, <meta>, <link>, <style></style> und <base> enthalten.

Was ist die Funktion des

-Elements in HTML5? Das Element

enth?lt den Hauptinhalt des HTML -Dokuments oder den Teil des HTML -Dokuments, das auf Ihrer Webseite direkt sichtbar ist. Dies kann Text, Bilder, Tabellen, Links, Formulare und andere Datenarten umfassen. Tags folgen normalerweise Tags.

Wie verbessert ein Element die HTML5 -Struktur?

Das

-Element in HTML5 wird verwendet, um Einführungsinhalte oder eine Reihe von Navigationslinks zu enthalten. Es kann einige Titelelemente enthalten und auch andere Elemente wie Logos, Titel zum Wickeln von Teilen, Suchformularen und mehr enthalten. <header></header> Elemente enthalten normalerweise ein oder mehrere Titel -Tags (H1 - H6), Logos oder Symbole sowie Autoreninformationen. <header></header>

Was ist der Zweck des

-Elements in HTML5? <footer></footer>

Das

-Element in HTML5 wird verwendet, um die Fu?zeile eines Dokuments oder Teils zu definieren. In der Regel enth?lt es Informationen zu den Autoren in diesem Abschnitt, Copyright -Informationen, Links zu verwandten Dokumenten usw. Sie k?nnen mehrere <footer></footer> Elemente in ein Dokument aufnehmen. <footer></footer>

Wie verbessern Elemente die HTML5 -Seitenstruktur? <nav></nav>

Das

-Element in HTML5 wird verwendet, um eine Reihe von Navigationsverbindungen zu definieren. Nicht alle Linkgruppen auf der Seite müssen im <nav></nav> -Element enthalten sein, das nur für den Hauptnavigationsverblockungsblock verwendet wird. Ein Browser (z. B. ein Bildschirmleser für einen deaktivierten Benutzer) kann dieses Element verwenden, um festzustellen, ob die anf?ngliche Wiedergabe dieses Inhalts weggelassen werden soll. <nav></nav> Was ist die Funktion des

-Elements in HTML5?

<article></article> Das

-Element in html5 repr?sentiert eine vollst?ndige oder unabh?ngige Komponente eines Dokuments, einer Seite, einer Anwendung oder eines Standorts. Dies kann ein Forum-Post, einen Zeitschriftenartikel oder ein Zeitungsartikel, einen Blog-Beitrag, benutzererabte Kommentare, interaktive Widgets oder Widgets oder ein anderes eigenst?ndiges Inhaltselement sein.

<article></article> Wie f?rdert das Element die HTML5 -Struktur?

Das

-Element in html5 repr?sentiert ein separates funktionales Teil, das in einem HTML -Dokument enthalten ist, normalerweise mit einem Titel und nicht mit einem spezifischeren semantischen Element wie

oder <section></section>. Es handelt sich um eine Themengruppierung von Inhalten, normalerweise mit einem Titel, wodurch die Dokumentstruktur leicht zu verstehen ist. <article></article> Was ist die Funktion des <aside></aside> -Elements in HTML5?

Das <aside></aside> -Element in HTML5 wird verwendet, um einen Teil eines Dokuments darzustellen, dessen Inhalt nur indirekt mit dem Hauptinhalt des Dokuments zusammenh?ngt. Abgesehen wird normalerweise als Seitenleiste oder Etikettenbox dargestellt.

<aside></aside> Wie verbessern Elemente HTML5 -Strukturen?

Das <main></main> -Element in html5 repr?sentiert den Hauptinhalt des Dokuments

. Der Hauptinhaltsbereich besteht aus Inhalten oder zentralen Funktionen der Anwendung, die direkt mit dem zentralen Thema des Dokuments zusammenh?ngt oder das zentrale Thema erweitert. Es sollte dokumentspezifisch sein und enthalten keinen doppelten Inhalt in eine Reihe von Dokumenten (z. B. Site-Navigationslinks, Header- oder Fu?zeileninformationen).