{"id":67494,"date":"2021-07-23T04:10:06","date_gmt":"2021-07-23T08:10:06","guid":{"rendered":"http:\/\/bangla.salearningschool.com\/recent-posts\/sections-and-outlines-of-an-html5-document-introduction-to-html-5\/"},"modified":"2021-07-23T04:10:06","modified_gmt":"2021-07-23T08:10:06","slug":"sections-and-outlines-of-an-html5-document-introduction-to-html-5","status":"publish","type":"post","link":"http:\/\/bangla.sitestree.com\/?p=67494","title":{"rendered":"Sections and Outlines of an HTML5 Document #Introduction to HTML 5"},"content":{"rendered":"<p>Just some notes<\/p>\n<ul>\n<li>In HTML 4, the sections are not precise with tags like div unless you assign some styles to them. For defining sections, you do not need div tags but header tags (h1..h6) can imply sections. HTML4 is very imprecise on what a section is and what is it&#8217;s scope.<\/li>\n<li>In HTML5, section tag explicitly defines a section<\/li>\n<li>In HTML5, tags such as h1, h2,&#8230;h6 are relative to the current section not relative to the whole page<\/li>\n<li>article, section, nav and aside are always subsections to their nearest sections; they are not dependent on header tags<\/li>\n<li>In HTML 4, everything belongs to the main outline of the web-page. In HTML5, aside does not belong to the main outline. Can be used for advertising blocks<\/li>\n<li>In HTML5, nav, header, footer do not belong to the content but to the whole site<\/li>\n<li>In non-HTML5 browsers, we can support the HTML5 tags just by defining styles as below for them.\n<pre style=\"padding: 20px;font-size: 12px\">section, article, aside, footer, header, nav, hgroup {  display:block;}<\/pre>\n<\/li>\n<li>IE8 and earlier does not support styling of unsupported tags. So the above method will not work in IE<\/li>\n<li>So we can create these elements for such browsers\n<pre style=\"padding: 20px;font-size: 12px\">\/\/{ and } are used instead of &lt; and &gt;{!--[if lt IE 9] }  {script}    document.createElement(\"header\" );    document.createElement(\"footer\" );    document.createElement(\"section\");    document.createElement(\"aside\"  );    document.createElement(\"nav\"    );    document.createElement(\"article\");    document.createElement(\"hgroup\" );     document.createElement(\"time\"   );  {\/script}&lt; ![endif]--&gt;<\/pre>\n<\/li>\n<\/ul>\n<p> From: http:\/\/sitestree.com\/?p=5332<br \/> Categories:Introduction to HTML 5<br \/>Tags:<br \/> Post Data:2008-03-02 23:21:02<\/p>\n<p>\t\tShop Online: <a href='https:\/\/www.ShopForSoul.com\/' target='new' rel=\"noopener\">https:\/\/www.ShopForSoul.com\/<\/a><br \/>\n\t\t(Big Data, Cloud, Security, Machine Learning): Courses: <a href='http:\/\/Training.SitesTree.com' target='new' rel=\"noopener\"> http:\/\/Training.SitesTree.com<\/a><br \/>\n\t\tIn Bengali: <a href='http:\/\/Bangla.SaLearningSchool.com' target='new' rel=\"noopener\">http:\/\/Bangla.SaLearningSchool.com<\/a><br \/>\n\t\t<a href='http:\/\/SitesTree.com' target='new' rel=\"noopener\">http:\/\/SitesTree.com<\/a><br \/>\n\t\t8112223 Canada Inc.\/JustEtc: <a href='http:\/\/JustEtc.net' target='new' rel=\"noopener\">http:\/\/JustEtc.net (Software\/Web\/Mobile\/Big-Data\/Machine Learning) <\/a><br \/>\n\t\tShop Online: <a href='https:\/\/www.ShopForSoul.com'> https:\/\/www.ShopForSoul.com\/<\/a><br \/>\n\t\tMedium: <a href='https:\/\/medium.com\/@SayedAhmedCanada' target='new' rel=\"noopener\"> https:\/\/medium.com\/@SayedAhmedCanada <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Just some notes In HTML 4, the sections are not precise with tags like div unless you assign some styles to them. For defining sections, you do not need div tags but header tags (h1..h6) can imply sections. HTML4 is very imprecise on what a section is and what is it&#8217;s scope. In HTML5, section &hellip; <\/p>\n<p><a class=\"more-link btn\" href=\"http:\/\/bangla.sitestree.com\/?p=67494\">Continue reading<\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1917],"tags":[],"class_list":["post-67494","post","type-post","status-publish","format-standard","hentry","category-fromsitestree-com","item-wrap"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":6784,"url":"http:\/\/bangla.sitestree.com\/?p=6784","url_meta":{"origin":67494,"position":0},"title":"\u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 \u09b2\u09c7\u0986\u0989\u099f (HTML Layout)","author":"Author-Check- Article-or-Video","date":"March 31, 2015","format":false,"excerpt":"Md. Mursedul Islam Sumon Web Designer \u00a0 \u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 \u09b2\u09c7\u0986\u0989\u099f (HTML Layouts) \u09ac\u09bf\u09ad\u09bf\u09a8\u09cd\u09a8 \u0993\u09df\u09c7\u09ac\u09b8\u09be\u0987\u099f\u09c7 \u0985\u09a8\u09c7\u0995 \u09b8\u09ae\u09df\u0987 \u09b2\u0995\u09cd\u09b7\u09cd\u09af \u0995\u09b0\u09be \u09af\u09be\u09df \u09af\u09c7 \u09b2\u09bf\u0996\u09be\u0997\u09c1\u09b2\u09cb \u0995\u09df\u09c7\u0995\u099f\u09bf \u0995\u09b2\u09be\u09ae\u09c7 \u09ac\u09bf\u09ad\u0995\u09cd\u09a4 \u0995\u09b0\u09be \u09a5\u09be\u0995\u09c7\u0964 \u09af\u09c7\u09ae\u09a8, \u09ae\u09cd\u09af\u09be\u0997\u09be\u099c\u09bf\u09a8, \u09a8\u09bf\u0989\u099c\u09aa\u09c7\u09aa\u09be\u09b0 \u0987\u09a4\u09cd\u09af\u09be\u09a6\u09bf\u0964 HTML \u098f <div> tag \u098f\u09b0 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09c7 layout design \u09ac\u09be \u0995\u09b2\u09be\u09ae\u09c7 \u09ac\u09bf\u09ad\u0995\u09cd\u09a4 \u0995\u09b0\u09be \u09af\u09be\u09df\u0964 div element \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09c7 \u09aa\u09cd\u09b0\u09be\u09df layout \u0995\u09b0\u09be\u2026","rel":"","context":"In &quot;\u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 HTML&quot;","block_context":{"text":"\u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 HTML","link":"http:\/\/bangla.sitestree.com\/?cat=494"},"img":{"alt_text":"Table","src":"https:\/\/i0.wp.com\/bangla.salearningschool.com\/wp-content\/uploads\/2015\/03\/Table-300x204.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":6852,"url":"http:\/\/bangla.sitestree.com\/?p=6852","url_meta":{"origin":67494,"position":1},"title":"HTML5 \u098f \u09b0\u09c2\u09aa\u09be\u09a8\u09cd\u09a4\u09b0 (HTML5 Migration)","author":"Author-Check- Article-or-Video","date":"April 20, 2015","format":false,"excerpt":"HTML5 \u098f\u09b0 \u09a7\u09be\u09b0\u09ac\u09be\u09b9\u09bf\u0995 \u099f\u09bf\u0989\u099f\u09cb\u09b0\u09bf\u09df\u09be\u09b2\u09c7 \u0986\u09aa\u09a8\u09be\u0995\u09c7 \u09b8\u09cd\u09ac\u09be\u0997\u09a4\u09ae\u0964 \u0986\u099c \u0986\u09ae\u09b0\u09be \u0986\u09b2\u09cb\u099a\u09a8\u09be \u0995\u09b0\u09ac Migration from HTML4 to HTML5 \u09a8\u09bf\u09df\u09c7\u0964 \u0986\u099c \u0986\u09ae\u09b0\u09be \u09b6\u09bf\u0996\u09ac\u09cb \u0995\u09bf\u09ad\u09be\u09ac\u09c7 \u098f\u0995\u099f\u09bf typical HTML4 page \u0995\u09c7 typical HTML5 page \u098f \u09aa\u09b0\u09bf\u09a8\u09a4 \u0995\u09b0\u09be \u09af\u09be\u09df \u0986\u0997\u09c7\u09b0 \u09b8\u0995\u09b2 \u0995\u09bf\u099b\u09c1 \u0985\u09aa\u09b0\u09bf\u09ac\u09b0\u09cd\u09a4\u09bf\u09a4 \u09b0\u09c7\u0996\u09c7\u0964 \u00a0 Typical HTML4 Typical HTML5 <div id=\"header\"> <header> <div id=\"menu\"> <nav> <div id=\"content\">\u2026","rel":"","context":"In &quot;\u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 HTML&quot;","block_context":{"text":"\u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 HTML","link":"http:\/\/bangla.sitestree.com\/?cat=494"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6846,"url":"http:\/\/bangla.sitestree.com\/?p=6846","url_meta":{"origin":67494,"position":2},"title":"\u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 \u09eb \u09ac\u09cd\u09b0\u09be\u0989\u099c\u09be\u09b0 \u09b8\u09be\u09aa\u09cb\u09b0\u09cd\u099f (HTML5 Browser Support)","author":"Author-Check- Article-or-Video","date":"April 17, 2015","format":false,"excerpt":"\u09b6\u09b0\u09bf\u09ab\u09c1\u09b2 \u0987\u09b8\u09b2\u09be\u09ae Job category-Php Coder \u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 \u09eb \u09ac\u09cd\u09b0\u09be\u0989\u099c\u09be\u09b0 \u09b8\u09be\u09aa\u09cb\u09b0\u09cd\u099f \u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 \u09eb \u09b8\u0995\u09b2 \u0986\u09a7\u09c1\u09a8\u09bf\u0995 \u09ac\u09cd\u09b0\u09be\u0989\u099c\u09be\u09b0 \u09b8\u09be\u09aa\u09cb\u09b0\u09cd\u099f \u0995\u09b0\u09c7\u0964 \u09b8\u0995\u09b2 \u09a8\u09a4\u09c1\u09a8 \u098f\u09ac\u0982 \u09aa\u09c1\u09b0\u09be\u09a4\u09a8 \u09ac\u09cd\u09b0\u09be\u0989\u099c\u09be\u09b0 \u0985\u099f\u09cb\u09ae\u09c7\u099f\u09bf\u0995 \u09ad\u09be\u09ac\u09c7 \u0985\u099a\u09c7\u09a8\u09be elements \u0997\u09c1\u09b2\u09cb\u0995\u09c7 \u0987\u09a8\u09b2\u09be\u0987\u09a8 element \u09b9\u09bf\u09b8\u09c7\u09ac\u09c7 \u099a\u09bf\u09b9\u09cd\u09a8\u09bf\u09a4 \u0995\u09b0\u09c7\u0964 \u098f\u0987 \u0995\u09be\u09b0\u09a8\u09c7 \u0986\u09aa\u09a8\u09bf \u0985\u099a\u09c7\u09a8\u09be element \u0997\u09c1\u09b2\u09cb\u0995\u09c7 \u099a\u09bf\u09b9\u09cd\u09a8\u09bf\u09a4 \u09a8\u09bf\u09df\u09a8\u09cd\u09a4\u09cd\u09b0\u09a3 \u0995\u09b0\u09be\u09b0 \u099c\u09a8\u09cd\u09af \u09aa\u09c1\u09b0\u09be\u09a4\u09a8 \u09ac\u09cd\u09b0\u09be\u0989\u099c\u09be\u09b0 \u0997\u09c1\u09b2\u09cb \u09b6\u09bf\u0996\u09a4\u09c7 \u09aa\u09be\u09b0\u09c7\u09a8\u0964 \u0986\u09aa\u09a8\u09bf \u0985\u09a8\u09c7\u0995 \u0986\u0997\u09c7\u09b0 \u09ad\u09be\u09b0\u09cd\u09b8\u09a8\u2026","rel":"","context":"In &quot;\u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 HTML&quot;","block_context":{"text":"\u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 HTML","link":"http:\/\/bangla.sitestree.com\/?cat=494"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6850,"url":"http:\/\/bangla.sitestree.com\/?p=6850","url_meta":{"origin":67494,"position":3},"title":"HTML5 \u098f\u09b0 \u09b6\u09ac\u09cd\u09a6\u09be\u09b0\u09cd\u09a5\u09bf\u0995 \u0989\u09aa\u09be\u09a6\u09be\u09a8\u09b8\u09ae\u09c2\u09b9 (HTML5 Semantic Elements)","author":"Author-Check- Article-or-Video","date":"April 19, 2015","format":false,"excerpt":"HTML5 \u098f\u09b0 \u09a7\u09be\u09b0\u09ac\u09be\u09b9\u09bf\u0995 \u099f\u09bf\u0989\u099f\u09cb\u09b0\u09bf\u09df\u09be\u09b2\u09c7 \u0986\u09aa\u09a8\u09be\u0995\u09c7 \u09b8\u09cd\u09ac\u09be\u0997\u09a4\u09ae\u0964 \u0986\u099c \u0986\u09ae\u09b0\u09be \u0986\u09b2\u09cb\u099a\u09a8\u09be \u0995\u09b0\u09ac HTML5 Semantic Elements \u09a8\u09bf\u09df\u09c7\u0964 Semantics \u0995\u09c7 \u0986\u09ae\u09b0\u09be \u09ac\u09b2\u09a4\u09c7 \u09aa\u09be\u09b0\u09bf \u09ad\u09be\u09b7\u09be\u09b0 \u0985\u09b0\u09cd\u09a5 \u00a0\u09ac\u09bf\u09b7\u09af\u09bc\u0995 \u0997\u09ac\u09c7\u09b7\u09a3\u09be\u0964 \u098f\u0996\u09a8 \u09aa\u09cd\u09b0\u09b6\u09cd\u09a8 \u09b9\u09b2 Semantic Elements \u0995\u09bf? \u098f\u0995\u099f\u09bf Semantic Elements \u098f\u09b0 \u09aa\u09cd\u09b0\u09a7\u09be\u09a8 \u0995\u09be\u099c \u09b9\u09b2 \u09aa\u09b0\u09bf\u09b7\u09cd\u0995\u09be\u09b0\u09ad\u09be\u09ac\u09c7 \u09ac\u09cd\u09b0\u09be\u0989\u099c\u09be\u09b0 \u098f\u09ac\u0982 \u09a1\u09c7\u09ad\u09c7\u09b2\u09aa\u09be\u09b0 \u0989\u09ad\u09af\u09bc \u098f\u09b0 \u0985\u09b0\u09cd\u09a5 \u09ac\u09b0\u09cd\u09a3\u09a8\u09be \u0995\u09b0\u09be\u0964 non-semantic elements \u098f\u09b0 \u0989\u09a6\u09be\u09b9\u09b0\u09a3: <div>\u2026","rel":"","context":"In &quot;\u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 HTML&quot;","block_context":{"text":"\u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 HTML","link":"http:\/\/bangla.sitestree.com\/?cat=494"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6848,"url":"http:\/\/bangla.sitestree.com\/?p=6848","url_meta":{"origin":67494,"position":4},"title":"HTML5 \u098f\u09b0 \u09a8\u09a4\u09c1\u09a8 \u0989\u09aa\u09be\u09a6\u09be\u09a8 (HTML5 New Elements)","author":"Author-Check- Article-or-Video","date":"April 18, 2015","format":false,"excerpt":"\u09ae\u09be\u09b8\u09c1\u09a6 \u00a0 HTML5 New Elements \u0997\u09c1\u09b2\u09cb \u098f\u09ac\u0982 \u098f\u09a6\u09c7\u09b0 \u0995\u09be\u099c\u0997\u09c1\u09b2\u09cb \u09a8\u09bf\u09ae\u09cd\u09a8\u09c7 \u09a6\u09c7\u09df\u09be \u09b9\u09b2 <article> \u098f\u0995\u099f\u09be \u09a1\u0995\u09c1\u09ae\u09c7\u09a8\u09cd\u099f \u098f\u09b0 \u09ae\u09a7\u09cd\u09af\u09c7 \u0986\u09b0\u09cd\u099f\u09bf\u0995\u09c7\u09b2 \u09ac\u09cb\u099d\u09be\u09a4\u09c7 \u098f\u0987 Element \u09ac\u09cd\u09af\u09ac\u09b9\u09c3\u09a4 \u09b9\u09df\u0964 <aside> \u0995\u09cb\u09a8 \u0995\u09a8\u09cd\u099f\u09c7\u09a8\u09cd\u099f \u09af\u09a6\u09bf \u09aa\u09c7\u099c \u0995\u09a8\u09cd\u099f\u09c7\u09a8\u09cd\u099f \u098f\u09b0 \u09a5\u09c7\u0995\u09c7 \u0986\u09b2\u09be\u09a6\u09be \u09b9\u09df \u09a4\u09be\u09b9\u09b2\u09c7 \u09a4\u09be \u098f\u0987 Element \u09a6\u09cd\u09ac\u09be\u09b0\u09be \u09ac\u09cb\u099d\u09be\u09a8\u09cb \u09b9\u09df\u0964 <bdi> \u0995\u09a4\u0997\u09c1\u09b2\u09cb \u09ac\u09b0\u09cd\u09a8\u09c7\u09b0 \u09ae\u09a7\u09cd\u09af\u09c7 \u09af\u09a6\u09bf \u09a8\u09bf\u09b0\u09cd\u09a6\u09bf\u09b7\u09cd\u099f \u0995\u09a4\u0997\u09c1\u09b2\u09cb \u09ac\u09b0\u09cd\u09a8 \u0986\u09b2\u09be\u09a6\u09be \u09ab\u09b0\u09ae\u09c7\u099f\u09c7\u2026","rel":"","context":"In &quot;\u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 HTML&quot;","block_context":{"text":"\u098f\u0987\u099a\u099f\u09bf\u098f\u09ae\u098f\u09b2 HTML","link":"http:\/\/bangla.sitestree.com\/?cat=494"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20651,"url":"http:\/\/bangla.sitestree.com\/?p=20651","url_meta":{"origin":67494,"position":5},"title":"HTML 5 at a Glance","author":"Author-Check- Article-or-Video","date":"February 25, 2021","format":false,"excerpt":"HTML 5 at a Glance [ More HTML & CSS ][ More HTML & CSS ] By Sayed Ahmed on 2012-10-03 \u00a0 HTML 5 at a Glance HTML5 Server-Sent Events Servers can send upda tes automatically even if the client did not ask for it. For example, Facebook updates and\u2026","rel":"","context":"In &quot;FromSitesTree.com&quot;","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/posts\/67494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=67494"}],"version-history":[{"count":0,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/posts\/67494\/revisions"}],"wp:attachment":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=67494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=67494"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=67494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}