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

<html>

<head>

    <title>Access key example</title>

</head>

<body>

    <form>

    Enetr your Name:

    <input type="text" name="name" accesskey="n" />

    <p />

    Enter Password:

    <input type="password" name="password" accesskey="p" />

    <p />

    <input type="submit" value="Log In" accesskey="s" />

    </form>

</body>

</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 password.
  • Alt+s presses the Log In 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 belong to a given class or to apply a CSS style.
 
Example

<html>

<head>

    <title>class example</title>

    <style type="text/css">

        .class2

        {

            background-color: cyan;

            color: black;

            padding: 5px;

            margin: 2px;

        }

        .class1

        {

            font-size: x-large;

        }

    </style>

</head>

<body>

    <a class="class1 class2" href="http://www.c-sharpcorner.com/UploadFile/8836be/html5-main-structural-elements/">

        HTML5 Main Structural Elements</a>

    <p />

    <a class="class2 otherclass" href="http://www.c-sharpcorner.com/UploadFile/8836be/make-your-own-music-player-in-android/">

        Make Your Own Music Player in Android</a>

</body>

</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 in the page.
 
Example

<html>

<head>

    <title>contenteditable example</title>

</head>

<body>

    <p contenteditable="true">

        Good Morning</p>

</body>

</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

<html>

<head>

    <title>dir example</title>

</head>

<body>

    <p dir="rtl">

        Its direction is right-to-left</p>

    <p dir="ltr">

        Its direction is left-to-right</p>

</body>

</html>

 
dir Attribute 

 5. Spellcheck Attribute

The spellcheck attribute is specifies if the browser should check the spelling of an element's content.
 
Example

<html>

<head>

    <title>spellcheck example</title>

</head>

<body>

    <textarea spellcheck="true">how are tou? </textarea>

</body>

</html> 

 
Spellcheck Attribute 

6. Title Attribute

The title attribute provides additional information about an element, that is commonly used by the browser to display tool tip information.

Example

<html>

<head>

    <title>title Example</title>

</head>

<body>

    <a title="Good Morning friend.. I am Abhijeet" href="http://www.c-sharpcorner.com/authors/8836be/abhijeet-singh.aspx">

        Abhijeet Singh</a>

</body>

</html>

 
 Title Attribute 

Up Next
    Ebook Download
    View all
    Learn
    View all