HTML5 Zone is brought to you in partnership with:

Paulund is a website dedicated to writing tutorials and code snippets about Web Development, the main subjects are PHP, Wordpress, jQuery, CSS3 and HTML5. Paul is a DZone MVB and is not an employee of DZone and has posted 134 posts at DZone. You can read more from them at their website. View Full User Profile

Examples Of Using New HTML5 Attributes

10.25.2012
| 4354 views |
  • submit to reddit

There are many additional features that come with HTML5 such as the HTML5 attribute placeholder and required.

Hidden Attribute

The hidden attribute can be used on any element it hides the element which has this attribute.

It's the same as doing,

display: none;

The difference is that it more semantic to place a hidden attribute on an element than styling the element with a display: none;

<input type=text name=hidden_field hidden />

If your browser doesn't support the HTML5 hidden attribute then you can use the fallback in your CSS file.

*[hidden] { display: none; }

Spellcheck Attribute

The spellcheck attribute does a client side spellcheck of the text the user enters inside a textbox or a textarea.

Currently spellcheck is supported on:

  • Firefox 3
  • Opera 9
  • Safari 3
  • Chrome

The value of the spellcheck attribute can be either true or false. Setting the value to true will use the default browser spellchecker, if set to false you are turning off the default browser spellchecker.

<textarea spellcheck="true"></textarea>
<textarea spellcheck="false"></textarea>

Download Attribute

The download attribute can be used on a link to define the name of the file which is downloaded. This is really useful if you have a file from a datasource which has a querystring on the end, you can assign the download attribute to the link so that when the user downloads the image it can be named something more user friendly.

<a href="download-text.txt?date=1234567890" download="download-name.jpg" class="download-button">Download Button</a>

As you can see from the download-text.txt has a querystring and this will be added to the filename when you download it. But when you add the download attribute the file name will be stored as the value in the download attribute.

The download attribute also defines this link as you intend it to be used to download a file.

Draggable Attribute

The HTML5 draggable attribute is a value you give to the element to make it draggable in the browser. This can be added to many elements including images, if you have a input type of file on the page at the same time you can drag images into the upload input.

The value of the draggable attribute can be either true or false. The default is false so you only need to use this value when turning off the ability to drag the element.

<div class="draggable-area" draggable="true">
Drag A this text
</div>
<div class="draggable-area" draggable="true">
Drag B this text
</div>
<div class="draggable-area" draggable="true">
Drag C this text
</div>

View the demo page to see some of these attributes in action.

Demo

 

 

 

 

 

Published at DZone with permission of Paul Underwood, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)