{"id":1003,"date":"2008-07-30T20:34:52","date_gmt":"2008-07-30T18:34:52","guid":{"rendered":"http:\/\/notizblog.org\/?p=1003"},"modified":"2023-03-01T16:43:23","modified_gmt":"2023-03-01T15:43:23","slug":"html5-is-made-for-microformats","status":"publish","type":"post","link":"https:\/\/notiz.blog\/2008\/07\/30\/html5-is-made-for-microformats\/","title":{"rendered":"HTML5 is made for Microformats"},"content":{"rendered":"\n

Naja, nicht wirklich aber immerhin hat es RDFa<\/a> bis dato nicht in die HTML5 Spezifikation<\/a> geschafft. Es gibt zwar einen Milestone<\/a>…<\/p>\n\n\n\n

The HTML WG is encouraged to provide a mechanism to permit independently developed vocabularies such as Internationalization Tag Set (ITS), Ruby, and RDFa to be mixed into HTML documents.<\/p><\/blockquote>\n\n\n\n

…aber wer wei\u00df wie lange das noch dauert. Das hei\u00dft wohl, dass die Microformats noch eine gewisse Zeit lang als \u00dcbergangsl\u00f6sung her halten m\u00fcssen. Aber das ist ne andere Geschichte…<\/p>\n\n\n\n

Eigentlich wollte ich auf zwei HTML5 – Elemente eingehen, die eine schicke Alternative zu den bisherigen (in vielen<\/a> Microformats<\/a> verwendeten) abbr-design-pattern<\/a> bietet.<\/p>\n\n\n\n

Der <time \/>-Tag<\/h4>\n\n\n\n

Das time<\/a><\/code> Element erm\u00f6glicht das kennzeichnen eines Datums in z.B. Blogposts o.\u00c4.<\/p>\n\n\n\n

The primary use cases for these elements are for marking up publication dates e.g. in blog entries, and for marking event dates in hCalendar markup.<\/p><\/blockquote>\n\n\n\n

Also:<\/p>\n\n\n

<time<\/span> datetime<\/span>=\"2006-09-23\"<\/span>><\/span>a Saturday<\/time<\/span>><\/span><\/code><\/span>Code-Sprache:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
statt:<\/p>\n\n\n
<abbr<\/span> title<\/span>=\"2006-09-23\"<\/span>><\/span>a Saturday<\/abbr<\/span>><\/span><\/code><\/span>Code-Sprache:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
<div<\/span> class<\/span>=\"vevent\"<\/span>><\/span>\n  <span<\/span> class<\/span>=\"summary\"<\/span>><\/span>event title<\/span<\/span>><\/span>\n  <time<\/span> datetime<\/span>=\"2006-09-23\"<\/span> class<\/span>=\"dtstart dtend\"<\/span>><\/span>a Saturday<\/time<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code-Sprache:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Custom data attributes (data-)<\/h4>\n\n\n\n
Ein custom data attribute<\/em> ist ein frei benutzbares Attribut um Elemente mit Metadaten<\/a> anzureichern. Die einzige Vorgabe ist, dass es mit data-<\/code> beginnen muss. Ein Beispiel:<\/p>\n\n\n
<div<\/span> class<\/span>=\"monkey\"<\/span> data-arms<\/span>=\"2\"<\/span>\n     data-legs<\/span>=\"2\"<\/span> data-race<\/span>=\"chimp\"<\/span>><\/span>\n  Cheetah\n<\/div<\/span>><\/span><\/code><\/span>Code-Sprache:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Also:<\/p>\n\n\n
<div<\/span> class<\/span>=\"geo\"<\/span> data-latitude<\/span>=\"49.5483\"<\/span> data-longitude<\/span>=\"8.6661\"<\/span>><\/span>Weinheim<\/div<\/span>><\/span><\/code><\/span>Code-Sprache:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
statt:<\/p>\n\n\n
<abbr<\/span> class<\/span>=\"geo\"<\/span> title<\/span>=\"49.5483;8.6661\"<\/span>><\/span>Weinheim<\/abbr<\/span>><\/span><\/code><\/span>Code-Sprache:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Fazit<\/h4>\n\n\n\n
(X)HTML (egal ob XHTML2 mit RDFa oder X\/HTML5) wird also definitiv ein semantisches Feuerwerk, ganz im Sinne von Tim Berners Lee…<\/p>\n\n\n\n
Ich freu mich \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
Naja, nicht wirklich aber immerhin hat es RDFa bis dato nicht in die HTML5 Spezifikation geschafft. Es gibt zwar einen Milestone… The HTML WG is encouraged to provide a mechanism to permit independently developed vocabularies such as Internationalization Tag Set (ITS), Ruby, and RDFa to be mixed into HTML documents. …aber wer wei\u00df wie lange […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[2],"tags":[660,318,167,217,700,164,527,536,112],"class_list":{"0":"post-1003","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-web","7":"tag-abbr-design-pattern","8":"tag-geo","9":"tag-hcalendar","10":"tag-html","11":"tag-html5","12":"tag-microformats","13":"tag-rdfa","14":"tag-semantic-html","15":"tag-xhtml","16":"h-entry","17":"hentry"},"_links":{"self":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/1003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/comments?post=1003"}],"version-history":[{"count":1,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/1003\/revisions"}],"predecessor-version":[{"id":22527,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/1003\/revisions\/22527"}],"wp:attachment":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/media?parent=1003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/categories?post=1003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/tags?post=1003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Ideal auch als <abbr \/><\/code>-Ersatz bei z.B. dem Geo-Microformat<\/a>.<\/p>\n\n\n\n
Ein hCalendar<\/a> k\u00f6nnte dann so aussehen:<\/p>\n\n\n