HTML5 for old-school coders

HTML has gone a long way since it was just a page description language, served either from static files or a CGI script. Still a lot of software engineers use it in exactly that way, disregarding most of the recent changes in the language and sticking to a minimal set of features. This makes a lot of sense when building simple tools: by only relying on the basics, one is sure to have something that runs fine on every device, be it the lynx browser or a weakly powered phone.

Version 5 of HTML is now becoming quite stable, and the good news is, there are quite a few features that can be used when doing minimal web-interfaces, feature that do not require any javascript, and who fail gracefully in older browsers.

New form input types
Forms now support new input types: email, url, search, number and range. These will fallback to input type text on older browsers, but on newer ones, in particular on mobile phones and tablet, these will display different, specialised inputs. For some types (number in particular) desktop clients also do additional checks, for instance that the number falls within a specified range.
Placeholder attribute
Input control in forms now support a placeholder attribute which adds a greyed placeholder in the form, a good way to give an example to the user. Older browser will just ignore this attribute.
Quick Example

This is boring stuff that should be hidden away by default

Details & summary
HTML5 provides tags that let you collapse some part of the page that contains details, to only show the summary. Just enclose the whole block of text in the details tag and the summary in the summary tag. Older browsers will just ignore both, while newer-ones will display a collapse widget.

Meter 50%
Progress 50%
Meter and Progress
Do you want to display some gauge or some progress bar? There are tags for this. You specify the min, max and the value attribute, and put the fallback display text within the open and closing tags. Older browsers will show the fallback text (say 50%) while the newer ones display the gauge or progress bar. Note that those attributes (min and max) are also supported by the number and range input mentioned above.

Of course, there is a lot more involved in HTML5, but if you just do old-style HTML coding, these are the ones you can use without thinking about Javascript or complex document description.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: