Did you know in HTML ...

Anton Nikiforov — Thu, 02 Mar 2023 18:05:02 +0000

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!

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!

DEV Community: Anton Nikiforov

Did you know in HTML ...

It's been real, it's been fun, but now it's done