Ricardo de Paula Profile picture
Building a Flexible Career in Front End Web Development.

Oct 3, 2021, 16 tweets

ALL html Global attributes:

These are attributes that all HTML tags have in
common.

#HTML #CSS #javascriptdeveloper
Please Support!! So I can create more quality content! #RetweeetPlease #Like #Share 🧵

accesskey Attribute:

Is an HTML shortcut key. Most people do this using JavaScript but HTML5 supports it.

Now when you press the “S” key your button will be activated.

class Attribute:

Fits any tag.

Now I can create a CSS class and put the visual configuration I want.

contenteditable Attribute:

It serves to transform non-editable content into editable content. You can edit a paragraph or a div.
It receives as value either true or false. It is false by default.

data-* Attribute:

Let's say that within this "John Doe" item I want to keep other information that will not be visible to the user but for some reason, I will need this information later.

I will use the data_* global attribute to save this information.

dir Attribute:

It is an abbreviation of the word direction. The reading direction of your HTML page. It has the value “auto”, it will detect the text direction based on your operating system.

ltr Attribute = left to right.
rtl Attribube = right to lef.

draggable Attribute:

I can take an HTML element and drag it to another place.
Setting draggable to “true”, you can see it as a shadow of the element when you drag. A visual copy of your button. You have the feeling that this button is actually dragged.

dropzone Attribute:

Above we saw how you drag an element. But where do you drag this element? What is this place, that accepts the draggable element? The dropzone. You can not only copy but move the element to the dropzone.

hidden Attribute:

How to make an element hidden without CSS.

id Attribute:

The id attribute identifies your tag in your document. The id must be unique. You can set the CSS via id. If you want those two elements to have the same name to style. So it's not id it's class.

lang Attribute:

Language (idiom) from our page or from a part of the document.

The lang attribute in the HTML tag tells your browser that all document is in English. Now, look at the H2 tag. Are saying that the language is Portuguese from Brazil.

spellcheck Attribute:

Spell check our HTML. We have two options: false and true. By default it is false. This attribute does not check texts written by you, you need to allow users to enter data in this tag. Works well with contenteditable Attribute.

style Attribute:

We've already seen how to use the style attribute by styling the classes and id. It is possible to use even in the tag name. With style, you can use CSS directly in a tag.

tabindex Attribute:

With tabindex you can organize the tab order of your HTML page.

You can change the tab order of fields.

title Attribute:

It is the browser's native tooltip. Or almost it.

When you hover, a tooltip appears with what was defined in the title attribute.

translate Attribute:

With the translate attribute, you can force to not translate some part of our code.

This attribute takes two values: yes or no.

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling