HTML5 -Seitenstruktur -Grundlagen

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="https://www.php.cn/link/729db3e07a09db3a41dc1734e04ce44e"> https://www.php.cn/link/729db3e07a09db3a41dc1734e04ce44e </a>. </p> <p> <strong> HTML5 -Seitenstruktur FAQ (FAQ) </strong> </p> <h3> 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).