Make writing a habit together! This is the 13th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details

This article is a translation, using free translation.

HTML is the cornerstone of Web development. However, many developers who are in a hurry to learn CSS, JS and so on just skip it and miss its potential.

Below are many attributes that are unfamiliar to beginners with HTML.

Developers who have had it for years probably don’t know. Say is an 💨

1. Multiple

The multiple attribute is a Boolean value that allows the user to operate on the tag, which is of type file or email. Of course, you can also use the < SELECT > tag.

For email , add the multiple attribute. The email values you enter need to be separated with no Spaces.

For of type file, you can select multiple file uploads.

<input type="file" multiple />
Copy the code

2. Accept

The element has an Accept attribute, which allows you to specify the type of file to upload.

You need to split file types by.

<input type="file" accept=".png, .jpg" />
Copy the code

Of course, you can also use it to upload audio or video.

3. Contenteditable

Contenteditable is a global property (applicable to all HTML elements) that makes HTML editable.

Note that it only changes the visible content and the content of the DOM.

<div contenteditable="true">I'm a cool editable div ;)</div>
Copy the code

Of course, if you want to make the entire document editable, you can use Document. designMode = “on” and document.designMode = “off” to turn off editing. If you want to save an entire document or an edit, you can do so directly through DOM manipulation.

4. Spellcheck

Spellcheck is also a global property that checks HTML content for spelling errors. You can use spellCheck on input and other elements.

⚠️ Note: Spelling errors for non-editable elements are not normally checked, even if spellCheck is set to true and the browser supports checking.

<! -- No check -->
<p spellcheck="true">
Thanks furr checkinng my speling :)</p>

<! - check - >
<p contenteditable="true" spellcheck="true">
Thanks furr checkinng my speling :)</p>
Copy the code

5. Translate

Translate tells the browser whether the specified content should be translated.

Say you want to prevent Google from automatically translating your company name or brand name.

<footer><p translate="no">LearnPine</p></footer>
Copy the code

6. Poster

We can set the specified video poster with the Poster property while the video is loading or before the user starts playing the video.

If poster does not specify an image, the first frame of the video is available and displayed as a poster.

<video controls 
src="https://bit.ly/3nWh78w"
poster="posterImage.png">
</video>
Copy the code

7. Download

The Download attribute, combined with the element, tells the browser the URL to download, rather than navigating to it, prompting the user to download it locally.

You can also name files.

<a href="index.html" download="fileName">Download me :)</a>
Copy the code

The URL points to video and image resources, which will not be downloaded directly and will be redirected

7 Useful HTML Attributes you may not know

Not Bad!