Das Dokument behandelt verschiedene Arten von Dokumenten, definiert semantische Webstandards und beschreibt die Entwicklung von HTML und XHTML bis hin zu HTML5. Es hebt die Bedeutung der semantischen Strukturierung von Inhalten hervor und stellt neue HTML5-Elemente vor, die zur Verbesserung der Webanwendungen beitragen. Außerdem wird auf die Implementierung von Mikroformaten und RDF für die semantische Anreicherung von dokumentierten Daten eingegangen.

1. Michael Jendryschik 26. Mai 2009 Websemantik Die nächsten Schritte

4. <h1>Dokumente</h1> <p>» Das ist ein wichtiges Dokument«, sagen wir gern zu Verträgen, Geschäftsbriefen, Zeugnissen oder beglaubigten Schriftstücken. Wir alle kennen den Begriff »Word-Dokument«, Webentwickler sprechen von »HTML-Dokumenten«. Aber was sind Dokumente eigentlich?</p>

5. Kontaktdaten? Buchrezensionen? Termine? CD-Sammlungen? Tagebücher? Rezepte? Dialoge? Kochbücher? Bildergalerien? Bibliographische Daten? Geodaten? Copyright und Lizenzen? Mietverträge? Gebrauchsanleitungen? ...

6. Feinstrukturierung <div id=&quot;header&quot;> <!-- Kopfzeile --> </div> <div id=&quot;nav&quot;> <!-- Navigation --> </div> <div id=&quot;main&quot;> <div id=&quot;sidebar&quot;> <!-- Randspalte --> </div> <div id=&quot;content&quot;> <div class=&quot;section&quot;> <!-- Abschnitt --> </div> <div class=&quot;section&quot;> <!-- Abschnitt --> </div> </div> <div id=&quot;footer&quot;> <!-- Fußzeile --> </div> </div>

7. Mikroformate <address class=&quot;vcard&quot; > <span class=&quot;adr&quot;> <span class=&quot;fn&quot;> itemis AG </span> <br /> <span class=&quot;street-address&quot;> Am Brambusch 15–24 </span> <br /> <span class=&quot;postal-code&quot;> 44536 </span> <span class=&quot;locality&quot;> Lünen </span> </span> <br /><br /> Telefon: <span class=&quot;tel&quot;> +49 231 9860-210 </span> <br /> <span class=&quot;tel&quot;> <span class=&quot;type&quot;> Fax </span> : <span class=&quot;value&quot;> +49 231 9860-211 </span> </span> <br /><br /> E-Mail: <a href=&quot;mailto:info@itemis.de&quot; class=&quot;email&quot; >info@itemis.de</a> </address>

8. Skripting

9. WAI-ARIA (teilweise) <input type=&quot;text&quot; name=&quot;email&quot; aria-required=&quot;true&quot; />

10. Neue Standards braucht das Land! … und zwei davon stelle ich jetzt vor.

12. »Das Semantische Web ist eine Erweiterung des herkömmlichen Webs, in der Informationen mit eindeutigen Bedeutungen versehen werden, um die Arbeit zwischen Mensch und Maschine zu erleichtern.« Tim Berners-Lee

13. Formale Sprache zur Beschreibung von Eigenschaften beliebiger Daten in einer Form, die sowohl Menschen als auch Maschinen lesen und verstehen können.

14. Das Buch mit der ISBN 3-8273-2739-3 hat den Titel »Einführung in XHTML, CSS und Webdesign«.

15. Das Buch mit der ISBN 3-8273-2739-3 hat den Titel »Einführung in XHTML, CSS und Webdesign«. sprachlich formal Subjekt Das Buch mit der ISBN 3-8273-2739-3 urn:isbn:3-8273-2739-3 Prädikat hat den Titel http://purl.org/dc/elements/1.1/title Objekt Einführung in XHTML, CSS und Webdesign Einführung in XHTML, CSS und Webdesign

16. Das Buch mit der ISBN 3-8273-2739-3 hat den Titel »Einführung in XHTML, CSS und Webdesign«. sprachlich formal Subjekt Das Buch mit der ISBN 3-8273-2739-3 urn:isbn:3-8273-2739-3 Prädikat hat den Titel http://purl.org/dc/elements/1.1/title Objekt Einführung in XHTML, CSS und Webdesign Einführung in XHTML, CSS und Webdesign

