Semantic html5

HTML5
semantisch
H. Mittendorfer

<section>

• (Sinn)abschnitte
• Enthält mindestens <h> und ein <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 „Programmiersprache“

<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

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Semantic html5

Semelhante a Semantic html5 (11)

Mais de Hans Mittendorfer

Mais de Hans Mittendorfer (20)

Semantic html5

Notas do Editor