Coding Newbie

top 5 html tricks

Top 5 Simple HTML Tricks That You Must Know

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

This is a great little trick that can be extremely beneficial if you need to create an interaction with your website users, but without using JavaScript. And it is quite cool!

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:

<input type="color">
html tricks color picker
We have easily created color picker for use.

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>
html tool tip
Tool Tip is display on hover.

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>
html input suggestion
When we click on input field, we get a drop-down list with suggestions.

Conclusion

These are just some HTML tricks you can use to easily have additional functionality on your website, without the need to implement JavaScript code or any other coding language.

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.

Leave a Comment

Your email address will not be published.

%d bloggers like this: