Semantisches HTML5 Ein Beitrag für das  semantische WebZusammengestellt von H. Mittendorfer für das PropädeutikumWebwissen...
Während die Teilung eines HTMLDokumentes in Sinnabschnitte bisherüber einheitlich über den Tad <div>erfolgte, hält HTML5 d...
<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ü...
<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 „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>,...
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

2.384 Aufrufe

Veröffentlicht am

Semantische Aspekte von HTML5

Veröffentlicht in: Bildung
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.384
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.375
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Semantic html5

    1. 1. Semantisches HTML5 Ein Beitrag für das semantische WebZusammengestellt von H. Mittendorfer für das PropädeutikumWebwissenschaften nach: Peter Kröner: "HTML5 - Webseiten innovativ undzukunftssicher", München 2010
    2. 2. Während die Teilung eines HTMLDokumentes in Sinnabschnitte bisherüber einheitlich über den Tad <div>erfolgte, hält HTML5 dafür differenzierte,sinngebende Tags bereit.Die sinngebenden Tags wirken alsMetainformation (Information über dieInformation) zum Web-Dokument.
    3. 3. <section>• (Sinn)abschnitt• Enthält mindestens <hx> und <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 „Programmiersprachen“
    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)

    ×