17. Das Buch mit der ISBN 3-8273-2739-3 hat den Titel »Einführung in XHTML, CSS und Webdesign«. <rdf:RDF xmlns:rdf=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot; xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot; > <rdf:Description rdf:about=&quot;urn:isbn:3-8273-2739-3&quot;> <dc:title>Einführung in XHTML, CSS und Webdesign</dc:title> </rdf:Description> </rdf:RDF>

18. RDFa RDFa nutzt Attribute, um (X)HTML-Dokumente mit RDF anzureichern

19. Seit Mitte 2004 Teil des W3C Arbeitsentwurfs »XHTML 2.0«

20. April 2007: XHTML+RDFa 1.0

21. RDFa XHTML 1.0

22. @content @href @rel @rev @src

23. XHTML 2.0 Metainformation Attributes Module

24. @about @datatype @property @resource @typeof

25. RDFa Subjekt Prädikat Objekt Zeichenkette als Objekt @about @property @content (oder bestehende Zeichenkette URI als Objekt @about @rel @rev @resource @href @src

26. RDFa <span xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot; about=&quot;urn:isbn:3-8273-2739-3&quot; property=&quot;dc:title&quot; content=&quot;Einführung in XHTML, CSS und Webdesign&quot; /> Subjekt Prädikat Objekt Zeichenkette als Objekt @about @property @content (oder bestehende Zeichenkette URI als Objekt @about @rel @rev @resource @href @src

27. RDFa <span xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot; about=&quot;urn:isbn:3-8273-2739-3&quot; property=&quot;dc:title&quot; >Einführung in XHTML, CSS und Webdesign</span> Subjekt Prädikat Objekt Zeichenkette als Objekt @about @property @content (oder bestehende Zeichenkette URI als Objekt @about @rel @rev @resource @href @src

28. Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren.

29. Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren. <p>Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren.</p>

30. Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren. sprachlich formal Subjekt Johann Wolfgang von Goethe http://dbpedia.org/page/Johann_Wolfgang_von_Goethe Prädikat wurde geboren am http://dbpedia.org/property/dateOfBirth Objekt 28. August 1749 1749-08-28

31. Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren. sprachlich formal Subjekt Johann Wolfgang von Goethe http://dbpedia.org/page/Johann_Wolfgang_von_Goethe Prädikat wurde geboren am http://dbpedia.org/property/dateOfBirth Objekt 28. August 1749 1749-08-28 sprachlich formal Subjekt Johann Wolfgang von Goethe http://dbpedia.org/page/Johann_Wolfgang_von_Goethe Prädikat wurde geboren in http://dbpedia.org/property/birthPlace Objekt Frankfurt am Main http://dbpedia.org/page/Frankfurt_am_Main

32. Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren. <p about=&quot;http://dbpedia.org/page/Johann_Wolfgang_von_Goethe&quot; xmlns:dbp=&quot;http://dbpedia.org/property/&quot; xmlns:xsd=&quot;http://www.w3.org/2001/XMLSchema&quot; > Johann Wolfgang von Goethe wurde am <span property=&quot;dbp:dateOfBirth&quot; datatype=&quot;xsd:date&quot; content=&quot;1749-08-28&quot;> 28. August 1749 </span> in <span rel=&quot;dbp:birthPlace&quot; resource=&quot;http://dbpedia.org/page/Frankfurt_am_Main&quot;> Frankfurt am Main </span> geboren. </p>

34. Web Applications 1.0 Mitte 2004: Erster Entwurf

35. Mai 2007: Startpunkt zur Diskussion und Weiterentwicklung von HTML

36. Web Applications 1.0 HTML5 Mitte 2004: Erster Entwurf

37. Mai 2007: Startpunkt zur Diskussion und Weiterentwicklung von HTML

38. Januar 2008: W3C veröffentlicht den ersten Arbeitsentwurf von HTML5

39. Juni 2008: Zweiter Arbeitsentwurf mit Integration von Web Forms 2.0

40. Mai 2009: Aktueller W3C-Arbeitsentwurf

41. Eine Sprache, mehrere Ausprägungen Definition eines abstrakten Dokumentmodells: HTML5-DOM

42. Derzeit zwei Serialisierungen: HTML-Syntax: HTML5

43. XML-Syntax: XHTML5

44. XHTML 1.0 <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;de&quot; lang=&quot;de&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <title>Kochbar</title> </head> <body> <p>Absatz</p> </body> </html>

45. HTML5 <!DOCTYPE html> <html> <head> <meta charset=&quot;UTF-8&quot;> <title>Kochbar</title> </head> <body> <p>Absatz </body> </html>

46. HTML5 <!DOCTYPE html> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;de&quot; > <head> <meta charset=&quot;UTF-8&quot; / > <title>Kochbar</title> </head> <body> <p>Absatz </p> </body> </html>

47. XHTML5 <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Kochbar</title> </head> <body> <p>Absatz</p> </body> </html>

48. XHTML5 <!DOCTYPE html> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;de&quot;> <head> <meta charset=&quot;UTF-8&quot; /> <title>Kochbar</title> </head> <body> <p>Absatz</p> </body> </html>

49. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video

50. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video

51. Elemente zur Strukturierung Quelle: http://www.alistapart.com/articles/previewofhtml5

52. Elemente zur Strukturierung Quelle: http://www.alistapart.com/articles/previewofhtml5

53. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video

54. Elementunterschriften: Das Element figure <div class=&quot;illustration&quot;> <img src=&quot;/images/opera95.png&quot; alt=&quot;&quot; width=&quot;400&quot; height=&quot;300&quot; /> <span class=&quot;caption&quot;>Opera 9.5</span> </div> <figure> <img src=&quot;/images/opera95.png&quot; alt=&quot;&quot; width=&quot;400&quot; height=&quot;300&quot; /> <legend> Opera 9.5 </legend> </figure>

55. Elementunterschriften: Das Element figure <div id=&quot;lst2&quot;> <div class=&quot;caption&quot;>Listing 2: Header horizontal zentrieren</div> <pre><code>div#header { margin: 0 auto; width: 75%; }</code></pre> </div> <figure id=&quot;lst2&quot;> <legend> Listing 2: Header horizontal zentrieren </legend> <pre><code>div#header { margin: 0 auto; width: 75%; }</code></pre> </figure>

56. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video

57. Dialoge: Das Element dialog <dialog> <dt>Einige Handwerksbursche:</dt> <dd>Warum denn dort hinaus?</dd> <dt>Andre:</dt> <dd>Wir gehn hinaus aufs Jägerhaus.</dd> <dt>Die Ersten:</dt> <dd>Wir aber wollen nach der Mühle wandern.</dd> <dt>Ein Handwerksbursch:</dt> <dd>Ich rat euch, nach dem Wasserhof zu gehn.</dd> </dialog>

58. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video

59. Angabe eines begrenzten Maß: Das Element meter <meter min=&quot;0&quot; max=&quot;10&quot;>7</meter> <meter>70%</meter> <meter min=&quot;0&quot; max=&quot;10&quot; value=&quot;7&quot; title=&quot;Sterne&quot;></meter>

61. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video

62. Fortschrittsbalken: Das Element progress <section> <h2>Task Progress</h2> <p>Progress: <progress> <span id=&quot;p&quot;>0</span>% </progress> </p> <script> var progressBar = document.getElementById('p'); function updateProgress(newValue) { progressBar.textContent = newValue; } </script> </section>

63. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video

64. Markierung: Das Element mark <p>Am Ende der markierten Deklaration fehlt das Semikolon:</p> <pre><code>mark { color: black; <mark> background-color: yellow </mark> font-weight: bold; }</code></pre>

66. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video

67. Datums- und Zeitangaben: Das Element time <p>Der <time datetime=&quot;2009-05-10&quot;> Muttertag </time> ist ein Feiertag zu Ehren der Mutter und der Mutterschaft.</p> <p>Die Veranstaltung beginnt um <time> 18:30 </time> Uhr.</p>

68. Erweitertes a -Element <a href=&quot;http://www.itemis.de/20405&quot;> <h2>Was macht Eclipse attraktiv für den Embedded-Markt?</h2> <p>Was bietet Eclipse, wie schafft man durchgängige Werkzeugketten auf Basis der offenen Tool-Technologie und warum wurde itemis als Top Arbeitgeber 2009 ausgezeichnet?</p> <p>itemis-Vorstand Wolfgang Neuhaus im Gespräch.</p> </a>

69. Web Forms 2.0

71. Pflichtfelder und Autofocus <input name=&quot;name&quot; id=&quot;name&quot; size=&quot;30&quot; type=&quot;text&quot; />

72. Pflichtfelder und Autofocus <input name=&quot;name&quot; id=&quot;name&quot; size=&quot;30&quot; type=&quot;text&quot; /> <input name=&quot;name&quot; id=&quot;name&quot; size=&quot;30&quot; type=&quot;text&quot; required=&quot;required&quot; autofocus=&quot;autofocus&quot; />

73. Datumsangaben <input name=&quot;date&quot; id=&quot;date&quot; size=&quot;30&quot; type=&quot;text&quot; value=&quot;zum Beispiel 24.12.2008&quot; onblur=&quot;if(this.value == '') this.value='zum Beispiel 24.12.2008'&quot; onfocus=&quot;if(this.value == 'zum Beispiel 24.12.2008') this.value=''&quot; />

74. Datumsangaben <input name=&quot;date&quot; id=&quot;date&quot; size=&quot;30&quot; type=&quot;text&quot; value=&quot;zum Beispiel 24.12.2008&quot; onblur=&quot;if(this.value == '') this.value='zum Beispiel 24.12.2008'&quot; onfocus=&quot;if(this.value == 'zum Beispiel 24.12.2008') this.value=''&quot; /> <input name=&quot;date&quot; id=&quot;date&quot; type=&quot;date&quot; required=&quot;required&quot; />

75. Zeitangaben <select name=&quot;time&quot; id=&quot;time&quot;> <option>bitte wählen...</option> <option>12:00</option> <option>12:30</option> <!-- Weitere Angaben --> <option>23:30</option> </select>

76. Zeitangaben <select name=&quot;time&quot; id=&quot;time&quot;> <option>bitte wählen...</option> <option>12:00</option> <option>12:30</option> <!-- Weitere Angaben --> <option>23:30</option> </select> <input name=&quot;time&quot; id=&quot;time&quot; type=&quot;time&quot; min=&quot;12:00&quot; max=&quot;23:30&quot; step=&quot;1800&quot; required=&quot;required&quot; />

77. Schieberegler <select name=&quot;persons&quot; id=&quot;persons&quot;> <option selected=&quot;selected&quot;>1–2</option> <option>3–5</option> <option>6–10</option> <option>10–15</option> <option>mehr als 15</option> </select>

78. Schieberegler <select name=&quot;persons&quot; id=&quot;persons&quot;> <option selected=&quot;selected&quot;>1–2</option> <option>3–5</option> <option>6–10</option> <option>10–15</option> <option>mehr als 15</option> </select> <input name=&quot;persons&quot; id=&quot;persons&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;80&quot; value=&quot;0&quot; oninput=&quot;document.getElementsByTagName('span')[0].textContent = value&quot; /> <span></span>

79. Liste mit Vorschlägen <select name=&quot;persons&quot; id=&quot;persons&quot;> <option selected=&quot;selected&quot;>1–2</option> <option>3–5</option> <option>6–10</option> <option>10–15</option> <option>mehr als 15</option> </select>

80. Liste mit Vorschlägen <select name=&quot;persons&quot; id=&quot;persons&quot;> <option selected=&quot;selected&quot;>1–2</option> <option>3–5</option> <option>6–10</option> <option>10–15</option> <option>mehr als 15</option> </select> <input name=&quot;persons&quot; id=&quot;persons&quot; list=&quot;plist&quot; required=&quot;required&quot; /> <datalist id=&quot;plist&quot;> <option>1–2</option> <option>3–5</option> <option>6–10</option> <option>10–15</option> <option>mehr als 15</option> </datalist>

82. HTML5 Microdata Editor's Draft vom 11. Mai 2009

83. Neue Attribute: @item @itemprop @subject