Close
Open Search

Haupt-Reiter

HTML-5-Struktur

16. März 2013 11:18 – Peter Reichard

header
umfasst den Kopfbereich eines Dokuments und kann typischerweise den Titel des Dokuments, Logos, ein Formular zur Schnellsuche oder ein Inhaltsverzeichnis enthalten.

nav
für Hauptnavigationsblöcke gedacht.


article
ist der Ort für die eigentlichen Inhalte der Seite.  Die Verwendung soll so erfolgen, dass article-Blöcke, für sich genommen, alleinstehend sind, also beispielsweise auch unverändert als Inhalt eines Newsfeeds verwendet werden könnten.  article-Blöcke können mit section in mehrere Abschnitte unterteilt werden und sind außerdem schachtelbar.

aside
beheimatet Abschnitte, die nicht unmittelbar mit dem eigentlichen Inhalt zusammenhängen – ein klassischer Fall für Sidebars, aber auch für inhaltliche Einschübe in einem article.

footer
beinhaltet das, was man üblicherweise im Fußbereich eines Dokuments findet: Autor- und Copyright-Informationen oder Querverweise.  footer kann, aber muss nicht notwendigerweise am Ende eines Dokuments stehen.

section
Entsprechend der Spezifikation des <article> Elements steht für eine weitere Untergliederung der textuellen Inhalte innerhalb des <article> Elements das <section> Element zur Verfügung. Die einzelnen Abschnitte eines Artikels lassen sich somit semantisch korrekt strukturieren.

 

Das wäre das Grundgerüst:

 

 

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>HTML5 Layout</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
  </head>
  <body>
  ...
  </body>
</html>

 

Das wäre die Struktur:

<div id="doc">

 

<div id="doc">
  <header id="header">
    <h1>HTML5 Layout</h1>
    <nav>
      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
      </ul>
    </nav>
  </header>
  <section id="content">
    <article>
      <h2>Artikel Überschrift</h2>
      <p>Lorum ipsum...</p>
    </article>
  </section>
  <aside>
    <h2>Sidebar</h2>
    <p>Lorum ipsum...</p>
  </aside>
  <footer>
    <a href="#">Impressum</a>
  </footer>
</div>


Weiterführende Links

http://www.html-seminar.de/html-5-strukturierende-elemente.htm

Bewertung: 
5
Durchschnitt: 5 (3 Stimmen)

Kommentare

mario11 wrote on 26. März 2013 - 8:10

Hi,

die Frage was ist eine HTML5 Struktur würde ich persönlich so beantworten -->

 

header
umfasst den Kopfbereich eines Dokuments und kann typischerweise den Titel des Dokuments, Logos, ein Formular zur Schnellsuche oder ein Inhaltsverzeichnis enthalten.

nav
für Hauptnavigationsblöcke gedacht.


article
ist der Ort für die eigentlichen Inhalte der Seite.  Die Verwendung soll so erfolgen, dass article-Blöcke, für sich genommen, alleinstehend sind, also beispielsweise auch unverändert als Inhalt eines Newsfeeds verwendet werden könnten.  article-Blöcke können mit section in mehrere Abschnitte unterteilt werden und sind außerdem schachtelbar.

aside
beheimatet Abschnitte, die nicht unmittelbar mit dem eigentlichen Inhalt zusammenhängen – ein klassischer Fall für Sidebars, aber auch für inhaltliche Einschübe in einem article.

footer
beinhaltet das, was man üblicherweise im Fußbereich eines Dokuments findet: Autor- und Copyright-Informationen oder Querverweise.  footer kann, aber muss nicht notwendigerweise am Ende eines Dokuments stehen.

 

einfach welche container, was zusagen haben.

kontakt@wstodden.de wrote on 1. April 2013 - 21:04

Die neuen HTML5-Tags <header> und <footer> beziehen sich nicht nur auf das Dokument, sondern auf alle möglichen Inhaltsabschnitte. Auch eine News kann z.B. einen Header und einen Footer haben und wenn man mehrere News auf einer Seite darstellt, wird schnell klar, dass ein HTML5-Dokument mehrere Header und/oder Footer haben kann.
 

guesmo wrote on 2. April 2013 - 16:35

Da hier speziell nach der Struktur von HTML5 gefragt wird:

Ziel von HTML5 ist eine verbesserte semantische Bedeutung der Strukturierung des Quelltextes und der Inhalte einer Website (dem Sinn entsprechend). Dabei soll einzelnen Dokumenten-Abschnitten eine eindeutige Gewichtung zuteil werden.

Als Nutzen dieser Erweiterungen soll HTML5 unterschiedlichsten Browsern, User Agents, Screenreadern, Suchmaschienen, Lesehilfen, etc. die Interpretation des Inhalts eines Dokuments erleichtern.

Durch diese verbesserte "Lesbarkeit" des Quellcodes ist eine gesteigerte User Experience möglich.
 

Abschluss 2013 wrote on 3. April 2013 - 16:31

Nicht zu vergessen sind in HTML5 die neu eingepflegten

 

<dialog> und <figure> Tag´s (wurden oben nicht genannt) welche wesentlich zur Struktur beitragen!

Bild von Michael Cussel
Michael Cussel wrote on 4. April 2013 - 15:44

Zur Strukturierung dienen

article -  in sich geschlossener Inhalt, z.B. Kommenar im Blog oder Artikel einer Zeitschrift
section - Abschnitt bzw. Bereich innerhalb eines Dokuments
nav - Navigationsleisten / -bereiche einer Webseite
header - Kopfbereich eines Abschnitts oder eines Dokuments
footer - Fußbereich eines Abschnitts oder eines Dokuments
aside - Inhalt der den Hauptinhalt der Seite ergänzt, z.B. Begriffserklärung
 

