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.
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.605 Aufrufe

Veröffentlicht am

Semantische Aspekte von HTML5

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

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

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)

×