3 hidden HTML tips
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 .
<div>Lebensabschnitt<wbr>partner</div>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:
<div>Lebensabschnitt­partner</div> 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).
<script src="//domain.com/foo.js"></script>