A while ago I created where I covered useful HTML tags and their types. This week I decided to make a sequel, reviewing some of the HTML attributes you might want to use. an article All of the attributes are easy to set up and can help you to achieve common tasks, which you would otherwise get by using some complex external libraries. In this article, I will review each attribute and include the code snippets, so it is easier for you to understand the use cases and syntax of the attributes. 1. Accept Describes which input file types are allowed. <input type="file" accept=".jpg, .png"> Only used with type of the tag.  Takes in a comma-separated list of one or more file types. To allow all files of specific media type, use . file <input> accept="image/*" 2. Autofocus Indicates that the particular element should be focused on page load. <input type="text" autofocus> Only one element in the document or dialog may have the attribute. If applied to multiple elements the first one will receive focus. autofocus 3. Inputmode Hints at the type of data that might be entered by the user while editing the element or its contents. <input type="text" inputmode="url" />
<input type="text" inputmode="email" />
<input type="text" inputmode="numeric" /> This allows a browser to display an appropriate virtual keyboard. 4. Pattern Specifies a regular expression that the value is checked against on form submission. <input> <input name="username" id="username" pattern="[A-Za-z0-9]+"> 5. Required Ensures that the element must be filled out before submitting the form. <form action="/send_form.js">  
Username: <input type="text" name="username" required>  
<input type="submit">  
</form> 6. Autocomplete Specifies whether the browser has permission to provide assistance to fill out form fields like email, phone numbers, country, etc. <input name="credit-card-number" id="credit-card-number" autocomplete="off"> For the full list of available values, see . autocomplete MDN reference 7. Multiple This attribute allows the user to select multiple values. <input type="file" multiple> You can use it with and types of and the tag. file email <input> <select> 8. Download Specifies that the target will be downloaded when the user clicks on the hyperlink. <a href="document.pdf" download>Download PDF</a> 9. Contenteditable This attribute allows the user to edit the content of the element. <div contenteditable="true">
  This text can be edited by the user.
</div> 10. Readonly Specifies that an input field is read-only. <input type="text" id="sports" name="sports" value="golf" readonly> A user can still tab to it, highlight it, and copy the text from it. To forbid those actions, use the attribute, instead. disabled 11. Hidden Specifies whether or not the element is visible. <p hidden>This text is hidden</p> 12. Spellcheck Defines whether the element is checked for spelling errors. <p contenteditable="true" spellcheck="true">Myy spellinng is checkd</p> Typically, all the non-editable elements are not checked, even if the attribute is set to and the browser supports spellchecking. spellcheck true 13. Translate Specifies whether the element should be translated when the page is localized. <footer><p translate="no">Printing Works, Inc</p></footer> An example use case would be your company name, book titles, locations, etc. 14. Loading Specifies whether a browser should load an image immediately or to defer loading of off-screen images until, for example, the user scrolls near them. <img src="https://cdn.mysite.com/media/image.jpg" loading="lazy"> is the default behavior, is used to defer (aka lazy loading). eager lazy 15. Onerror Allows adding a fallback image if the original is not loaded. <img src="imageafound.png" onerror="this.onerror=null;this.src='imagenotfound.png';"/> The is used to prevent the loop if the fallback image itself is not available. this.onerror=null 16. Poster Allows adding an image to be shown while the video is downloading. <video 
src="https://cdn.mysite.com/media/video.mp4"
poster="image.png">
</video> If not specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame. 17. Controls Specifies whether or not the audio/video controls should be displayed on the player. <audio controls
<source src="track11.mp3"  type="audio/mpeg">
</audio> 18. Autoplay Ensures that the audio/video will automatically start playing as soon as it is loaded. <video autoplay
src="https://cdn.mysite.com/media/myvideo.mp4"
poster="image.png">
</video> 19. Loop Specifies that the audio/video will start over again, every time it is finished. <audio loop
<source src="track323.mp3"  type="audio/mpeg">
</audio> 20. Cite Points to where the content is taken from, or change or deletion is referred. <blockquote cite="https://mysite.com/original-source-url">
  <p>Some awesome quote</p>
</blockquote> 21. Datetime Specifies the date and time when the text was deleted/inserted. <p>
  My plans for 2021 include visiting Thailand,
  <del datetime="2021-01-01T18:21">creating 6 courses,</del> 
  <ins datetime="2021-02-02T14:07">writing 12 articles.</ins>
</p>
<p>I will evaluate the completion on <time datetime="2021-12-31"></time>.</p> When used with the element, it represents a date and/or time in the machine-readable format. <time> 22. Async Ensures the script is executed asynchronously with the rest of the page. <script src="script.js" async></script> The attribute only has an effect on external scripts ( attribute must be present). async src 23. Defer Ensures the script is executed when the page has finished parsing. <script src="script.js" defer></script> The attribute only has an effect on external scripts ( attribute must be present). defer src 24. Draggable Specifies whether an element is draggable or not. <script>
const allowDrop = (e) => e.preventDefault();
const drag = (e) => e.dataTransfer.setData("text", e.target.id);
const drop = (e) => {
  var data = e.dataTransfer.getData("text");
  e.target.appendChild(document.getElementById(data));
}
</script>
<div ondrop="drop(event)" ondragover="allowDrop(event)" style="width:150px; height:50px; padding: 10px; border:1px solid black"></div>
<p id="drag" draggable="true" ondragstart="drag(event)">Drag me into box</p> Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out! Connect me on , and ! Twitter LinkedIn GitHub Visit my for more articles like this. Blog Also Published Here

Mozilla

Target

Twitter

2022 - HackerNoon Contributor of the Year - Css

2022 - HackerNoon Contributor of the Year - Html

2022 - HackerNoon Contributor of the Year - Job Hunting

2022 - HackerNoon Contributor of the Year - Music

2022 - HackerNoon Contributor of the Year - Product

Hire Me

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Music

Nominated for 2022 - HackerNoon Contributor of the Year - Html

Nominated for 2022 - HackerNoon Contributor of the Year - Job Hunting

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Product

Too Long; Didn't Read

24 HTML Attributes You Want to Use ✨📚

24 HTML Attributes You Want to Use ✨📚

Too Long; Didn't Read

Companies Mentioned

@madzadev

RELATED STORIES