HTML Elements

◄Page 7►

Global Attributes

Data Type Show Hidden Data Type

Introduction

Learn to apply Global Attributes to almost any HTML element. However not all elements respond to every global attribute. This section discusses a list of global attributes. See the Global Attributes List below. Tap an attribute to see examples with HTML markup, JavaScript and some styles.

Global Attributes List

accesskey

Key used to focus on the specific element.

class

One or more classes declared in style sheets or internal styles.

contenteditable

Indicates whether or not an element's textual or numeric data can be edited.

data-*

Developer customized data for use in an application or Web page.

.dir (Deprecated in HTML5)

Whether text reads right to left, left to right or top to bottom.

draggable

Can you touch or click and drag an element?

hidden

Display or don't display an element.

id

Identifier for a page's element. Must be unique to the page. In other words, one page can't have apply the same id twice.

lang

Which language does this element's content contain?

spellcheck

Can an element's spelling or grammar be checked?

style

Include CSS specification for an element.

tabindex

If the user tabs through elements on a page, tabindex, declares the order of focus for the set of tabindexed elements.

title

Information about an element. Displays on desktops when the user hovers the mouse over an element.

translate (Currently supported in few browsers)

Should an element's content receive translation?

Examples

Editable & Non Editable

Editable & Not Editable Markup

The blue outlined box's contenteditable attribute equals true. The red outlined box's contenteditable attribute equals false. Therefore you can change the text in the blue outlined box but not in the red outlined box.

<p 
class="brd-blue" 
contenteditable="true" 
>

Edit text here.

</p>

<p 
class="brd-red" 
contenteditable="false"
>

You can't endit text here.

</p>

Access Keys

Press g

Press g, alt-g or alt-shift-g, depending on your browser, to go to the Global Attributes List.

Access Key Markup

Notice the access key for href="#global" equals g. Therefore the anchor tag declares the access key. If you have a keyboard then enter g or prepend g with alt or alt-shift.

<a 
 href="#global" 
 href="Global Attributes" 
 accesskey="g"
>

 Global Attributes List

</a>

The Global Attributes header has an id of global, as follows.

<h2 
 id="global"
>

 Global Attributes List

</h2>

Drag & Drop

Drag the blue box over the violet box. Then release the mouse to drop the blue box on the violet box. Refresh the page if you want to try again.

This works on most desktops and notebook computers but it doesn't work on all mobile devices.

Drag & Drop Markup

Notice each drag and drop box includes an id attribute. Then, below, the JavaScript accesses the boxes by id.

Also notice each paragraph includes a title; Blue Color and Violet Color. It's a good idea to include titles in elements for screen readers and Web crawlers.

<p
 id        ="vi" 
 class     ="box vi" 
 style     ="background-color:violet;" 
 ondrop    ="dragEnd(event)" 
 ondragover="dragOver(event)" 
 title     ="Violet Color" 
>
 
Violet Color

</p>

<p
 id         ="bl" 
 class      ="box bu" 
 style      ="background-color:blue;" 
 ondragStart="dragStart(event)" 
 draggable  ="true" 
 title      ="Blue Color" 
>
 
 Drag Blue Box to Violet Box
 
</p>

Drag & Drop JavaScript

var vi = null;
var bl = null;

/**
* Triggered when blue
* starts to drag.
* @param ev: Event Object
*/
function dragStart(ev){

 if(vi == null || bl == null){
  vi = document.getElementById("vi");
  bl = document.getElementById("bl");
 }
 
 bl.innerHTML = "Drag Start";

}

/**
* Triggered when blue box
* drags over violet box.
* @param ev: Event Object
*/
function dragOver(ev){
 ev.preventDefault();
 vi.innerHTML = "Drag Over";
}

/**
* Triggered when blue box
* drops onto violet box.
* Changes violet box blue.
* @param ev: Event Object
*/
function dragEnd(ev){
 ev.preventDefault();
 vi.style.backgroundColor = "blue";
 vi.innerHTML = "Dropped Blue Color Here";
 bl.innerHTML = "Drop Ended";
}

Data Type

<p 
 class       ="box aq" 
 data-c-type ="Aqua" 
 onclick     ="showData(this)"
>

Click for Color

</p>

<p 
 class       ="box y" 
 data-c-type ="Yellow" 
 onclick     ="showData(this)"
>

Click for Color

</p>

function showData(d){

 var typeColor = d.getAttribute(
  "data-c-type"
 );
 
 d.innerHTML = typeColor;
}

Hide or Show

Tap a box. Once you start tapping, the boxes alternate between hidden and rendering to the Web page.

