Post
Ask Question

Some HTML5 Global Attributes

1. Accesskey Attribute

 
Using the accesskey attribute we can specify one or more keyboard shortcuts that will select the element on the page.
 
Example
  1. <html>  
  2. <head>  
  3.     <title>Access key example</title>  
  4. </head>  
  5. <body>  
  6.     <form>  
  7.     Enetr your Name:  
  8.     <input type="text" name="name" accesskey="n" />  
  9.     <p />  
  10.     Enter Password:  
  11.     <input type="password" name="password" accesskey="p" />  
  12.     <p />  
  13.     <input type="submit" value="Log In" accesskey="s" />  
  14.     </form>  
  15. </body>  
  16. </html>  
Accesskey Attribute
 
In this example, I have added the accesskey attribute to three input elements.
 
The key combination required to trigger the accesskey setting differs among platforms. For Windows, it is the Alt key and the accesskey value pressed together.
  • press Alt+n to focus on the first input element and enter your name.
  • press Alt+p to focus on the second input element and enter the password.
  • Alt+s presses the login button, that submits the form.

2. Class Attribute

 
The class attribute is used to classify or categorize elements. We usually do this so that we can locate elements in the document that belongs to a given class or to apply a CSS style.
 
Example
  1. <html>  
  2. <head>  
  3.     <title>class example</title>  
  4.     <style type="text/css">  
  5.         .class2  
  6.         {  
  7.             background-color: cyan;  
  8.             color: black;  
  9.             padding: 5px;  
  10.             margin: 2px;  
  11.         }  
  12.         .class1  
  13.         {  
  14.             font-size: x-large;  
  15.         }  
  16.     </style>  
  17. </head>  
  18. <body>  
  19.     <a class="class1 class2" href="http://www.c-sharpcorner.com/UploadFile/8836be/html5-main-structural-elements/">  
  20.         HTML5 Main Structural Elements</a>  
  21.     <p />  
  22.     <a class="class2 otherclass" href="http://www.c-sharpcorner.com/UploadFile/8836be/make-your-own-music-player-in-android/">  
  23.         Make Your Own Music Player in Android</a>  
  24. </body>  
  25. </html>     
class Attribute
 
In this example, I used a style element to define two styles; the first is applied to elements that are assigned to class2 and the second is applied to class1.
 

3. Contenteditable Attribute 

 
The contenteditable attribute allows the user to change the content on the page. 
 
Example
  1. <html>  
  2. <head>  
  3.     <title>contenteditable example</title>  
  4. </head>  
  5. <body>  
  6.     <p contenteditable="true">  
  7.         Good Morning</p>  
  8. </body>  
  9. </html> 
contenteditable Attribute
 
Setting the attribute value to true allows the user to edit the element contents and setting it to false disables this feature.
 

4. dir Attribute

 
The dir attribute specifies the direction of an element's text.
 
The two supported values are:
  • ltr (for left-to-right text)
  • rtl (for right-to-left text)
Example
  1. <html>  
  2. <head>  
  3.     <title>dir example</title>  
  4. </head>  
  5. <body>  
  6.     <p dir="rtl">  
  7.         Its direction is right-to-left</p>  
  8.     <p dir="ltr">  
  9.         Its direction is left-to-right</p>  
  10. </body>  
  11. </html>   
dir Attribute
 

5. Spellcheck Attribute

 
The spellcheck attribute specifies if the browser should check the spelling of an element's content.
 
Example
  1. <html>  
  2. <head>  
  3.     <title>spellcheck example</title>  
  4. </head>  
  5. <body>  
  6.     <textarea spellcheck="true">how are tou? </textarea>  
  7. </body>  
  8. </html>
Spellcheck Attribute
 

6. Title Attribute

 
The title attribute provides additional information about an element, that is commonly used by the browser to display tooltip information.
 
Example
  1. <html>  
  2. <head>  
  3.     <title>title Example</title>  
  4. </head>  
  5. <body>  
  6.     <a title="Good Morning friend.. I am Abhijeet" href="http://www.c-sharpcorner.com/authors/8836be/abhijeet-singh.aspx">  
  7.         Abhijeet Singh</a>  
  8. </body>  
  9. </html> 
Title Attribute
 


Similar Articles