Friday, 22 June 2018

HTML Global Attributes

Global HTML Attributes are those attributes which are allowed to use with any HTML tags.

Attributes:


accesskey character Specifies a shortcut key to activate/focus an element <element accesskey="character">

class 
classname Specifies one or more classnames for an element (refers to a class in a style sheet) To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. Thus you can able to combine several CSS classes for a single HTML element.

Naming rules:
         Must begin with a letter A-Z or a-z
         If needed can be Followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_")

contenteditable 
true false  Specifies whether the content of an element is editable or not ie.true for element is edible, false for element is not edible

<element contenteditable="true|false">

data-* 
somevalue Basically, we can store custom data private to the page or application. The "somevalue" , the attribute value should be a string type.

<element data-*="somevalue">

dir 
ltr rtl auto Specifies the text direction for the content in an element

<element dir="ltr|rtl|auto">
ltr Default. Left-to-right text direction
rtl Right-to-left text direction
auto The browser automatically figures out the text direction, based on the content (recommended; only if the text direction )

draggable 
true false auto Specifies whether an element is draggable or not

<element draggable="true|false|auto">
true Specifies that the element is draggable
false Specifies that the element is not draggable
auto Uses the default behavior of the browser

dropzone 
copy move link Specifies whether the dragged data is copied, moved, or linked, when dropped

<element dropzone="copy|move|link">
copy Indicates Dropping the data will result in a copy of the dragged data
move Dropping the data will result in that the dragged data is moved to the new location
link         Dropping the data will result in a link to the original data

hidden States that a certain element is not yet, or is no longer, shown on the HTML page.

<element hidden>

id id Specifies a unique id for an element

<element id="id">
id  Specifies a unique id for the element. 
Naming rules:
         Must contain at least one character
         Must not contain any space characters

lang language_code It specifies the language of the element's content

<element lang="language_code">

spellcheck 
true false It states whethere the element is needed to go through the spelling and grammar checking or not.

<element spellcheck="true|false">
true That the element is to have its spelling and grammar checked
false The element is not to be checked

style style_definitions Specifies an inline CSS style for an element

<element style="style_definitions">
style_definitions Indicates One or more CSS properties and values separated by semicolons (e.g. style="color:blue;text-align:center")

tabindex number It defines the element's 
 tabbing order.
<element tabindex="number">
number Specifies the tabbing order of the element (1 is first)

title text It states about the element's 
extra information.
<element title="text">
text A tooltip text for an element

translate yes no States whether the element's 
content should be translated or not.
<element translate="yes|no">
yes   States that it should be translated.
no States that it should not be translated.






No comments:

Post a Comment