HTML5: How to Use &ltDETAILS&gt and &ltSUMMARY&gt Tags

HTML5: How to Use &ltDETAILS&gt and &ltSUMMARY&gt Tags

kianleong . Posted in Miscellaneous 7

This article is part of our “HTML5/CSS3 Tutorials series&quot – committed to help make you a far better designer and/or developer. Click right here to see far more articles from the same series.

Amongst many new tags that are available in HTML5, Specifications (such as: figure, figcaption, and aside), detail and summary tags, in my opinion, are the most beneficial. With these new tags you can hide some of the lengthy content and display only the summary.

post cover details HTML5: How to Use &ltDETAILS&gt and &ltSUMMARY&gt Tags

We really typically see this impact around, but most of them are nonetheless built upon JavaScript or its brother: jQuery, which most people don’t realize. Now, with these new elements &ndash particulars and summary &ndash factors will get easier.

So, let’s see how tags function in a real case scenario.

In this demo we are going to summarize a item description. Initial let’s create a ‘details’ tag and then put all the content material along with the ‘summary’ tag inside it, like in the example beneath:

 &ltsummary&gtMacBook Pro Specification&lt/summary&gt
 &ltli&gt&ltstrong&gt13.three-inch LED-backlit glossy widescreen display&lt/sturdy&gt with edge-to-edge, uninterrupted glass (1280 x 800-pixel resolution).&lt/li&gt
 &ltli&gt&ltstrong&gt2.4 GHz Intel Core i5 dual-core processor&lt/strong&gt with three MB shared L3 cache for superb multitasking.&lt/li&gt
 &ltli&gt&ltstrong&gtIntel HD Graphics 3000&lt/powerful&gt with 384 MB of DDR3 SDRAM shared with principal memory.&lt/li&gt
 &ltli&gt&ltstrong&gt500 GB Serial ATA hard drive&lt/sturdy&gt (5400 RPM)&lt/li&gt
 &ltli&gt&ltstrong&gt4 GB installed RAM&lt/powerful&gt (1333 MHz DDR3 supports up to 8 GB)&lt/li&gt

In that instance, I’ve added MacBook Pro specification detail, and now let’s see how the browser renders these tags.

details demo ch HTML5: How to Use &ltDETAILS&gt and &ltSUMMARY&gt Tags

I also have added a title and far more descriptions of the item above the details to make the above demo much more sensible to you. So, what do you believe? It’s rather simple, proper?

Browser Supports

Nonetheless, prior to you rush to apply this tag to your complete internet site, it must be noted that the facts and summary tag is at the moment only supported on Chrome 12 and above.

Even the latest Firefox doesn’t assistance them but.

details demo ff12 HTML5: How to Use &ltDETAILS&gt and &ltSUMMARY&gt Tags

So, if you want to apply this tag, you need to have to contain a fallback function for unsupported browsers. The good news it, it’s straightforward you can use this facts polyfill, which will automatically replicate the tag functionality for old browsers.

Download this file and link it to the html document along with the jQuery (1.7+ at minimum) and make certain you place the polyfill just before the close physique tag.

And inside the head tag, insert the following conditional tag to incorporate HTML5shiv for IE8 and earlier, otherwise the Net Explorer will not recognize these new tags.

&lt!--[if lt IE 9]&gt&ltscript src=""&gt&lt/script&gt&lt![endif]--&gt

Now let’s see how it turns out in Web Explorer:

details demo ie8 HTML5: How to Use &ltDETAILS&gt and &ltSUMMARY&gt Tags

And it now performs on Internet Explorer as well.

  • Demo
  • Download Supply


Making such a hide-and-show impact with JavaScript or jQuery is in fact relatively easy, but having it natively supported from the browser is certainly a significantly less complicated resolution for numerous folks. Whether or not you want to do it in JavaScript or in HTML5, it’s your decision. Thanks for reading, and I hope you enjoyed it.

Related posts:

  1. HTML5 Template Generators, Frameworks And Tools
  2. HTML5-Powered Web Applications: 19 Early Adopters
  3. How to Generate An Ajax-Based HTML5/CSS3 Make contact with Form
  4. Beginner’s Guide To: Building HTML5/CSS3 Webpages