In this article we will discuss about 15 HTML attributes you probably did not know, but need to know for sure.
Let’s get started!
autocomplete attributes specifies whether the browser is allowed to aid in filling out the form fields or not. If turned on, it will assist users with autofilling options such as email, phone numbers, nationality, and so on.
<input name="credit-card-number" id="credit-card-number" autocomplete="off">
You can check out all the autocomplete values from the MDN docs.
download attribute on an anchor tag specifies that the file/object should be downloaded to the local storage when a user clicks on the hyperlink.
<a href="document.pdf" download>Download PDF</a>
contenteditable attribute allows the user to edit the content of an element.
<div contenteditable="true"> You can now edit this text! </div>
readonly attribute specifies that an input field is read-only and can’t be edited.
<input type="text" id="sports" name="sports" value="golf" readonly>
A user can still highlight it, and copy the text. To forbid those actions, use the
disabled attribute instead.
accept attribute states which file types are allowed to be selected in the input.
<input type="file" accept=".jpg, .png">
This attribute can only be used on an
<input> tag with
type="file". To allow all files of specific media type, use an asterisk beside its name. For example,
autofocus attribute indicates that the particular element should be focused on page load.
<input type="text" autofocus>
Note: Only one element in the HTML document or a dialog may have the autofocus attribute. If applied to multiple elements only the first one will receive focus.
hidden attribute specifies whether or not the element is visible.
<p hidden>I am invincible 💪</p>
spellcheck attribute defines whether the element is checked for spelling errors.
<p contenteditable="true" spellcheck="true">Cehck mai spellnig</p>
controls attribute specifies whether or not the audio/video controls should be displayed on the default player.
<audio controls> <source src="rick_roll.mp3" type="audio/mpeg"> </audio>
autoplay attribute 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>
cite attribute is used to point out where a an element’s content is taken from, or referred to.
<blockquote cite="https://genicsblog.com/"> <p>An awesome publication for developers.</p> </blockquote>
datetime attribute specifies the date and time when the text was deleted/inserted.
<p> My plans for 2023 include joining Google as a SDE, <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>
async attribute ensures the script is executed asynchronously with the rest of the page.
<script src="https://icanheckyou.com/heckingScript.js" async></script>
async attribute has an effect on external scripts only.
defer attribute ensures the script is executed when the page has finished parsing.
<script src="https://anotherhecker.com/heckingScriptAgainCozWhyNot.js" defer></script>
defer attribute has an effect on external scripts only.
inputmode attribute hints at the type of data that might be entered by the user while editing the element or its contents. It also helps the mobile browsers to display the keyboard in the appropriate mode.
<input type="text" inputmode="url" /> <input type="text" inputmode="email" /> <input type="text" inputmode="numeric" />
Thanks for reading!
I hope this article was able to help you learn more about HTML and share some knowledge with you.
If you liked this post, subscribe to my newsletter to never miss out on my blogs, product launches, and tech news. Follow me on Twitter for daily threads on web dev resources!