{"id":32255,"date":"2017-08-30T03:01:16","date_gmt":"2017-08-29T17:01:16","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=32255"},"modified":"2017-08-18T16:33:34","modified_gmt":"2017-08-18T06:33:34","slug":"html5-details-summary-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-details-summary-primer-tutorial\/","title":{"rendered":"HTML5 Details Summary Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/details_summary.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML5 Details Summary Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/details_summary.jpg\" title=\"HTML5 Details Summary Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML5 Details Summary Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s &#8220;proof of concept&#8221; web application features two HTML element types new to when HTML5 came into the picture, namely &#8230;<\/p>\n<ul>\n<li>details tag &#8230; and &#8230;<\/li>\n<li>summary tag<\/li>\n<\/ul>\n<p> &#8230; and wished, now, that I&#8217;d looked earlier on into these two HTML(5) element types. <a target=_blank title='Huh?' href=\"http:\/\/www.cracked.com\/article_21728_5-eerily-specific-things-every-human-does-exactly-same.html#entry-1-article-21728\">Huh?<\/a>  Well, we personally find &#8220;our foot in the door&#8221; of the way to explain a lot of webpage design, the two concepts &#8230;<\/p>\n<ul>\n<li>overlay &#8230; and &#8230;<\/li>\n<li><b>reveal<\/b><\/li>\n<\/ul>\n<p> &#8230; and the use of HTML(5) <b>details<\/b> and <b>summary<\/b> represents the essence of <b>reveal<\/b>.  It&#8217;s great to have a method just using HTML(5) code that does what we&#8217;ve, in the past, needed Javascript for, just there ready in the language for you to use.  For another similar scenario, check out <a target=_blank title='HTML\/CSS\/Javascript Sliding Menus Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmlcssjavascript-sliding-menus-primer-tutorial\/'>HTML\/CSS\/Javascript Sliding Menus Primer Tutorial<\/a>, compare notes, and think you can imagine the <b>details<\/b> and <b>summary<\/b> comparing quite favourably.<\/p>\n<p>So what&#8217;s the &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/details_summary.html\" title='Click picture'>web application<\/a> today, about?  We found <i>a list<\/i> <font size=1>&#8230; fancy that?! &#8230;<\/font> on the Internet <font size=1>&#8230; of all things?! &#8230;<\/font> on the theme of &#8220;favourite famous quotations <font size=1>&#8230; you don&#8217;t say?! &#8230;<\/font> <font size=2>&#8230; well, actually I didn&#8217;t say! &#8230;<\/font> <font size=1>&#8230; you didn&#8217;t?! &#8230;<\/font> <font size=2>&#8230; well, no, I didn&#8217;t, act-u-al-ly! &#8230;<\/font> <font size=1>&#8230; you could have knocked me down with a feather &#8230;<\/font> <font size=2>&#8230; you <i>listing<\/i> too (boom, boom) &#8230;<\/font> but we digress.<\/p>\n<p>Here&#8217;s that HTML(5) <b>details<\/b> and <b>summary<\/b> driven <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/details_summary.html_GETME\" title='details_summary.html'>details_summary.html<\/a> source code, for your perusal.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d32255' onclick='var dv=document.getElementById(\"d32255\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/html5\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32255' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s &#8220;proof of concept&#8221; web application features two HTML element types new to when HTML5 came into the picture, namely &#8230; details tag &#8230; and &#8230; summary tag &#8230; and wished, now, that I&#8217;d looked earlier on into these two &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-details-summary-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[2310,576,578,997,1063,2311,1319],"class_list":["post-32255","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-details","tag-html","tag-html5","tag-programming","tag-reveal","tag-summary","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32255"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=32255"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32255\/revisions"}],"predecessor-version":[{"id":32257,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32255\/revisions\/32257"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=32255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=32255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=32255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}