?? ????????????-?????????? ???????? ???????????????????? ???????? ?????? ?????????????? ???????? ?????? ?????????????????????? ???????????? ??

When it comes to web development, HTML is the backbone of creating web pages. Most of us are familiar with the basic HTML tags like <div>, <p>, and <a>, but did you know that HTML has some lesser-known attributes that can level up your web development skills?

In this article, we'll explore a few of these hidden gems that you might not have come across.

1. Accept

Describes which input file types are allowed.

<input type="file" accept=".jpg, .png">        

Only used with file type of the<input> tag. Takes in a comma-separated list of one or more file types. To allow all files of specific media type, use 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 autofocus attribute. If applied to multiple elements the first one will receive focus.

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 <input> value is checked against on form submission.

<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 autocomplete values, see MDN reference .

7. Multiple

This attribute allows the user to select multiple values.

<input type="file" multiple>        

You can use it with file and email types of <input> and the <select> tag.

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 disabled attribute, instead.

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 spellcheck attribute is set to true and the browser supports spellchecking.

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">        

eager is the default behavior, lazy is used to defer (aka lazy loading).

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 this.onerror=null is used to prevent the loop if the fallback image itself is not available.

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 <time> element, it represents a date and/or time in the machine-readable format.

22. Async

Ensures the script is executed asynchronously with the rest of the page.

<script src="script.js" async></script>        

The async attribute only has an effect on external scripts (src attribute must be present).

23. Defer

Ensures the script is executed when the page has finished parsing.

<script src="script.js" defer></script>        

The defer attribute only has an effect on external scripts (src attribute must be present).

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>        

25. Ismap

The ismap attribute is a handy addition when you're working with image maps. It indicates that an image is part of an image map, enabling clickable areas on the image.

<img src="worldmap.jpg" usemap="#map" ismap>
<map name="map">
  <area shape="circle" coords="90,58,3" href="africa.html">
  <area shape="circle" coords="200,75,10" href="asia.html">
  <!-- ...and so on -->
</map>        

26. Open Attribute for <details>

The <details> element is often used to create collapsible sections on a webpage. The open attribute tells the browser to initially display the details when the page loads.

<details open>
  <summary>Click me</summary>
  Here's some hidden content.
</details>        

27. Referrerpolicy Attribute

This one's for handling privacy and security. With the referrerpolicy attribute, you can control how much information is included in the HTTP Referer header when a user clicks on a link.

<a  referrerpolicy="no-referrer">Click me</a>        

28. Nonce Attribute

For enhanced security, you can use the nonce attribute with the <script> element. It provides a cryptographic nonce that the browser uses to verify the script's authenticity.

<script src="script.js" nonce="a1b2c3d4e5"></script>        

Wrapping up

These special HTML tricks are like secret tools for web developers. They help make websites load #faster, keep things #secure, and even let you do some cool things with links and images.

Remember, using these tricks can make your web projects even better. It's like having a superpower in your coding toolbox!

Do let me know if you want articles on such topics! If there's a specific area of web development or any other topic you're curious about, feel free to ask. Happy learning!

Thank You for Reading!

If you found this post informative and valuable, I’d love for you to connect with me. Follow me here on Medium , Codepen , and connect with me on LinkedIn to stay updated on the latest in web development, design, interviews, and more.

Let’s connect!

?? ???????????????? — https://www.dhirubhai.net/in/dimple-kumari/

?? ???????????? — https://medium.com/@dimplekumari0228

?? ?????????????? — https://codepen.io/DIMPLE2802

#frontenddevelopment #codeoptimization #html #attributes #coding #w3schools #webdevelopment #performanceoptimization #likesharecomment #repost #webdesign #softwareengineer #coders