Elemente zur Kennzeichnung von Inhalten

time - Auszeichnung von Zeitangaben wie Datum und Uhrzeit
figure - eingebundene Bilder und Videos erhalten eine Beschriftung mit dem Unterelement legend
<figure><legend>Quellenangabe</legend><img src="xyz.jpg" alt="Foto von..." /></figure>
dialog - Beschreibt eine Unterhaltung, einen Dialog mit den Unterelementen dt und ddmark - Markierung von Textpassagen
hgroup - Gruppiert Überschriften (kann in allen Blockelementen und im body stehen, beinhaltet nur h1 bis h6-Elemente)
menu - ausklappbare Menüleisten
datalist - Listen mit vordefinierten Eingaben (Liste mit Optionen)
 

Einbettung von Medien

audio - Audio-Inhalt
video - Video-Inhalt
embed - zur Einbindung von PlugIns wie Flash oder Java (wie bisher)
canvas - Tag zum einbetten einer grafischen Zeichenfläche
source - Angabe mehrerer Audioformate
<audio controls="true"><source src="titel1.mp3" type="audio/mp3"><source src="titel1.aac" type="audio/mp4"></audio>

www.die-medien-gestalter.de

MGDresden wrote on 6. April 2013 - 15:28

Das Interessante an HTML5 ist z. B. das innerhalb eines jeden article-Elements ein header, nav, footer, ... - Element zur Anwendung kommen kann.

Hopely wrote on 13. April 2013 - 15:11

Mein Klassenlehrer meinte das HTML5 noch nicht wirklich veröffentlicht wurde und man daher nur spekulieren kann. Daher konnte er uns auch nicht wirklich viel zu dem Thema sagen. 

Nun habe ich keine Ahnung was ich weiteres als das gepostete lernen soll, wenn es laut dem Lehrer nicht stimmt.

Peter Reichard wrote on 15. April 2013 - 8:20

Hallo,

ja es ist korrekt, dass HTML 5 noch nicht eingeführt ist, aber seit Jahren gibt es bereits recht ausgereifte Entwürfe, über die in fachartikeln und Büchern bereits geschrieben wurde. Also neu ist das Thema nicht und um auf dem Laufenden zu bleiben muss man manchmal auch etwas vorausschauend sein und aktuelle Entwicklungen nach verfolgen.

Grüße

Peter

Bambino wrote on 16. April 2013 - 10:09

Also ich habe bereits im Online-Bereich mit HTML5-Tags gearbeitet und sie werden von den Browsern auch schon korrekt interpretiert.

Ich wage deshalb zu behaupten, dass HTML5 bereits z. T. veröffentlicht ist, da ja auch nutzbar.

 

Meine Frage: Michael Cussel hat noch jede Menge Tags zur Kennzeichnung von Inhalten und Einbindung von Medien aufgeführt. Meint ihr, dass das in diesem Umfang dran kommen wird? Im Durchschnitt haben wir für jede der U-Aufgaben 10 Minuten Zeit, ein Großteil der Prüflinge kommt nicht aus dem Digitalen Bereich und kann nur am Rande mit HTML und HTML5 etwas anfangen, geschweige denn selbst Dokumente zu schreiben.
Klar, zu wenig lernen ist auch nicht gut, aber man sollte schon ein Hauptlernbereich eingrenzen, oder?

Ink Girl wrote on 12. März 2014 - 20:41

Also in der letzten Prüfung kam auch HTML 5 dran, allerdings Neuerungen. Dort wurden nur die Wörter article, section, nav, header, footer, aside abgefragt ohne Erklärung und Doctype das ist dass, woran ich mich spontan erinnere.

Ich kann mir vorstellen das auch wieder wie von Steffi999 gepostet dieses Gerüst dran kommt.

 

 

Hier mal noch ein Handbuch für HTML 5:

https://www.dropbox.com/sh/jbmkavbwf5d4o1j/WfcHiFzRMc

Bennyville wrote on 20. Februar 2014 - 8:56

Mittlerweile gibt es ein weiteres semantisches Tag. Das <main>-Tag. Es umschließt den Bereich mit dem Haupt-Inhalt.

Anneke Kruse wrote on 12. März 2014 - 11:20

Hallo,

ich hätte eine Frage zu dem Artikel oben.
Also in dem Text steht, dass article-Blöcke mit section unterteilt werden können. Unten in dem Strukturbeispiel wird dann jedoch ein section-Block mit article unterteilt. Wie herum ist es denn richtig?

LG Anneke

admin Thomas Ha... wrote on 14. März 2014 - 9:00

Hallo Anneke,

beides geht und kann sinnvoll sein.

section wird im Sinne von Kapiteln und Abschnitten eines großen Gesamtdokuments genutzt, article im Sinne von Beiträgen sind dann die abgeschlossenen inhaltstragenden Einheiten, die auch z.B. für RSS zur Verfügung stehen können. Es kann nun aber wiederum Sinn machen, diese Beiträge in einzelne sections aufzuteilen, wenn diese im Dokument gleichartig strukturiert sind z.B. immer einen Einleitungsteil, ein abstract (Zusammenfasung) oder Fazit haben.

Viele Grüße

Thomas Hagenhofer

Fontsaenger wrote on 4. November 2015 - 22:31

Hallo Anneke,

im Kompendium wird ein Abschnitt <section> nochmals mittels dem <header>, <article> & <footer> Tag unterteilt;)

<section>
     <header>
          <h1>...</h1>
     </header>
     <article>
          <h2>...</h2>
          <p>...</p>
     </article>
     <article>
          <h2>...</h2>
          <p>...</p>
     </article>
     <footer>
          <p>...</p>
     </footer>
</section