Tuesday, April 12, 2016

What does the DETAILS tag do in HTML5?

Just as it says, when you click on Details tag (which appears as right-pointing triangle) in the displayed web page, the contents of the details are revealed.

Unfortunately it is not yet supported in Microsoft Edge or Mozilla Firefox although it is a html 5 standard. More on this here: http://hodentek.blogspot.com/2015/12/firefox-42-has-slight-edge-over.html and here.


Details_Edge


Details_Firefox

However it is supported on Chrome browsers version 12 and above. By the way it is also supported in the Intel XDK's emulators. However, when the code is run on the device, it is up to the browser of the device to render it or not.
The next picture shows how the tag would appear on a rendered page on an emulator in Intel XDK, as rendered as well as when the tag is clicked. This interactivity does not require any extra code.



However, Windows 10 Phone does not render the tag at all. It just displays the content and the iPhone6 does show the Details (but it is not interactive, probably a separate reason why it does not).

No comments: