This page has been robot translated, sorry for typos if any. Original content here.

HTML5 neue Tags header, footer, nav, beiseite, Abschnitt, Artikel, hgroup

HTML5 новые тэги header, footer, nav, aside, section, article, hgroup

Lassen Sie uns über neue Tags in HTML5 sprechen.

Sehen wir uns zuerst die globalsten Bereiche an : Abschnitt, Artikel, Kopfzeile, Fußzeile, Navigationsleiste, Seitengruppe und H-Gruppe .

HTML5 ist in vielerlei Hinsicht ein semantisch korrekter Standard.

Die einzelnen charakteristischen Teile der Website werden schließlich durch ihre einheitlichen Namen benannt, so dass es in Zukunft keine Verwechslungen mehr geben wird: Kopfzeile - der obere Bereich der Seite, Fußzeile - der untere Teil, nav - die Navigationseinheit usw. Dadurch entfällt die Notwendigkeit, ein neutrales DIV-Tag für diese Teile der Site zu verwenden.

Sie können beispielsweise einen typischen Eintrag haben:

 <div id = "Kopfzeile">
 <h1> <a href="http://www.examplesite.com/"> Die Website selbst </a> </ h1>
 </ div>

neu geschrieben:

 <Kopfzeile>
 <h1> <a href="http://www.examplesite.com/"> Die Website selbst </a> </ h1>
 </ header>

Schreiben Sie im CSS-Stylesheet entsprechend einen Satz von Regeln direkt für das Header-Tag.

Allerdings gibt es ein Zitat in diesem. Fakt ist, dass die meisten Browser noch nicht wissen, dass diese neuen Tags Blockelemente sind und sie als String betrachten, wie zum Beispiel die gleichen <a> Tag-Tags oder <img> Images. Daher müssen Sie im CSS-Stylesheet für solche Tags zwingend ihr Blockzeichen vorschreiben:

 Kopfzeile, Fußzeile, Nav, Artikel {Anzeige: Block;}

Wenn die Header-Semantik ein Header ist, wird die Fußzeile immer klarer, und die verbleibenden Tags sollten genauer betrachtet werden.

nav - dient zum Erstellen der Navigationsleiste. Es kann mehrere auf der Seite dieser Elemente geben. Zum Beispiel ein Links-Block zu den Hauptseiten der Site und ein Navigationsblock für Überschriften.

beiseite - ist das einheitliche Tag, das am besten geeignet ist, um die Seitenleiste hervorzuheben. Es kann sowohl nav-Blöcke als auch andere Elemente enthalten, die im Wesentlichen nicht navigierend sind (Werbebanner, das Foto des Autors und Informationen über ihn, Knöpfe von sozialen Netzen und puzomerki, usw.).

Abschnitt ist auch ein einheitliches Tag. Und es kann in verschiedenen Rollen agieren: Entweder die Seite in mehrere Themenbereiche aufteilen (zB den zentralen Teil mit Inhalt und Sidebar aus Keller und Keller isolieren und damit trennen) oder in einen Abschnitt (Absätze lesen) direkt einen Artikel auf der Seite aufteilen .

Artikel - dient zum Aufteilen der Seite in separate Artikel.

Sowohl die Sektions- als auch die Artikel-Tags haben eine Reihe interessanter Funktionen. Beispielsweise können Sie den Header der ersten Ebene von H1 jetzt auf einer Seite mehrmals sicher verwenden, was zuvor nicht akzeptabel war. Zusätzlich kann das Abschnitts-Tag entweder ein Eltern-Element für einen Artikel sein oder den Artikel-Artikel selbst in mehrere Abschnitte trennen. Ie. Dieses Design ist durchaus möglich:

 <Abschnitt>
 <Artikel>
 <Abschnitt> </ Abschnitt>
 <Abschnitt> </ Abschnitt>
 </ article>
 <Artikel>
 <Abschnitt> </ Abschnitt>
 <Abschnitt> </ Abschnitt>
 </ article>
 </ Abschnitt>

hgroup - Das Tag dient dazu, die Seitenköpfe in einer logischen Einheit zu gruppieren. Zum Beispiel der Haupttitel der gesamten H1-Seite und die Beschreibung dafür, formatiert mit dem H3-Tag. Auf der zukünftigen Seite können H3-Tags mehrmals für andere Zwecke verwendet werden. Um die Beschreibung der Seite logisch von anderen H3-Tags zu trennen, kombinieren wir sie mit dem Haupt-H1-Tag in der Gruppe, was durch das hgroup-Tag angezeigt wird:

 <hgroup>
 <h1> Die Site selbst </ h1>
 <h3> Hier ist die Beschreibung der Seite selbst </ h3>
 </ hgroup>