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>
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>
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
<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>
<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" />
datalisthas 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.
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
textarea. It requires a value that must be
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.
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.