Cool HTML attributes that will blow your mind

Cool HTML attributes that will blow your mind

27 September, 2021

Here is the list of HTML attributes which many beginners don't know about, but can be helpful.

1) Accept

This element has the accept the attribute which allows you to define the format of files the user can upload.

You can use it to specify formats like audio, image, or video.

<pre class="language-markup"> &lt;input type="file" accept=".png, .jpg"&gt;

2) Contenteditable

This is a global attribute that makes the HTML content editable by the user.

<pre class="language-markup">&lt;div contenteditable="true"&gt;I'm a cool editable div ;)&lt;/div&gt;

3) Spellcheck

This attribute is a global attribute that can be used to check spelling and grammar on HTML components like input and other editable elements.

Also remember, even if the spellcheck attribute is set to true and the browser supports spellchecking, typically non-editable elements are not checked for grammar,

<pre class="language-markup">&lt;p spellcheck="true"&gt;

Thanks furr checkinng my speling :)</p>

4) Translate

This attribute notifies the browser if the content of the element should be translated or not.

For example, if you want to prevent Google Translate from trying to translate your company's or website's name.

<pre class="language-markup">&lt;footer&gt;&lt;p translate="no"&gt;LearnPine&lt;/p&gt;&lt;/footer&gt;

5) Download

This attribute is used with an <a> element to tell browsers to download a URL rather than navigating to it, so the user will be advised to save it as a local file.

For Example

<pre class="language-markup">&lt;a href="index.html" download="fileName"&gt;Download me :)&lt;/a&gt;

Bonus :

Make the whole website Editable

We can use documents.designMode = "on" to make all website's content editable which helps while prototyping your HTML page.

Comment if you know more cool and useful attributes.