Hide or Show Markup

Notice each box includes an id value. The boxes are accessed and modified by JavaScript below.

<p 
id="first" 
class="box rd" 
onclick="hideMeShowOther(event)">

Tap to Hide Me

</p>
<p 
id="second" 
class="box bu" 
onclick="hideMeShowOther(event)">

Tap to Hide Me

</p>

Hide or Show JavaScript

JavaScript accesses each box by id and saves each box. Then one function hides and shows alternating boxes. The function accesses each box's styles.visibility property.

If you always want to hide an HTML element then simply apply the hidden attribute, as follows; <p hidden>This paragraph is hidden.</p>.

var first = null;
var second = null;

/**
* Hide or show alternating
* box elements.
* @param ev: Event Object
*/
function hideMeShowOther(ev){
 if(first == null || second == null){
  first  = document.getElementById("first");
  second = document.getElementById("second");
 }
 if(ev.target == second){
  first.style.visibility  = "visible";  
  second.style.visibility = "hidden";   
 }
 else{
  first.style.visibility  = "hidden";  
  second.style.visibility = "visible";    
 }
}

Language Attribute

The language attribute helps Web crawlers identify the audience for various Web pages and elements. I just reused the showData() JavaScript function, above. Click a box, to see the language.

Language Attribute Markup

<p 
 lang="en"  
 class="box rd" 
 data-c-type="English" 
 onclick="showData(this)">
 
Hello friend.
 
</p>

<p 
 lang="es"  
 class="box bu" 
 data-c-type="Spanish" 
 onclick="showData(this)">
 
Hola amigo.
 
</p>

Spellcheck

The blue box has spell check enabled. The green box has spell check disabled. Let's see how it works. Type misspelled words into the blue box, in English. Misspelled words display automatically with wavy red underlines. Type misspelled words into the green box, in English. Misspelled words should display without wavy red underlines.

The reason the browser spell checks English is because the Web page's language is specified as English in the opening root HTML tag, as follows <html lang="en">. See the markup below, to enable spell checking on an element.

Spell something incorrectly.

Spell something incorrectly.

Spellcheck Markup

The attribute spellcheck receives the value true for the box with class bu. The attribute spellcheck receives the value false for the box with class gn. CSS class bu declares background color blue. CSS class gn declares background color green.

<p 
class           ="box bu" 
contenteditable ="true" 
spellcheck      ="true"
>

Spell something incorrectly.

</p>

<p 
class           ="box gn" 
contenteditable ="true" 
spellcheck      ="false"
>

Spell something incorrectly.

</p>

Tab Index

The tabindex attribute isn't very useful with mobile devices. However with desktop or notebook computers press the tab key to cycle through the following four paragraphs. Firefox defaults to continue onward using default tab indices for other elements on the page.

However, you can see below that each paragraph receives focus as you tap your tab key.

Tab Index Markup

<p 
 tabindex="1" 
>
 Tab Index One
</p>

<p 
 tabindex="2" 
>
 Tab Index Two
</p>

<p 
 tabindex="3" 
>
 Tab Index Three
</p>

<p 
 tabindex="3" 
>
 Tab Index Four
</p>

<p 
tabindex="4" 
>
Tab Index Five
</p>

Style Sheet

Please see elements.css for a set of CSS3 rule-sets applied to many tutorial pages. A few of the most common rule-sets display below.

.box,label,img.box, input.box{
color:white; 
width:42%; 
text-align:center;
font-weight:bold;
display:inline; 
float:left; 
margin:0px 2% 2% 2%;
padding:2% 1% 2% 1%; 
}
#eText .box, #eGraphic .box{width:92%;}
figure{
display:block;
width:100%;
margin:0px;
}
figure video#vid{
display:block;
width:50%;
margin:0px auto 0px auto;
text-align:center;
}
figcaption{
text-align:center;
margin-top:2%;
font-weight:bold;
}
figcaption cite{color:blue;}

.box{text-align:left;}

@media (orientation: portrait) {
figure video#vid{
width:100%;
}
.example{
width:80%;
}
#eText .box,#eGraphic .box,.box,img.box,input.box{
width:92%;
padding:4%; 
display:block; 
float:none;
}
}

Summary

You learned to apply Global Attributes to almost any HTML element. However not all elements respond to every global attribute. This section discussed a list of global attributes. See the Global Attributes List above. You saw examples with HTML markup, JavaScript and some styles.

Unusual HTML5 Skills

See the markup, CSS and results of various HTML5 elements, with styles and some unusual or seldom used techniques.

Tags