Wie man Semantic Tags zu HTML5 und CSS3 Programmierung verwenden
Als Web-Entwickler begann Layout-Techniken schwimmen, sie fast immer erstellt divs genannt nav
, Kopfzeile, und Fußzeile. Die Entwickler von HTML5 entschieden neue Elemente mit diesen Namen zu erstellen. Werfen Sie einen Blick auf den folgenden Code, um die semantische Tags in Aktion zu sehen.semantisch Das ist mein Kopf
Abschnitt 1
§ Körper ...
Sektion 2
§ Körper ...
Artikel
Artikel Körper ...
Wie Sie sehen können, gibt es eine Reihe von neuen semantischen Markup-Tags in HTML5:
header: Dies ist nicht die gleiche wie die h1-h6 Tags. Es bezeichnet ein Stück auf der Seite, die einen Header für die Seite enthält. Oft wird der Header die Seitenbreite füllen, und wird eine Art von Banner-Bild haben. Es enthält häufig h1 Inhalt.
nav: Dieses Tag gibt eine Art von Navigationsbereich. Es hat keinen besonderen eigenen Stil, aber es wird häufig als entweder eine horizontale oder vertikale Menüs für die Navigation verwendet.
Abschnitt: Ein Teil wird verwendet, um einen generischen Teil der Seite angeben. Sie können mehrere Abschnitte auf der gleichen Seite aufweisen.
Artikel: Ein Artikel ist wie ein Abschnitt, aber es für den Einsatz mit externen Ressourcen bestimmt wird. Viele Seiten werden automatisch von der Software gebaut, und wenn diese Seiten Inhalte aus anderen Quellen zu integrieren, ist es beabsichtigt, die zu verwenden Artikel Tag diesen Inhalt zu integrieren.
Fußzeile: Eine Fußzeile soll am Ende einer Seite Fußzeile Inhalt anzuzeigen. Typischerweise umfasst eine Fußzeile die unten auf der Seite, obwohl dies nicht das Standardverhalten ist.
Man beachte, daß keines dieser Elemente eine bestimmte Formatierung aufweisen. Es ist an Ihnen zu bieten CSS-Code Formatierung durch. Jedes der Elemente kann direkt als HTML-Element formatiert werden (weil das ist, was es ist). Alle aktuellen Browser-Versionen unterstützen die semantischen Markup-Tags, aber wenn Sie ältere Browser unterstützen möchten (vor allem IE vor Version 8), müssen Sie noch divs zu verwenden.