HTML5: How to Use <DETAILS> and <SUMMARY> TagsDisclaimer : Articles are taken from various sources URL , Credits are to those sources listed in SOURCES page =)
Amongst many new tags that are available in HTML5, Specifications (such as:
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.
summary &ndash factors will get easier.
So, let’s see how tags function in a real case scenario.
Advised Reading: Newbie’s Guide To: Developing HTML5/CSS3 Webpages
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:
<details> <summary>MacBook Pro Specification</summary> <ul> <li><strong>13.three-inch LED-backlit glossy widescreen display</sturdy> with edge-to-edge, uninterrupted glass (1280 x 800-pixel resolution).</li> <li><strong>2.4 GHz Intel Core i5 dual-core processor</strong> with three MB shared L3 cache for superb multitasking.</li> <li><strong>Intel HD Graphics 3000</powerful> with 384 MB of DDR3 SDRAM shared with principal memory.</li> <li><strong>500 GB Serial ATA hard drive</sturdy> (5400 RPM)</li> <li><strong>4 GB installed RAM</powerful> (1333 MHz DDR3 supports up to 8 GB)</li> </ul> </specifics>
In that instance, I’ve added MacBook Pro specification detail, and now let’s see how the browser renders these 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?
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.
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.
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
Now let’s see how it turns out in Web Explorer:
And it now performs on Internet Explorer as well.
- Download Supply
- HTML5 Template Generators, Frameworks And Tools
- HTML5-Powered Web Applications: 19 Early Adopters
- How to Generate An Ajax-Based HTML5/CSS3 Make contact with Form
- Beginner’s Guide To: Building HTML5/CSS3 Webpages
Disclaimer : Articles are taken from various sources URL , Credits are to those sources listed in SOURCES page =)