7 HTML attribute you should know right now!

If you are web developper you are using HTML for sure! You are using a lot of HTML attribute, but today you will learn some news!

bdo

The HTML element overrides the current directionality of text, so that the text within is rendered in a d…

If you are web developper you are using HTML for sure! You are using a lot of HTML attribute, but today you will learn some news!



bdo

The HTML element overrides the current directionality of text, so that the text within is rendered in a different direction ! You can use dir option to indicate this direction.

  • ltr -> Indicates that the text should go in a left-to-right direction

  • rtl -> Indicates that the text should go in a right-to-left direction.

<p>
    <bdo dir="ltr">This text will go left to right.</bdo>
</p>
<p>
    <bdo dir="rtl">This text will go right to left.</bdo>
</p>

Image description



kbd

If you need to show shortcut to your user, you should use kbd! It represents a span of inline text denoting textual user input from a keyboard.

<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render a browser page.</p>

Image description



details

The HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an “open” state. A summary or label must be provided using the element.

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

Image description



contenteditable

The contenteditable attribute specifies whether the content of an element is editable or not!

<p contenteditable="true">This is an editable paragraph.</p>

Image description



abbr

The <abbr> tag defines an abbreviation or an acronym, like “HTML”, “CSS” and show the complete title when hover this tag.

<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>

Image description



translate

Indicate to HTML is this content need to be translated or not (by google translate for example).

<p translate="no">CodeOz</p>



color picker

Yes as you just learn, you can easily create a color picker! 👇

<input type="color">

Image description

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and MP me 😁

Or get it HERE

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!


Print Share Comment Cite Upload Translate
APA
CodeOz | Sciencx (2024-03-28T18:17:58+00:00) » 7 HTML attribute you should know right now!. Retrieved from https://www.scien.cx/2021/10/15/7-html-attribute-you-should-know-right-now/.
MLA
" » 7 HTML attribute you should know right now!." CodeOz | Sciencx - Friday October 15, 2021, https://www.scien.cx/2021/10/15/7-html-attribute-you-should-know-right-now/
HARVARD
CodeOz | Sciencx Friday October 15, 2021 » 7 HTML attribute you should know right now!., viewed 2024-03-28T18:17:58+00:00,<https://www.scien.cx/2021/10/15/7-html-attribute-you-should-know-right-now/>
VANCOUVER
CodeOz | Sciencx - » 7 HTML attribute you should know right now!. [Internet]. [Accessed 2024-03-28T18:17:58+00:00]. Available from: https://www.scien.cx/2021/10/15/7-html-attribute-you-should-know-right-now/
CHICAGO
" » 7 HTML attribute you should know right now!." CodeOz | Sciencx - Accessed 2024-03-28T18:17:58+00:00. https://www.scien.cx/2021/10/15/7-html-attribute-you-should-know-right-now/
IEEE
" » 7 HTML attribute you should know right now!." CodeOz | Sciencx [Online]. Available: https://www.scien.cx/2021/10/15/7-html-attribute-you-should-know-right-now/. [Accessed: 2024-03-28T18:17:58+00:00]
rf:citation
» 7 HTML attribute you should know right now! | CodeOz | Sciencx | https://www.scien.cx/2021/10/15/7-html-attribute-you-should-know-right-now/ | 2024-03-28T18:17:58+00:00
https://github.com/addpipe/simple-recorderjs-demo