DEV Community

Omid Pishkar
Omid Pishkar

Posted on

Top Attributes or tags in HTML5

In this post i want introduce to you some top attribute and element in html5.

1. type='color' attribute

With this attribute you can allow the user to select a color.

<input type="color">
Enter fullscreen mode Exit fullscreen mode

2. 'dfn' element

With this element you can put a description for the text or content inside dfn.

<p><dfn>Omid Pishkar</dfn>author</p>
Enter fullscreen mode Exit fullscreen mode

3. 'contenteditable' attribute

whit this attribute in any element you are able to specify whether the content is viewable or not.

<p contenteditable='true'>I'm a front end developer</p>
Enter fullscreen mode Exit fullscreen mode

4. 'spellcheck' attribute

This attribute corrects the content of your element in terms of spelling.

<textarea spellcheck='true'>hollo</textarea>
Enter fullscreen mode Exit fullscreen mode

5. 'download' attribute

If the user clicks on an element that has this attribute, the user can download it.

<img src='./img/img1.png' download>
Enter fullscreen mode Exit fullscreen mode

6. 'accept' attribute

This attribute specifies the content that the user can upload.

<input type='file' accept='image/*'>
Enter fullscreen mode Exit fullscreen mode

7. 'translate' attribute

Allow to translate texts of this element

<p translate='true'>ุณู„ุงู…</p>
Enter fullscreen mode Exit fullscreen mode

8. 'poster' attribute

For example, you can put a poster on it before the video plays.

<video controls poster'./img/img_2.jpg'>
    <source src'movie.mp4' type='Video/mp4'>
</video>
Enter fullscreen mode Exit fullscreen mode

9. 'pattern' attribute

You can set a pattern based on the input value.

<form>
   <input type='text' pattern='[A-Za-z]{4}'>
   <button type='submit'>Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

10. 'autocomplete' attribute

Complete based on previous entries.

<input type='text' autocomplete='off'>
Enter fullscreen mode Exit fullscreen mode

11. 'autofocus' attribute

Focus on the desired element after the page is fully loaded.

<input type='text' autofocus>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)