3 hidden HTML tips — First published in fullweb.io issue #61
1. Click label to auto-focus on input:
A big plus for a good UX that all modern browsers support. Note that the pairing happens between the label’s for attribute and the input’s id attribute, not its name.
<label for="username">Fiscal Year</label> <input type="name" name="username" id="username" />
2. Allow line breaks where it make sense:
You can control where the browser add a line break when its window is too narrow for its content. The tag to use is .
Another trick is using the HTML entity
­ to tell where to break the words.
Nothing will be shown if no line break is needed, but a linking hyphen
- will be shown otherwise:
3. Use protocol independent URLs:
This is a best practice to avoid the ugly "This page contains both secure and non-secure content" warning. This happens when your HTTPS hosted page links to non-HTTPS resources (image, script, css, font, etc).