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
andrange
. These will fallback to input typetext
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. - 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 thesummary
tag. Older browsers will just ignore both, while newer-ones will display a collapse widget.Meter 50% Progress - 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 thevalue
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 thenumber
andrange
input mentioned above.
Quick Example
This is boring stuff that should be hidden away by default
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.