HTML5semantisch H. Mittendorfer
Wider die „Divits“
<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ü...
<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> ...
<hgroup>• Fasst mehrere Überschriften zusammen.• Nur das ranghöchste Element aus den  Überschriften wird im Outline angeze...
Outlining-Tools• HTML-5 Outliner• h5o
Textauszeichnungen
<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>,...
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 markie...
Neue  Textauszeichnungen• <time> Zeitauszeichnung für Mensch und  Maschine lesbar.• <mark> Hervorgehobene Textabschnitte. ...
Nächste SlideShare
Wird geladen in …5
×

Semantic html5

993 Aufrufe

Veröffentlicht am

Semantic HTML5

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Semantic html5

  1. 1. HTML5semantisch H. Mittendorfer
  2. 2. Wider die „Divits“
  3. 3. <section>• (Sinn)abschnitte• Enthält mindestens <h> und ein <p>
  4. 4. <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>
  5. 5. <footer>• Gegenstück zum <header>• Es dürfen keine weiteren <header> und <footer> enthalten sein.
  6. 6. <nav>• Enthält Navigationselemente.• „Menüs“ die als Liste geführt werden.• Unterpunkte oder weiterführende Verweise.
  7. 7. <aside>• Ergänzung zum dargestellten Inhalt.• „Seitenspalte“.• hervorgehobenes Zitat.
  8. 8. <article>• In sich geschlossener Inhalt.• Beiträge in Blogs und Foren.• Kommentare in Blogs und Foren.
  9. 9. Hierarchische Struktur eines Dokumentes
  10. 10. <h1> bis <h2>• Wie gehabt.
  11. 11. 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>.
  12. 12. <hgroup>• Fasst mehrere Überschriften zusammen.• Nur das ranghöchste Element aus den Überschriften wird im Outline angezeigt.
  13. 13. Outlining-Tools• HTML-5 Outliner• h5o
  14. 14. Textauszeichnungen
  15. 15. <strong> und <em>• <em> Hervorhebung.• <strong> starke Hervorhebung.• <strong> und <em> können geschachtelt werden.
  16. 16. <abbr> und <acronym>• <acronym>• <abbr> steht für Abkürzungen und Acronyme.
  17. 17. <code>• unverändert• enthält „Programmiersprache“
  18. 18. <address>• Kontaktinformation• nicht nur für das gesamte Dokument, sondern auch für <article>.
  19. 19. Gelöschte Elemente• <acronym> ersetzt durch: <abbr>• <applet> ersetzt durch: <object>• <dir> ersetzt durch: <ul>• <frame>, <freameset>, <noframes> ersatzlos gestrichen.
  20. 20. gelöscht - Fortsetzung• <isindex>• <basefont>• <big>• <center>• <font>, <s>• <strike>• <tt>, <u>
  21. 21. 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.
  22. 22. Neue Textauszeichnungen• <time> Zeitauszeichnung für Mensch und Maschine lesbar.• <mark> Hervorgehobene Textabschnitte. Z.B.: markierte Suchergebnisse.• <figure> Inhalte, auf die von der Dokumentation verwiesen wird. (Tabellen, Grafiken, Codebeispiele)

×