Did you know in HTML ...
Tags: html, webdev, ux
Published: 2023-03-02 18:05:02

HTML is a powerful markup language that has been used for years to build websites and web applications. Despite its widespread use, there are several fascinating and lesser-known features of HTML that developers can use to create more interactive web pages. I want to share with you some interesting features of HTML that you may not have known before. Let's explore some of the hidden gems of HTML together!

![Try to surprise me HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dizyd2iz6tnpse7x2o3i.jpeg)

---

1) Did you know in HTML, you can use the `download` attribute to prompt the user to download a file when they click on a link?
```
<a href="file.pdf" download>Download PDF</a>
```
Furthermore, by setting a value to this attribute, you can specify the name of the file that will be downloaded.
```
<a href="file.pdf" download="custom-file-name">Download PDF</a>
```

2) Did you know in HTML, you can use the `autofocus` attribute to automatically set focus on an input field when the page loads?
For example:
```
<input type="text" autofocus />
```
automatically sets focus on the input field.

3) Did you know in HTML, you can use the `contenteditable` attribute to make any element editable?
For example:
```
<p contenteditable="true">This text is editable!</p> 
```
allows the user to modify the text within the paragraph.

4) Did you know in HTML, you can use the `details` and `summary` elements to create expandable sections?
For example:
```
<details>
  <summary>Click me to expand</summary>
  Content goes here
</details>
```
shows the summary as a clickable element that expands to show the content.

5) Did you know in HTML, you can use the `ping` attribute to send a pingback request to a specified URL when a link is clicked?
For example:
```
<a
  href="https://example.com" 
  ping="https://analytics.example.com"
>
  Link
</a>
```
sends a brief HTTP POST request to the indicated URL, making it beneficial for monitoring or tracking purposes.

6) Did you know in HTML, you can use the `translate` attribute to specify if the content of an element should be translated? For example:
```
<p translate="no">This text should not be translated</p> 
```
prevents the text from being translated by the browser.

7) Did you know in HTML, you can use the `hidden` attribute to hide elements from the page?
For example:
```
<p>This text is visible.</p>
<p hidden>This text is hidden.</p>
```

8) Did you know in HTML, you can use the `srcdoc` attribute to embed an HTML document within another HTML document?
For example:
```
<iframe srcdoc="<h1>Hello, world!</h1>"></iframe>
```

9) Did you know in HTML, you can use the `spellcheck` attribute to disable spell checking on a specific element?
For example:
```
<textarea spellcheck="false" />
```

10) Did you know in HTML, the `bdo` element can be used to specify the direction of text, such as for languages that are read from right to left?
For example:
```
<p>
  This text will display left-to-right.
  <bdo dir="rtl">But this right-to-left.</bdo>
</p>
```

---

## It's been real, it's been fun, but now it's done
This article may not cover all the lesser-known features of HTML, but it's likely introduced you to some new and exciting possibilities. Perhaps some of the facts presented were already known to you, but hopefully, you discovered something surprising and useful. If any of these facts caught your attention or if you have additional tips or tricks, which impressed you, please leave a comment! Keep exploring and discovering new ways to enhance your web development skills!