UI/UX Design

Some HTML5 attributes you should start using

HTML5 is without doubt one of the greatest things that happen for web. Functionalities that were done with Javascript or Flash in the past (form validation, hidden elements etc…) can be achieved only by using HTML now.

In this post I will show you some HTML5 attributes you might not know and should start using.

Hidden attribute

You don’t need to hide HTML elements with css anymore. All you need to do is to add the hidden attribute.

  
  

<div hidden>
  Some content....
</div>

  

 

This attribute is supported by: Chrome, Firefox 4.0, IE11, Opera and Safari.
If you want to support other browsers you can easily add this line of CSS.

  
  
*[hidden] { display: none; }
  

 

Autofocus attribute

The autofocus attribute is a boolean attribute. When present, it specifies that an element should automatically get focus when the page loads. Unfortunately this attribute doesn’t seem to work for some tags like the headers.

  
  
<input type="text" autofocus/>
  

 

Download attribute

The download attribute specifies that the target will be downloaded when a user clicks on the hyperlink.

This attribute is only used if the href attribute is set.

The value of the attribute will be the name of the downloaded file. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).

If the value is omitted, the original filename is used. The advantage of this attribute is that you have avoided few lines of Javascript coding and it’s simple to use.

  
  
<!-- will download as "newDoc.pdf" -->
<a href="someDoc.pdf" download="newDoc.pdf">Download link</a>
  

 

Placeholder attribute

The placeholder attribute specifies a short hint that describes the expected value of an input field. The short hint is displayed in the input field before the user enters a value.

  
  
<input type="text" name="name" placeholder="Name">
  

 

Pattern attribute

The pattern attribute specifies a regular expression that the input element’s value is checked against.

  
  
<input type="text" pattern="[A-Za-z]{4,10}">
  

If you’re moderately familiar with regular expressions, you’ll be aware that this pattern: [A-Za-z]{4,10} accepts only upper and lowercase letters. This string must also have a minimum of four characters, and a maximum of ten.

 

Data Attribute

We now officially have support for custom attributes within all HTML elements.
The data attributes are used to store custom data private to the page or application and gives us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can then be used in the page’s JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).

The data attributes consist of two parts:

– The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix “data-”

– The attribute value can be any string

  
  
<div id="customDiv" data-name="Andy">My Name</div>
  

 
 
Certain features of HTML5 are not supported on all web browsers. In such cases, you will have to write a fallback code.

Andy

UI/UX Designer & Front-end Engineer based in Dublin currently working @IBM.
I write about: UI/UX Design, Javascript, HTML, CSS, React JS and React Native

Add comment