3 HTML5 Attributes That You Should Be Using Right Now

Did you know that you can add a contenteditable attribute to almost any HTML5 tag? The attribute has two possible values – true or false. If you set the attribute to true then your users would be able to edit the content inside various different elements. You can then hook event listeners to save what they have edited and so on. You can add the attribute to almost any HTML5 tag.

Here is an example of how you can use it:

 

1 2 3

<ol contenteditable="true"> <li>Edit me!</li> </ol>

Adding the attribute to an ordered list allows users to create a new list item by pressing the Enter key.

Here is how we have edited the initial ordered list and added a few more list items. You can see how easy it would be to implement a to-do list with this attribute.

Now, let me show you another useful thing you can do with it:

You can add a style property to your document, set its display CSS property to block so that it would be visible on the page and set the contenteditable property to true. This would enable users to edit the rules in that style property as they wish and see the changes.

 

1 2 3 4 5 6 7

<style style="display: block;" contenteditable="true"> ol li { background-color: #f04124; color: #eee; }   </style>

We can just edit the background color of the list items to be green and the changes would be applied to the selected elements.

The title attribute

The title attribute can be used with most elements in HTML5 and it can prove quite useful. Most browsers display it by providing a tooltip whenever the user hovers over the element that has a title attribute set. Thus, you can use it as a tooltip to provide additional information about the element.

For example, you can use with an image:

 

1	<img src="https://mmohuts.com/wp-content/uploads/2015/03/Smite_604x423.jpg" title="Try out Smite, it's fun!" alt="">

Now, whenever the users hover over our image, he will see the additional information in a tooltip (hopefully)

You can even add the tooltip to ordinary paragraphs:

 

1	<p title="Hello World is a project with which people new to programming start">Hello World</p>

 

The placeholder attribute

When you are working with forms and inputs, it might be a good idea to add a placeholder as it is widely supported by 90.55% of the Internet users and nobody will lose if the user does not support it.
The placeholder attribute allows you to add additional information to an input when the input does not have any value and is empty.

Whenever the user starts writing in the input, the placeholder’s value will disappear. People often make the mistake of writing things like username, password as a value to the placeholder attribute. However, you should be aware that your input should already have a label which states what needs to be written there. Therefore, it is better if you write a placeholder which gives an example of valid input, such as an example of a good username, password, email and so on.

You can use the placeholder attribute in the following way:

 

1 2	<label for="username">Username: </label> <input name="username" id="username" placeholder="john.doe" type="text">

 

 

 

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: https://www.dimoff.biz. facebook, twitter

Article source: https://www.phpgang.com/3-html5-attributes-that-you-should-be-using-right-now_2953.html