Not so popular HTML5 attributes

HTML5 offers many new attributes that make our lives easier and our code more semantic. In many cases they even provide functionality that we used to implement with javascript, like the placeholder attribute. I’m pretty sure you all know the placeholder attribute, but what about the following ones?

hidden attribute

The hidden attribute, as you can easily guess, hides the element that it is set on. It acts almost identical to style { display: none; }, but it’s simpler, cleaner and more semantic (since you are hiding the element directly on DOM rather than style). It is also ridiculously easy to make a fallback on browsers that do not support the specific attribute, just hide it in your styles ( { display: none; } ) or javascript…

See the Pen Not so popular HTML5 attributes : hidden attribute by John Tsevdos (@tsevdos) on CodePen

download attribute

Do you have downloadable content in your website (like PDF files etc)? If yes then with a little HTML5 attribute you can provide better semantics to the link element, give a better description/title to your file and enforce the browser to download it! Just use the download attribute followed by a string that represents the description/title of your download. Even if your filename is a timestamp or a temp name, the user will download the file,  having as its name the title you used.

See the Pen Not so popular HTML5 attributes : download attribute by John Tsevdos (@tsevdos) on CodePen

autofocus attribute

Finally with the autofocus attribute you can autofocus any input, textarea or button you want. Simple as that.

See the Pen Not so popular HTML5 attributes : autofocus attribute by John Tsevdos (@tsevdos) on CodePen

To conclude, whenever possible, try to use the new HTML5 attributes. They will always be more semantically correct and it’s super easy to implement them. Also, most of them have very simple fallbacks but even if you don’t provide any, most of the time you won’t break something, so you don’t have any excuse.

Mobile Webkit form tips

One of the things I really hate when I surf from a tablet/phone browser (usually my iPad/iPhone) is filling in forms. I know, the lack of a physical keyboard sucks big time, but it’s not just that. Most web developers out there don’t give the appropriate attention when they develop web forms, and the combination of both these things can literally destroy the good will of a user who’s trying to fill in the form. The use of some very basic attributes can change the above situation dramatically. You don’t believe me? Well have a look…

Keyboard Layout

One of the most important and easy fixes is to provide the correct keyboard layout. Well that’s super easy, just use the appropriate HTML5 input type. You’ll make many tablet/mobile users happier!

See the Pen Mobile Webkit form tips : Keyboard Layout by John Tsevdos (@tsevdos) on CodePen

Autocorrect and AutoCapitalize

OK, let’s admit it, autocorrect is a cool feature when writing an e-mail, but it’s probably the worst one when you try to write your username (and iOS is correcting it over and over again). The exact same issue is caused with the autocapitalization. Well, nothing to worry about. Just use the below attributes to turn on and off the features from the elements you want. Now you’re in control of things 😉

See the Pen Mobile Webkit form tips : Keyboard Layout by John Tsevdos (@tsevdos) on CodePen

Please try not to be lazy when you build forms, you might save a tablet/phone user’s time and sanity!

The above markup works fine on Android devices as well (and probably on Windows Phones), although I only test them on iOS iPhone/iPad devices…