HTML5 new features introduction – part2
HTML5 new features introduction – part2
In last article we looked HTML5 new features introduction, In this and coming articles we will explore HTML5 new articles in more detail.
If you are already familiar with Web development then you may have worked on “Accordian”. Accordian are the panels that are used to display collapse able content when we have limited space on web page. See the example here.
In HTML5 there are some new elements introduced. these are
<detail> and <summary> elements
image from edx.
Syntax:
<details>
<summary>
This is heading of collapsable content
</summary>
<p> This is hidden content</p>
</details>
<details> element will generate a widget to show or hide the contents of element, by clicking on its child <summary> element. Following is the full code.
<!DOCTYPE html>
<html>
<body>
<details>
<summary>
Heading of Content
</summary>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque
elit sit amet sollicitudin ultrices. Etiam leo odio, tempus et orci convallis, tincidunt maximus nisl.
Duis vulputate interdum tellus, lobortis viverra ipsum consequat non. Suspendisse sit amet
enim non purus hendrerit dictum sit amet at purus. Morbi id arcu sem.. </p>
</details>
</body>
</html>
We can use detail / summary element inside another detail /summary element.
<details>
<summary>
Outer Heading
</summary>
<p>Outer Heading</p>
<details>
<summary>
Inner Heading
</summary>
<p>Inner Content</p>
</details>
</details>
Support for this element till Feb 2015 in different browsers is as shown in the figure.
Latest and up to date version can be found at http://caniuse.com/#feat=details
In next article we would look into more HTML5 elements and attributes.
About Author
maz
Maz is a software engineer, and a Zend Certified Engineer . His area of expertise contains PHP /Mysql, Node JS / MongoDB, Angular JS, IOS and android.
No Responses