Semantic html5

Semantisches HTML5
Ein Beitrag für das
semantische Web

Zusammengestellt von H. Mittendorfer für das Propädeutikum
Webwissenschaften nach: Peter Kröner: "HTML5 - Webseiten innovativ und
zukunftssicher", München 2010

Während die Teilung eines HTML
Dokumentes in Sinnabschnitte bisher
über einheitlich über den Tad <div>
erfolgte, hält HTML5 dafür differenzierte,
sinngebende Tags bereit.

Die sinngebenden Tags wirken als
Metainformation (Information über die
Information) zum Web-Dokument.

<section>

• (Sinn)abschnitt
• Enthält mindestens <hx> und <p>

<header>

• Sammlung einführender Inhalte
(Überschriften, Navigationen)
• Nicht nur für das ganze Dokument,
sondern auch für Abschnitte (z.B. section)
• Nicht verwechseln mit <head> / <body>

<footer>

• Gegenstück zum <header>
• Es dürfen keine weiteren <header> und
<footer> enthalten sein.

<nav>

• Enthält Navigationselemente.
• „Menüs“ die als Liste geführt werden.
• Unterpunkte oder weiterführende
Verweise.

<aside>

• Ergänzung zum dargestellten Inhalt.
• „Seitenspalte“.
• hervorgehobenes Zitat.

<article>

• In sich geschlossener Inhalt.
• Beiträge in Blogs und Foren.
• Kommentare in Blogs und Foren.

Hierarchische Struktur
eines Dokumentes

<h1> bis <h2>

• Wie gehabt.

Outline-Algorithmus

• <h1> bis <h6> bilden bis zu sechs Ebenen.
• Innerhalb eines „sectioning-Elementes“
wird neu mit <h1> begonnen, jedoch „eine
Ebene tiefer“ als das übergeordnete <h1>.
• Sectioning Elemente: <section>, <nav>,
<aside>, <article>.

<hgroup>

• Fasst mehrere Überschriften zusammen.
• Nur das ranghöchste Element aus den
Überschriften wird im Outline angezeigt.

Outlining-Tools

• HTML-5 Outliner
• h5o

<strong> und <em>

• <em> Hervorhebung.
• <strong> starke Hervorhebung.
• <strong> und <em> können geschachtelt
werden.

<abbr> und <acronym>

• <acronym>
• <abbr> steht für Abkürzungen und
Acronyme.

<code>

• unverändert
• enthält „Programmiersprachen“

<address>

• Kontaktinformation
• nicht nur für das gesamte Dokument,
sondern auch für <article>.

Gelöschte Elemente

• <acronym> ersetzt durch: <abbr>
• <applet> ersetzt durch: <object>
• <dir> ersetzt durch: <ul>
• <frame>, <freameset>, <noframes>
ersatzlos gestrichen.

gelöscht - Fortsetzung
• <isindex>
• <basefont>
• <big>
• <center>
• <font>, <s>
• <strike>
• <tt>, <u>

Wiederbelebt
• <b>: wenn der markierte Text
normalerweise fett wäre. (z. B. Teaser eines
Artikels).
• <i>: wenn der markierte Text
normalerweise kursiv wäre. (z. B.
Fachbegriffe).
• <small> Kleingedrucktes.
• <hr> inhaltlicher Bruch.

Neue
Textauszeichnungen
• <time> Zeitauszeichnung für Mensch und
Maschine lesbar.
• <mark> Hervorgehobene Textabschnitte.
Z.B.: markierte Suchergebnisse.
• <ﬁgure> Inhalte, auf die von der
Dokumentation verwiesen wird. (Tabellen,
Graﬁken, Codebeispiele)

Semantic html5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Semantic html5

Ähnlich wie Semantic html5 (20)

Mehr von Hans Mittendorfer

Mehr von Hans Mittendorfer (20)

Semantic html5

Hinweis der Redaktion