HTML Tips: Some useful tricks available in HTML5

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

Warning: this post is old and might not reflect the current state of the art.

Autofocus

<input autofocus="autofocus" /> will put the focus on the specified HTML element when the page loads.

Downloading files

<a href="file.pdf" download="pdf-file">Download</a> will download the specified file with the name provided.

Hide elements

<div hidden="hidden"></div> is presentation in the HTML, which is not ideal, but it can sometimes turn out useful.

Turning off (or on) spellchecking

Operating systems configured to spell-check everything a user types can sometimes get in the way; <input type="text" spellcheck="true|false"> can help.

Autosuggestion text input control

<input list="mylist" name="mylist" />
<datalist id="mylist">
  <option value="CSS"></option>
  <option value="HTML"></option>
  <option value="PHP"></option>
  <option value="jQuery"></option>
  <option value="WordPress"></option>
</datalist>

Lessons in this unit:

0:	Introduction
1:	Preserving white space and line breaks in a string in HTML
2:	HTML, avoid displaying a broken image if the image is not found
3:	The HTML figure tag
4:	Change image source in dark mode
5:	Accept only images in file input
6:	HTML comments
7:	▶︎ Some useful tricks available in HTML5
8:	How to make an hr invisible
9:	Conditionally set an HTML attribute
10:	An HTML element id is a global variable