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&shy;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>