Einführung in semantische Tags in HTML5

Im HTML5-Standard werden mehrere neue Tags hinzugefügt, um die Seitensemantik hinzuzufügen. Zu diesen Tags gehören: Artikel, Abschnitt, Navigation und Seite usw. Im Gegensatz zu den meisten anderen Tags behandelt der Browser sie beim Interpretieren und Rendern dieser Tags nur als gewöhnliche Elemente auf p-Blockebene, ohne zusätzliche Präsentationslogik hinzuzufügen, d. h. diese Tags werden nur zum Hinzufügen von Semantik verwendet. Für Webentwickler besteht die tatsächliche Bedeutung der Verwendung dieser Tags hauptsächlich in zwei Punkten: Suchmaschinenoptimierung und Erhöhung der Benutzerfreundlichkeit der Seite (Barrierefreiheit).

In Bezug auf die Elementklassifizierung werden Artikel, Abschnitt, Navigation und Seite als „Sektionsinhalt“ bezeichnet.

Artikel

Artikelelemente können dazu verwendet werden Seiten darstellen Ein bestimmter unabhängiger Inhalt. Dieser Inhalt kann ein Artikel, ein Beitrag/Kommentar in einem Forum, ein Blog, ein interaktives Steuerelement usw. sein. Artikel-Tags können verschachtelt werden. Dabei muss das untergeordnete Artikelelement in einem logischen Zusammenhang mit dem übergeordneten Artikelelement stehen. Webentwickler können beispielsweise den Text und die Kommentare eines Blogs als übergeordnetes Artikelelement und jeden Kommentar als untergeordnetes Artikelelement verwenden.

Das Hauptelement kann nicht innerhalb des Artikelelements erscheinen – das Hauptelement bedeutet den Hauptinhalt der Seite. Wenn es ein Hauptelement gibt, existiert das Artikelelement als untergeordnetes Element des Hauptelements.

Abschnitt

Abschnittselement bezieht sich auf einen Teil einer Seite oder Webanwendung. Das „Thema“ oder der „Ton“ verschiedener Abschnitte sollte sich voneinander unterscheiden. Dieses „Thema“/dieser „Ton“ wird im Allgemeinen durch die Platzierung des Überschriftenelements (h1-h6) innerhalb des Abschnittselements definiert.

Es ist ein Fehler, section als p zu verwenden – außer dem Inhalt, der auf der Seite angezeigt werden kann, sollten die Unterelemente von section keine andere Rolle übernehmen (Stil, Verhalten, Hilfs-Tags usw.). ).

nav

nav-Element wird hauptsächlich verwendet, um Navigationslinks auf der Seite zu enthalten, daher ist es eine sehr gängige Praxis, ul-Elemente oder ol-Elemente direkt in nav-Elemente einzubinden . Dennoch muss nav keine ul- oder ol-Elemente enthalten. Beispielsweise kann das nav-Element einen Artikelabsatz (p-Tag) enthalten, und der Artikelabsatz enthält einige Links (ein Tag).

Wie das Artikelelement kann das Hauptelement nicht innerhalb des Navigationselements erscheinen.

aside

aside-Element wird im Allgemeinen verwendet, um die Seitenleiste auf der Seite darzustellen, aber dieses Element stellt nur semantisch die „Seitenleiste“ dar. Beim Parsen und Rendern des Tags , wird es nur als gewöhnliches p-Block-Level-Element verarbeitet. Wenn Sie den Sidebar-Effekt wirklich erzielen möchten, müssen Webentwickler ihr eigenes CSS schreiben, um dies zu erreichen.

Die obige Einführung in die semantischen Tags von HTML5 ist der gesamte vom Herausgeber geteilte Inhalt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!