HTML, the markup language for creating net pages, has a wide range of attributes that present functionalities and outline completely different features of components on an online web page. Some distinctive or much less generally recognized attributes embrace:
1) contenteditable: This attribute makes the content material of a component editable by the person. It may be utilized to varied HTML components like <div>, <p>, or <span> to permit direct person enter.
Instance:
<div contenteditable="true">
This content material may be edited by the person.
</div>
2) draggable: When set to true, this attribute permits a component to be draggable. It is typically used along side JavaScript to create drag-and-drop functionalities.
Instance:
<img src="https://style-tricks.com/margishpatel/picture.jpg" draggable="true" alt="Drag me">
3) hidden: This attribute hides the ingredient from being displayed. It is completely different from CSS show: none; because it fully removes the ingredient from the doc’s structure circulation.
Instance:
<p hidden>This paragraph is hidden</p>
4) obtain: Used with <a> components, it prompts the person to obtain the linked useful resource moderately than navigating to it. When clicked, it initiates the obtain of the desired useful resource.
Instance:
<a href="https://style-tricks.com/margishpatel/myfile.pdf" obtain>Obtain PDF</a>
5) spellcheck: This attribute, when included in an editable ingredient, allows or disables spell checking for the content material inside that ingredient.
Instance:
<textarea spellcheck="true"></textarea>
6) sandbox: Primarily used with <iframe> components, it restricts what the embedded content material can do (corresponding to stopping scripts, kind submission, or same-origin restrictions) for added safety.
Instance:
<iframe src="https://instance.in" sandbox="allow-scripts"></iframe>
7) loading: This attribute controls how the browser hundreds an exterior useful resource laid out in components like <img>, <iframe>, <script>, and so on. It helps enhance web page efficiency by specifying lazy loading or keen loading of assets.
Instance:
<img src="https://style-tricks.com/margishpatel/picture.jpg" loading="lazy" alt="Lazy-loaded picture">
8) defer: Used with the <script> ingredient, the defer attribute ensures that the script will likely be executed after the doc has been parsed.
Instance:
<script defer src="https://style-tricks.com/margishpatel/myscript.js"></script>
9) async: Just like defer, the async attribute is used with the <script> ingredient, but it surely signifies that the script ought to be executed asynchronously.
Instance:
<script async src="https://style-tricks.com/margishpatel/myscript.js"></script>
10) Translate: This attribute is used to specify whether or not the content material of a component ought to be translated when the web page is localized.
Instance:
<p translate="no">This content material shouldn't be translated.</p>
Whereas these attributes present extra functionalities, it is important to make use of them appropriately and think about browser compatibility and accessibility issues when implementing them in net tasks.
Hope you prefer it.
That’s it — thanks.
To learn my different articles click on right here.
👋Hey there, Let’s join on:
Linkdin: Margish Patel
Twitter: @margish96patel
E mail: babariyamargish97@gmail.com
