Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

998 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)

×