HTML5 Strukturelemente kurz erklärt

HTML5 Strukturelemente kurz erklärt

Posted by ariesprodesign in Allgemein, HTML5, Internet, Programmierung, Technik, Webdesign 08 Mai 2014

<!doctype html>
Es ist eine viel einfachere DOCTYPE als die von XHTML und ermöglicht es Ihnen, alle Fähigkeiten von HTML5 zu nutzen ohne auf die schon unter anderen Dokumentbeschreibungsstandards fertiges programmiertes Code verzichten zu müssen.

Die wichtigsten neuen HTML5-Tags haben keine spezielle Bildschirmdarstellung. Alle verhalten sich wie ein <div> oder <span>. Aber damit bekomm das Dokument eine eindeutige Gliederung und wird so zweifellos semantischer.

<header>
Dinge zu tun, wie <div id=’header’> ist ein bisschen dumm, wenn 99% der Web-Projekte einen Header haben. <header> wurde entwickelt, um die Notwendigkeit, divs ohne semantische Bedeutung zu ersetzen.

In einem Header-Element soll normalerweise die Überschrift des Abschnitts stehen (ein h1-h6-Element oder ein hgroup-Element), aber man kann auch das Inhaltsverzeichnis eines Aufschnitts, ein Suchformular, Logos etc. aufnehmen.

<hgroup>
Viele header-Elementen brauchen zum Beispiel ein Titel und ein Untertitel. <hgroup> ermöglicht auch h1, h2 und h3 in der Kopfzeile zu platzieren, ohne die Suchmaschinenoptimierung benachteiligen zu müssen, so können Sie einen anderen h1 auf der Website verwenden.

In der aktuellen HTML können Sie nur einen h1-Element pro Seite verwenden, ansonsten verliert die h1 Priorität für SEO.

<nav>
Mit dem <nav>-Element soll die Navigation ausgezeichnet werden, hier wird in der Regel die Hauptnavigation platziert. Sie können nur ein <nav>>-Element pro Seite verwenden.

<section>
Definiert einen einzelnen Content-Bereich innerhalb der Website. In einem Blog, wäre der Bereich wo alle Beiträge sind. In einem Youtube-video hätte einen Abschnitt für Video, eine für die video-Daten, ein anderes die Kommentare.

<article>
Ein <article>-Element definiert separate Content-Bereiche. In der Startseite eines Blogs, würde jeder Beitrag ein Artikel sein. Das <article>-Elemente repräsentiert eigenständige Seitenkomponenten wie ein Blog-Post oder ein Kommentar.

<aside>
Alle Inhalte, die nicht im Zusammenhang mit dem Hauptzweck der Seite zu tun haben, werden in einem <aside>-Element geschloßen, alle Inhalte, die man als vom Hauptinhalt der Seite getrennt betrachtet, zum Beispiel: Werbung usw.

<footer>
Das <footer>-Element wird in der Spezifikation als Fußzeile definiert

<video>
Zeigt Videos ohne von einem Plugin Gebrauch zu machen. Es ist sehr einfach zu verwenden, aber jeder Browser unterstützt verschiedene Video-Codecs, dies macht es erforderlich, Videos in mindestens zwei Code-Varianten (Theora und H.264) zu Verfügung zu stellen, zum Beispiel:

mehr zum Thema: Vorteile vom HTML5 Video-Element(<video>-Tag). HTML5 <video>-Tag ganz genau erklärt.

<audio>
So wie Video, aber nur für Audio. Sie können mehrere Formate verwenden, vor allem MP3-Format, aber das ist auch Browserabhängig.

<canvas>
Eine Fläche zum Zeichen von Vektorgrafiken und Bitmaps mit JavaScript. Es gibt ein ganzes JavaScript-API für Canvas.

Schlagwörter: , ,

Schreiben Sie einen Kommentar