DEV Community

Anton Nikiforov
Anton Nikiforov

Posted on

Did you know in HTML ...

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


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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 />
Enter fullscreen mode Exit fullscreen mode

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> 
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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> 
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)