Lesson 11: Global Attributes

Overview

In this HTML lesson, we reveal which attributes are common to all HTML elements and how they function. Since they are usable on all elements, these are called "global attributes." There are 14 global attributes, which we divide into three groups. The first group is the most commonly used and contains id, class, style, and title. The second group is mostly programming related and consists of accesskey, tabindex, draggable, and contenteditable. Third group contains the uncommon attributes: hidden, data-*, dir, lang, spellcheck, and translate.

Common Attributes

Our first HTML document provide example usage of the global attributes id, class, style, and title. First, we demonstrate the usage of the style attribute by making the background of the second elment gray. Next, we use the title attribute to label the first image with a tooltip. The id attribute is used to link between two parts of the document at the start and end of it; images have been added to this document to help illustrate the link movement. While an id is useful for selecting a single element, a class is useful for selecting a group of elements, as we illustrate by styling the odd elements below with red borders.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ol>
      <li class="odd" id="start"><a href="#end">HTML</a></li>
      <li style="background-color: gray;">CSS</li>
      <li class="odd">JavaScript</li>
      <li title="Annuciation"><img src="TheAnnuciation.png"></li>
      <li class="odd">PHP</li>
      <li id="end"><a href="#start">XoaX.net</a></li>
      <li class="odd"><img src="TheAnnuciation.png"></li>
    </ol>
  </body>
</html>

Output

Output with Red Borders

Programming-Related Attributes

In our second HTML document, we make use of the global attributes accesskey, tabindex, draggable, and contenteditable. The accesskey is set to "x" on the second element. This means that we can select it by pressing the "alt" key and the "x" key together. After that, we can cycle through the rest of the elements via the "tab" key. We can drag the four element because we have set the draggable attribute to "true" for it. Finally, we can edit the fifth element by clicking on it and type, sicen we have set its contenteditable attribute.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p tabindex="2">The worst guilt is to accept an unearned guilt.</p>
    <p tabindex="1" accesskey="x">Those who grant sympathy to guilt, grant none to innocence.</p>
    <p tabindex="5">Guilt is altruism's stock in trade, and the inducing of guilt is its only means
    of self-perpetuation.</p>
    <p tabindex="4" draggable="true">Guilt is a rope that wears thin.</p>
    <p tabindex="3" contenteditable="true">We are on strike against the doctrine that life is
    guilt.</p>
  </body>
</html>

Output

Uncommon Attributes

Our last example HTML document, makes use of some of the less common attributes: hidden, data-*, dir, lang, spellcheck, and translate. We have set the first element's hidden, which makes it not visible. We set the data-* attribute for the second element, which invisibly holds data that can be access via a program or page reader. In the third element, we set the dir or direction attribute to "rtl" or right-to-left. Since this is the opposite of how the english language is written the content appears a little on--on the right of the page with the punctuation to the left. The lang attribute is used to indicate the language and is set to english in the html element and latin in the fifth element. The fourth element contains a misspelling and invokes the spellcheck attribute, but it will not indicate the misspelling until it has been selected. Finally, we set the translate attribute on the fifth element. This could be used a directive for a web page translator.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p hidden>Go from your country and your kindred and your father's house to the land that I will
    show you.</p>
    <p data-prophecy="Abram">I will make of you a great nation</p>
    <p dir="rtl">Judah and Israel were as many as the sand by the sea; they ate and drank and were
    happy.</p>
    <p contenteditable="true" spellcheck="true">And King Solomon sent and brought Hiram ffrom
    Tyre.</p>
    <p translate="true" lang="la">Deus caritas est</p>
  </body>
</html>