Over a million developers have joined DZone.

Examples Of Using New HTML5 Attributes

DZone's Guide to

Examples Of Using New HTML5 Attributes

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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 class="draggable-area" draggable="true">
Drag B this text
<div class="draggable-area" draggable="true">
Drag C this text

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







Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}