2 HTML5 Elements that will Make Your Code Interective

1. HTML5  <details> Elements

This is one of the interactive elements introduced in HTML5. This element allows users to view additional information.

<summary>Some summary text</summary> 
<p>Some details text</p> 

HTML details element includes a summary element as its first child that is followed by flow content.

Attributes : Accepts Global attributes

The Boolean attribute <open> adds visibility to the content.

<details open> 
<summary>Some open summary text</summary> 
<p>Some details text</p> 

2. HTML 5 <datalist>  Element

HTML5 <datalist> element allows users to select an option from a predefined dropdown-list. It includes the option element to specify value of the dropdown-list.

<datalist id="some-id"> 
<option value="Value One"> 
<option value="Value Two"> 

Attributes :  Accepts Global attributes

<id> attribute is used to specify <datalist> element
<list> and <name> attribute within input element

<input list="somelist" name="listname"> 
<datalist id="somelist"> 
<option value="Value One"> 
<option value="Value Two"> 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s