SlideShare ist ein Scribd-Unternehmen logo
HTML5
semantisch
 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ü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
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>, <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.
• <figure> Inhalte, auf die von der
  Dokumentation verwiesen wird. (Tabellen,
  Grafiken, Codebeispiele)

Weitere ähnliche Inhalte

Ähnlich wie Semantic html5

HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
Steffen Ritter
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
Christian Heilmann
 
IT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML IIIT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML II
Institute for Digital Humanities, University of Cologne
 
Programmiertechniken
ProgrammiertechnikenProgrammiertechniken
Programmiertechniken
Gianna-B
 
HTML5 Übersicht
HTML5 ÜbersichtHTML5 Übersicht
HTML5 Übersicht
wdbmh
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum Style
Gino Cremer
 
Xhtml und Websitegestaltung
Xhtml und WebsitegestaltungXhtml und Websitegestaltung
Xhtml und Websitegestaltung
contrastmedia
 
Wordpress Custom Theme Development
Wordpress Custom Theme DevelopmentWordpress Custom Theme Development
Wordpress Custom Theme Development
Daniela Wibbeke
 

Ähnlich wie Semantic html5 (11)

html grundlagen
html grundlagenhtml grundlagen
html grundlagen
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
 
IT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML IIIT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML II
 
Programmiertechniken
ProgrammiertechnikenProgrammiertechniken
Programmiertechniken
 
HTML5 Übersicht
HTML5 ÜbersichtHTML5 Übersicht
HTML5 Übersicht
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum Style
 
Xhtml und Websitegestaltung
Xhtml und WebsitegestaltungXhtml und Websitegestaltung
Xhtml und Websitegestaltung
 
Wordpress Custom Theme Development
Wordpress Custom Theme DevelopmentWordpress Custom Theme Development
Wordpress Custom Theme Development
 

Mehr von Hans Mittendorfer

Ki 2
Ki 2Ki 2
WhatsAppverschlüsselung
WhatsAppverschlüsselungWhatsAppverschlüsselung
WhatsAppverschlüsselung
Hans Mittendorfer
 
Kryptographie
KryptographieKryptographie
Kryptographie
Hans Mittendorfer
 
Ki
KiKi
Ki
KiKi
Meatdaten
MeatdatenMeatdaten
Semiotik iii
Semiotik iiiSemiotik iii
Semiotik iii
Hans Mittendorfer
 
Grenzen der Kryptographie
Grenzen der KryptographieGrenzen der Kryptographie
Grenzen der Kryptographie
Hans Mittendorfer
 
Unternehmeskommunikation
UnternehmeskommunikationUnternehmeskommunikation
Unternehmeskommunikation
Hans Mittendorfer
 
Sicherheit webkommunikation
Sicherheit webkommunikationSicherheit webkommunikation
Sicherheit webkommunikation
Hans Mittendorfer
 
Lernblogs ii
Lernblogs iiLernblogs ii
Lernblogs ii
Hans Mittendorfer
 
Webwissenschaften
WebwissenschaftenWebwissenschaften
Webwissenschaften
Hans Mittendorfer
 
Semiotik ii
Semiotik iiSemiotik ii
Semiotik ii
Hans Mittendorfer
 
Weblogs als partizipative lernbegleitung
Weblogs als partizipative lernbegleitungWeblogs als partizipative lernbegleitung
Weblogs als partizipative lernbegleitung
Hans Mittendorfer
 
Grosse zukunft des_buches_2
Grosse zukunft des_buches_2Grosse zukunft des_buches_2
Grosse zukunft des_buches_2
Hans Mittendorfer
 
Menschliche kommunikation
Menschliche kommunikationMenschliche kommunikation
Menschliche kommunikation
Hans Mittendorfer
 
Watzlawick 1
Watzlawick 1Watzlawick 1
Watzlawick 1
Hans Mittendorfer
 

Mehr von Hans Mittendorfer (20)

Ki 2
Ki 2Ki 2
Ki 2
 
WhatsAppverschlüsselung
WhatsAppverschlüsselungWhatsAppverschlüsselung
WhatsAppverschlüsselung
 
Kryptographie
KryptographieKryptographie
Kryptographie
 
Ki
KiKi
Ki
 
Ki
KiKi
Ki
 
Meatdaten
MeatdatenMeatdaten
Meatdaten
 
Semiotik iii
Semiotik iiiSemiotik iii
Semiotik iii
 
Grenzen der Kryptographie
Grenzen der KryptographieGrenzen der Kryptographie
Grenzen der Kryptographie
 
Unternehmeskommunikation
UnternehmeskommunikationUnternehmeskommunikation
Unternehmeskommunikation
 
Sicherheit webkommunikation
Sicherheit webkommunikationSicherheit webkommunikation
Sicherheit webkommunikation
 
Lernblogs ii
Lernblogs iiLernblogs ii
Lernblogs ii
 
Webwissenschaften
WebwissenschaftenWebwissenschaften
Webwissenschaften
 
Semiotik ii
Semiotik iiSemiotik ii
Semiotik ii
 
Weblogs als partizipative lernbegleitung
Weblogs als partizipative lernbegleitungWeblogs als partizipative lernbegleitung
Weblogs als partizipative lernbegleitung
 
Grosse zukunft des_buches_2
Grosse zukunft des_buches_2Grosse zukunft des_buches_2
Grosse zukunft des_buches_2
 
Semiotik
SemiotikSemiotik
Semiotik
 
Qr code
Qr codeQr code
Qr code
 
Menschliche kommunikation
Menschliche kommunikationMenschliche kommunikation
Menschliche kommunikation
 
Watzlawick 1
Watzlawick 1Watzlawick 1
Watzlawick 1
 
Webkommunikation
WebkommunikationWebkommunikation
Webkommunikation
 

Semantic html5

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n