{"id":596,"date":"2014-01-29T22:19:24","date_gmt":"2014-01-29T21:19:24","guid":{"rendered":"https:\/\/vielhuber.de\/?p=596"},"modified":"2016-06-05T23:00:47","modified_gmt":"2016-06-05T21:00:47","slug":"adieu-block-inline-willkommen-html5","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/adieu-block-inline-willkommen-html5\/","title":{"rendered":"Adieu Block &#038; Inline - Willkommen HTML5"},"content":{"rendered":"<p>Die Neuerungen der HTML5-Spezifikation sind zahlreich und viele davon werden bereits vom Gros der Browserlandschaft unterst\u00fctzt \u2013 nachfolgend will ich eine interessante \u00c4nderung an den Regeln zur Verschachtelung von Elementen beleuchten. HTML unterscheidet seit jeher zwischen Block- und Inline-Elementen. Die <a href=\"http:\/\/www.w3.org\/TR\/html4\/sgml\/dtd.html\" target=\"_blank\">Document Type Definition<\/a> von HTML4 nennt beispielsweise h1, p, und div als Block- sowie a, span, img als Inline-Elemente.<\/p>\n<p><!--more--><\/p>\n<p>Von diesem Konzept hat man sich nun (aus guten Gr\u00fcnden) verabschiedet. Viele Webdesigner ignorierten in manchen Anwendungsf\u00e4llen die Korrektheit der besagten Verschachtelungsregel, dass sich innerhalb von Inline-Elementen keine Block-Elemente befinden d\u00fcrfen oder funktionierten das Standardverhalten durch CSS-Regeln wie display:inline; bzw. display:block; (was oftmals zu invalidem Code f\u00fchrte) kurzerhand um.<\/p>\n<p>HTML5 weicht nun diese Unterscheidung auf und nennt sogar <a href=\"http:\/\/dev.w3.org\/html5\/html-author\/#categories\" target=\"_blank\">9 verschiedene Kategorien<\/a>, denen ein Element angeh\u00f6ren kann, wobei ein Element durchaus in mehreren Kategorien sein darf. Dabei wird die alte Unterscheidung nach Block- und Inline-Elementen \u00fcber Bord geworfen und der Vielzahl an Bedeutungen von Tags im Web Rechnung getragen. Das hat insbesondere die Folge, dass durchaus folgende Konstrukte validen Code darstellen:<\/p>\n<pre><code class=\"html\">&lt;a href=\"#\"&gt;\r\n\u00a0\u00a0 &lt;div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;h1&gt;Yeah&lt;\/h1&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Der ganze Block ist verlinkt.\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/p&gt;\r\n\u00a0\u00a0 &lt;\/div&gt;\r\n&lt;\/a&gt;\r\n<\/code><\/pre>\n<p>Einen ganzen Container, der weitere Block-Elemente enthielt, war vorher (mit validem Code) nur durch Tricks m\u00f6glich (beispielsweise durch absolute Positionierung einer verlinkten Overlay-Ebene). Alternativ verlinkte man die \u00dcberschrift und den Paragraphen \u2013 das wiederum f\u00fchrte zu Redundanz und der Container ist nicht anklickbar. Durch die begr\u00fc\u00dfenswerte Erweiterung von HTML5 ist das nun kein Problem mehr.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Neuerungen der HTML5-Spezifikation sind zahlreich und viele davon werden bereits vom Gros der Browserlandschaft unterst\u00fctzt \u2013 nachfolgend will ich eine interessante \u00c4nderung an den Regeln zur Verschachtelung von Elementen beleuchten. HTML unterscheidet seit jeher zwischen Block- und Inline-Elementen. Die Document Type Definition von HTML4 nennt beispielsweise h1, p, und div als Block- sowie a, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"gtbabel_prevent_lngs":"","gtbabel_alt_lng":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-596","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>Adieu Block &amp; Inline - Willkommen HTML5 &#060; Vielhuber David<\/title>\n<meta name=\"description\" content=\"Die Neuerungen der HTML5-Spezifikation sind zahlreich und viele davon werden bereits vom Gros der Browserlandschaft unterst\u00fctzt \u2013 nachfolgend will ...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vielhuber.de\/blog\/adieu-block-inline-willkommen-html5\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adieu Block &amp; Inline - Willkommen HTML5 &#060; Vielhuber David\" \/>\n<meta property=\"og:description\" content=\"Die Neuerungen der HTML5-Spezifikation sind zahlreich und viele davon werden bereits vom Gros der Browserlandschaft unterst\u00fctzt \u2013 nachfolgend will ich\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/adieu-block-inline-willkommen-html5\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-29T21:19:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-06-05T21:00:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"552\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:site\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adieu-block-inline-willkommen-html5\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adieu-block-inline-willkommen-html5\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"Adieu Block &#038; Inline - Willkommen HTML5\",\"datePublished\":\"2014-01-29T21:19:24+00:00\",\"dateModified\":\"2016-06-05T21:00:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adieu-block-inline-willkommen-html5\\\/\"},\"wordCount\":239,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adieu-block-inline-willkommen-html5\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adieu-block-inline-willkommen-html5\\\/\",\"name\":\"Adieu Block & Inline - Willkommen HTML5 &#060; Vielhuber David\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"datePublished\":\"2014-01-29T21:19:24+00:00\",\"dateModified\":\"2016-06-05T21:00:47+00:00\",\"description\":\"Die Neuerungen der HTML5-Spezifikation sind zahlreich und viele davon werden bereits vom Gros der Browserlandschaft unterst\u00fctzt \u2013 nachfolgend will ich\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adieu-block-inline-willkommen-html5\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adieu-block-inline-willkommen-html5\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adieu-block-inline-willkommen-html5\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adieu Block &#038; Inline - Willkommen HTML5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/\",\"name\":\"Vielhuber David\",\"description\":\"Full-Stack Developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vielhuber.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"width\":700,\"height\":552,\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/vielhuber\"]}]}<\/script>","yoast_head_json":{"title":"Adieu Block & Inline - Willkommen HTML5 &#060; Vielhuber David","description":"Die Neuerungen der HTML5-Spezifikation sind zahlreich und viele davon werden bereits vom Gros der Browserlandschaft unterst\u00fctzt \u2013 nachfolgend will ...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vielhuber.de\/blog\/adieu-block-inline-willkommen-html5\/","og_locale":"de_DE","og_type":"article","og_title":"Adieu Block & Inline - Willkommen HTML5 &#060; Vielhuber David","og_description":"Die Neuerungen der HTML5-Spezifikation sind zahlreich und viele davon werden bereits vom Gros der Browserlandschaft unterst\u00fctzt \u2013 nachfolgend will ich","og_url":"https:\/\/vielhuber.de\/blog\/adieu-block-inline-willkommen-html5\/","og_site_name":"Vielhuber David","article_published_time":"2014-01-29T21:19:24+00:00","article_modified_time":"2016-06-05T21:00:47+00:00","og_image":[{"width":700,"height":552,"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","type":"image\/jpeg"}],"author":"David","twitter_card":"summary_large_image","twitter_creator":"@vielhuber","twitter_site":"@vielhuber","twitter_misc":{"Verfasst von":"David","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vielhuber.de\/blog\/adieu-block-inline-willkommen-html5\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/adieu-block-inline-willkommen-html5\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"Adieu Block &#038; Inline - Willkommen HTML5","datePublished":"2014-01-29T21:19:24+00:00","dateModified":"2016-06-05T21:00:47+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/adieu-block-inline-willkommen-html5\/"},"wordCount":239,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/adieu-block-inline-willkommen-html5\/","url":"https:\/\/vielhuber.de\/blog\/adieu-block-inline-willkommen-html5\/","name":"Adieu Block & Inline - Willkommen HTML5 &#060; Vielhuber David","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"datePublished":"2014-01-29T21:19:24+00:00","dateModified":"2016-06-05T21:00:47+00:00","description":"Die Neuerungen der HTML5-Spezifikation sind zahlreich und viele davon werden bereits vom Gros der Browserlandschaft unterst\u00fctzt \u2013 nachfolgend will ich","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/adieu-block-inline-willkommen-html5\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/adieu-block-inline-willkommen-html5\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/adieu-block-inline-willkommen-html5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"Adieu Block &#038; Inline - Willkommen HTML5"}]},{"@type":"WebSite","@id":"https:\/\/vielhuber.de\/#website","url":"https:\/\/vielhuber.de\/","name":"Vielhuber David","description":"Full-Stack Developer","publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vielhuber.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef","name":"David","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","width":700,"height":552,"caption":"David"},"logo":{"@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg"},"sameAs":["https:\/\/x.com\/vielhuber"]}]}},"_links":{"self":[{"href":"https:\/\/vielhuber.de\/xh\/wp-json\/wp\/v2\/posts\/596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/xh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/xh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/xh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/xh\/wp-json\/wp\/v2\/comments?post=596"}],"version-history":[{"count":1,"href":"https:\/\/vielhuber.de\/xh\/wp-json\/wp\/v2\/posts\/596\/revisions"}],"predecessor-version":[{"id":1315,"href":"https:\/\/vielhuber.de\/xh\/wp-json\/wp\/v2\/posts\/596\/revisions\/1315"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/xh\/wp-json\/wp\/v2\/media?parent=596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/xh\/wp-json\/wp\/v2\/categories?post=596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/xh\/wp-json\/wp\/v2\/tags?post=596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}