Knowing few simple, but effective HTML tricks can make your website really stand out. We will go through some of them, that could really prove to be useful in your web development career.
1. Color Picker
The Color Picker will let your users choose what color they want from a palette, without the need to enter a color code.
To create Color Picker, we need to create an input field, with property type of color:
2. Editable Content
Did you know that you can allow your website users to edit the code on your website, with just one HTML command?
It is that simple, and it really can be a neat and effective trick.
You just need to set the contenteditable attribute to true, on whatever element you wish to have that functionality.
<p contenteditable="true"> This part of text can be edited by the user. </p>
3. Voice Recognition
Yes, HTML can do this too. With a simple HTML command, you are able to add a voice recognition property for website users.
A microphone icon will show right next to input bar.
Please be aware that this is for now only available in Google Chrome for mobile devices.
<input type="text" x-webkit-speech />
4. Tool Tip
In HTML you can make a simple tool tip, just by using the span tag.
Tool tips are the that little part of text, which is displayed when we hover over an element. It is used to provide additional information to the user.
<span title="This is a Tool Tip">Hover over the text and wait to see a Tool Tip</span>
5. Input Suggestions
This option basically provides a drop-down list of pre-defined options for users to pick. This makes it much easier for the visitors to find what they’re looking for when searching the website.
For this purpose, we use datalist tag, followed by option tags for suggestions. Also, input tag should refer the list with list property.
<input type="text" list="suggestions"> <datalist id="suggestions"> <option value="Blue"></option> <option value="Green"></option> <option value="Red"></option> <option value="Black"></option> <option value="Pink"></option> </datalist>
HTML5 upgraded functionality as the new HTML standard, and it posses many new options that can improve browsing experience. To learn more about the difference between basic HTML and HTML5 version, please read the post Difference between HTML5 and HTML.