Measurable Success «10 Checkpoints for Future-Proof Enterprise CMS» White Paper
Measurable Success - White Paper

Obscure HTML 5 Features That May Make Your Day

Stumbling into one of those popular, so called “cyber cafès” means that nowadays you will probably find tables occupied by hipster-like web designers, delighting themselves into glorifying the moment when they embraced SASS, React.js, jQuery, Node JS, Ember, Bootstrap, Angular and others. Well, let them go on all they want as these HTML 5 features are sure to make them sit up and pay attention FAST.


Hiding an element

HTML attributes are a part of the original specification, but in the new HTML 5 there are some interesting ones, of which the shining star is probably placeholder. Many others were overlooked, like hidden for example. As the name implies, its purpose is to hide an element, and it behaves pretty much like the CSS property display: none; it is not rendered on the page, but any script inside it will be triggered. Being an inline attribute, it will work even if the CSS is disabled so, although most of the time the CSS version is preferable, it can still be handy in certain situations. 

<section class=”optional” hidden> … </section>

Nicer names for our downloads

It is quite typical, on a large website, to have a lot of documents available for download but, since they are likely generated by a database, their names are quite long and meaningless. With the aid of the download inline attribute we may define a different (and hopefully, more meaningful) name for the downloaded file. 

<a href="/files/adlafjlxjewfasd89asd8f-rr135.pdf" download="report.pdf">Download File</a>

Set up the focus

Another inline attribute that won’t drastically change your website but can be a nice finishing touch is autofocus. When put in a form element, this element will have a predefined focus when the page is loaded.

<input type=”tel” name=”MainTel” autofocus>+49 0152 1234567

Add categories to your dropdowns

The select form element has always been the most stubborn, almost impossible to style without the aid of JavaScript libraries, but the new HTML 5 optgroup element comes to our aid. Wrapping the option values inside an optgroup creates indented categories. 

<label for="showtimes">Car brand by country</label>
<select id="showtimes" name="showtimes"> 
  <optgroup label="Germany"> 
    <option value="audi">Audi</option> 
    <option value="bmw">BMW</option>
  </optgroup>
  <optgroup label="Italy"> 
    <option value="alfaromeo">Alfa Romeo</option> 
    <option value="fiat">FIAT</option>
  </optgroup>
  <optgroup label="France"> 
    <option value="citroen">Citroën</option> 
    <option value="renault">Renault</option>
  </optgroup>
</select>

If you like autocomplete, you will love datalist

Autocomplete is one of the nicest add-ons for every form, but it works only with JavaScript; if we want to have a quick in-house solution we can use the datalist tag. Its syntax is similar to a select element, it needs an ID that is used as a reference where we need to provide the datalist. 

<datalist id="phoneModels">
	<option value="iPhone 6s">
	<option value="iPhone 7">
	<option value="Galaxy S8">
	<option value="LG G6">
	<option value="Motorola Moto Z">
</datalist>
<input name="phoneList" list="phoneModels" />
Unfortunately, datalist has a bad downside: it’s poorly supported. It is not supported by Safari (mobile version also), and on IE it is so buggy that it is practically unusable. But don’t despair; things may change quickly.


Mind your spelling, please

Let’s start with saying that we are going to talk about a very well supported attribute; spellcheck is recognized by basically all browsers, starting from IE 10. As its name suggests, it enables spellchecking on a text element like input or textarea. It requires a value that must be true or false.

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

Text highlighting made easy

Highlighting text has been always present in web design and it’s pretty easy to achieve with a span, but the new mark element makes things even a bit easier. Background and text color can be set via CSS and, compared to a standard span, in some cases you can save the use of a class. And it’s definitely a more semantic (and widely supported) element.

Forms too now have their target

HTML links can be opened in the same window or in a new blank one if we set the target attribute, and now we have something similar for forms. The attribute formtarget allows us to control the output of our forms. It accepts the following values: _blank (form opens in a new page), _self (form opens in the same frame; this is default value), _parent (form loads in the parent frame), _top (form is displayed at the top level of the displayed frames), framename (the form opens in the named frame).

HTML 5 has been out for quite a while now and it’s still gifting us small surprises. The greatest killer features have been exposed long ago, but in this article we have covered a lot of small, but nevertheless nice features that may give a feeling of care and refinement to your website. Often the thin line that divides a standard website from an outstanding one, runs just on small details.

Ready to start? Create your free account now