{"id":4790,"date":"2012-10-21T22:42:35","date_gmt":"2012-10-22T02:42:35","guid":{"rendered":"http:\/\/www.ericfeminella.com\/blog\/?p=4790"},"modified":"2012-11-11T20:25:17","modified_gmt":"2012-11-12T01:25:17","slug":"html5-document-outliner","status":"publish","type":"post","link":"https:\/\/www.ericfeminella.com\/blog\/2012\/10\/21\/html5-document-outliner\/","title":{"rendered":"HTML5 Document Outliner"},"content":{"rendered":"<p>Recently, while preparing a training session on HTML5 Semantic and Structural Elements, I was rather intent on conveying the importance of an application&#8217;s overall markup and structure, while also expressing the importance of not being overly concerned with the absolute technical &#8220;correctness&#8221; of each and every element used. <\/p>\n<p>With this in mind, providing a general overview of <a href=\"http:\/\/html5doctor.com\/downloads\/h5d-sectioning-flowchart.png\" target=\"_blank\">HTML5 sectioning content<\/a>, and <a href=\"http:\/\/html5doctor.com\/outlines\/\" target=\"_blank\">HTML5 Document Outlines<\/a>, seemed appropriate points to emphasize.<\/p>\n<p>Before doing so, I was looking to utilize a simple utility to provide a means of visualizing an HTML5 Document Outline, and the very useful Chrome Extension, <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/afoibpobokebhgfnknfndkgemglggomo\" target=\"_blank\">HTML5 Outliner<\/a>, proved to be an ideal tool for the task.<\/p>\n<p>In particular, the <strong>HTML5 Outliner<\/strong> is quite helpful in validating the overall structure of single page web applications, whereby the constructed page is based on multiple disparate client-side templates being rendered at runtime; in which case it can be rather useful to have a holistic view of an application&#8217;s structure.<\/p>\n<p>And so, if you are building modern client-side web applications, and using Chrome, if you haven&#8217;t done so already, I certainly recommend installing the <a href=\"http:\/\/html5doctor.com\/outlines\/\" target=\"_blank\">HTML5 Document Outline<\/a> for quickly viewing an application&#8217;s overall structure.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recently, while preparing a training session on HTML5 Semantic and Structural Elements, I was rather intent on conveying the importance of an application&#8217;s overall markup and structure, while also expressing the importance of not being overly concerned with the absolute technical &#8220;correctness&#8221; of each and every element used. With this in mind, providing a general overview of HTML5 sectioning content,&#8230; <a class=\"read-more\" href=\"https:\/\/www.ericfeminella.com\/blog\/2012\/10\/21\/html5-document-outliner\/\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[133,59],"tags":[144,205,204],"class_list":["post-4790","post","type-post","status-publish","format-standard","hentry","category-browsers","category-html5","tag-chrome","tag-chrome-extensions","tag-html5-document-outline"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/4790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/comments?post=4790"}],"version-history":[{"count":0,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/4790\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/media?parent=4790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/categories?post=4790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/tags?post=4790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}