Scribd
Upload
12 views

HTML Global Attributes 2

Uploaded by

kushwahaji98011
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

HTML Global Attributes 2

Uploaded by

kushwahaji98011
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

HTML Global Attributes

The global attributes are attributes that can be used with all HTML elements.

Attribute Description

accesskey Specifies a shortcut key to activate/focus an


element

class Specifies one or more classnames for an


element (refers to a class in a style sheet)

contenteditable Specifies whether the content of an element is


editable or not

data-* Used to store custom data private to the page


or application

dir Specifies the text direction for the content in


an element

draggable Specifies whether an element is draggable or


not

hidden Specifies that an element is not yet, or is no


longer, relevant

id Specifies a unique id for an element


lang Specifies the language of the element's content

spellcheck Specifies whether the element is to have its


spelling and grammar checked or not

style Specifies an inline CSS style for an element

tabindex Specifies the tabbing order of an element

title Specifies extra information about an element

translate Specifies whether the content of an element


should be translated or not

HTML accesskey Attribute


<!DOCTYPE html>

<html>

<body>

<a href="https://www.w3schools.com/html/" accesskey="h">HTML


tutorial</a><br>

<a href="https://www.w3schools.com/css/" accesskey="c">CSS tutorial</a>

<p>The accesskey attribute specifies a shortcut key to activate/focus an


element.</p>
<p><strong>Note:</strong> The shortcut is varying in different browsers:</p>

<ul>
<li>Edge, IE, Chrome, Safari, Opera 15+: [ALT] +
<em>accesskey</em></li>
<li>Opera prior version 15: [SHIFT] [ESC] + <em>accesskey</em></li>
<li>Firefox: [ALT] [SHIFT] + <em>accesskey</em></li>

</ul>

</body>

</html>

HTML class Attribute


Use of the class attribute in an HTML document:

<!DOCTYPE html>

<html>
<head>

<style>

h1.intro {

color: blue;
}

p.important {
color: green;

}
</style>

</head>
<body>

<h1 class="intro">Header 1</h1>


<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>

</body>

</html>

The class attribute specifies one or more class names for an element.

The class attribute is mostly used to point to a class in a style sheet. However, it
can also be used by a JavaScript (via the HTML DOM) to make changes to HTML
elements with a specified class.

HTML contenteditable Attribute


<!DOCTYPE html>

<html>

<body>

<p contenteditable="true">This is a paragraph. It is editable. Try to change this text. </p>

</body>

</html>

HTML data-* Attributes


<!DOCTYPE html>
<html>

<head>

<script>
function showDetails(animal) {
var animalType = animal.getAttribute("data-animal-type");

alert("The " + animal.innerHTML + " is a " + animalType + ".");

}
</script>
</head>

<body>

<h1>Species</h1>
<p>Click on a species to see what type it is:</p>

<ul>

<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>

<li onclick="showDetails(this)" id="salmon" data-animal-


type="fish">Salmon</li>

<li onclick="showDetails(this)" id="tarantula" data-animal-


type="spider">Tarantula</li>
</ul>

</body>

</html>

Definition and Usage


The data-* attributes is used to store custom data private to the page or
application.

The data-* attributes gives us the ability to embed custom data attributes on all
HTML elements.

The stored (custom) data can then be used in the page's JavaScript to create a
more engaging user experience (without any Ajax calls or server-side database
queries).

The data-* attributes consist of two parts:

1. The attribute name should not contain any uppercase letters, and must be at
least one character long after the prefix "data-"
2. The attribute value can be any string
HTML dir Attribute
<!DOCTYPE html>

<html>
<body>

<p dir="rtl">Write this text right-to-left!</p>

</body>

</html>

HTML draggable Attribute


<!DOCTYPE HTML>

<html>

<head>

<style>
#div1 {

width: 350px;
height: 70px;

padding: 10px;

border: 1px solid #aaaaaa;

</style>

<script>
function allowDrop(ev) {

ev.preventDefault();

function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);

function drop(ev) {
var data = ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));
ev.preventDefault();

</script>

</head>

<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br>

<p id="drag1" draggable="true" ondragstart="drag(event)">This is a draggable


paragraph. Drag this element into the rectangle.</p>

</body>

</html>

HTML lang Attribute


Definition and Usage
The lang attribute specifies the language of the element's content.

Common examples are "en" for English, "es" for Spanish, "fr" for French, and so
on.

<!DOCTYPE html>

<html>
<body>
<p>This is a paragraph.</p>

<p lang="fr">Ceci est un paragraphe.</p>

</body>

</html>

HTML title Attribute


<!DOCTYPE html>

<html>

<body>

<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<p title="Free Web tutorials">W3Schools.com</p>

</body>

</html>

You might also like