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.
- New form input types
- Forms now support new input types:
range. These will fallback to input type
texton 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
placeholderattribute 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
detailstag and the summary in the
summarytag. 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
valueattribute, 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
rangeinput mentioned above.
This is boring stuff that should be hidden away by default