HTML Global Attributes in DOM

HTML Text and Other Elements in DOM – Part 1

DOM for HTML

Foreword: Before I talk about the specific DOM attributes and methods for Text and other Elements, I should talk about the global attributes and the DOM, in this part of the series; I use a text element for the examples.

By: Chrysanthus Date Published: 8 Jul 2015

Introduction

This is part 1 of my series, HTML Text and Other Elements in DOM. There are a number of attributes that are common to all HTML5 elements (including text elements). These are called global attributes. Before I talk about the specific DOM attributes and methods for Text and other Elements, I should talk about the global attributes and the DOM, in this part of the series; I use a text element for the examples.

Recall: HTML text elements are: a, em, strong, small, s cite, q, dfn, abbr, data, time, code, var, samp, kbd, sub, sup, i, b, u, mark, ruby, rb, rt, rtc, rp, bdi, bdo, span, br, wbr, ins, del.

The rest of this tutorial talks about global attributes: how to code them in HTML and how to access them with DOM. Accessing an attribute means you are reading (getting) the value of the attribute or you are changing (setting) the value.

The names of HTML global attributes are: id, style, title, class, lang, dir, and translate. As mentioned above, these attributes do not only belong to text elements, they belong to all HTML elements.

Pre-Knowledge
At the bottom of this tutorial, you have links to series you should have read before reaching here (this series).

The id Attribute
The value of the id attribute identifies the element. The only restriction to the value of the id is that there should be no space. As well as consisting of only alphabets, the value can consist of only numbers. The value can start with a number. Since no space is allowed in the value, the value does not necessarily have to be in quotes (in the HTML tag).

You can code the id of the span element in HTML as follows:

some text

You can use DOM, to access and change the color of the span element text to red as follows:

document.getElementById('2SP').style.color = 'red';

Note the use of the expression, document.getElementById('2SP'), which is a reference to the node of the span element (in DOM).

The value of the id should be unique in a document.

The style Attribute
The style attribute is used to affect the presentation (looks) of an element. You can give the color of text for the span element using HTML, as follows:

 some text

You can use DOM to access and change the color of the span element text to blue as follows:

 document.getElementById('2SP').style.color = 'blue';

The title Attribute
The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. When the mouse pointer goes over the element, you see the tooltip. The following HTML tag shows how to code the title attribute (in HTML):

 some text

You can use DOM, to access and change the value of the title attribute to something else, as follows:

 document.getElementById('2SP').title = 'A simple example!';

The class Attribute
This attribute is used by CSS for presentation (look) of the element. I will say more about it in a different series.

The lang Attribute
This attribute indicates the language for the content of the element and for the values of the attributes (of the element). Examples of languages are English, French and German. If the language is French, then the value of the attribute has to be fr. In the absence of this attribute (and its value) the English language is assumed. You will consult some other document for the value of each language. An example of the use of this attribute in HTML coding is:

 Je t’aime

You can use DOM, to access and change the value of the lang attribute to something else, as follows:

 document.getElementById('2SP').lang = 'en';

If this attribute is omitted from an element, then the language of the element is the same as the language of its parent element, if any.

The dir Attribute
The English language is written from left to right, abbreviated ltr. Some languages of the Eastern part of the world are written from right to left, abbreviated rtl.

Some attributes can only take one of a finite set of reserved words (keywords) as values. Such attributes are called enumerated attributes. The dir attribute is an enumerated attribute with the following reserved words and states:

The ltr reserved word, which maps to the ltr state:
This indicates that the contents of the element are explicitly directionally isolated left-to-right text.
The rtl keyword, which maps to the rtl state:
This indicates that the contents of the element are explicitly directionally isolated right-to-left text.
The auto keyword, which maps to the auto state:
This indicates that the contents of the element are explicitly directionally isolated text, but that the direction is to be determined programmatically using the contents of the element (see later).

The following attributes are directionality-capable attributes:

    abbr on th elements
    alt on area, img, and input elements
    content on meta elements, if the name attribute specifies a metadata name whose value is primarily intended to be human-readable rather than machine-readable
    label on optgroup, option, and track elements
    placeholder on input and textarea elements
    title on all HTML elements

The syntax,

    document . dir [ = value ]

returns the html element's dir attribute's value, if any. Can be set, to either "ltr", "rtl", or "auto" to replace the html element's dir attribute's value.

Well, I will not say more about the dir element in this section. I hope to come back to it in some other series.

The translate Attribute
Some attributes can only take one of a finite set of reserved words (keywords) as values. Such attributes are called enumerated attributes. The translate attribute can only take one value from the set, { "", yes, no}.

The translate attribute is an enumerated attribute that is used to specify whether an element’s attribute values and the values of its Text node children are to be translated automatically by the browser, when the page is localized, or whether to leave them unchanged.

Imagine that someone in the USA has produced a web page in English, and someone in France wants to read that same web page in his browser that is in French. In France, the English page in the French browser is said to be localized. Now, in France, if the value of the translate attribute is yes, the browser will translate the attribute values of the element (and children text nodes). If the value is no, then the attribute values of the element (and children text nodes) are not to be translated, by the browser. If the value is the empty string or the translate attribute and value are omitted entirely, then it is the value of the translate attribute of the parent element that will take effect in the element. If there is no translate attribute in any ancestor element, then the browser will not do any translation for the element (or any child element).

If an ancestor element has the translate attribute set to yes, a descendant element may override that at its descendant level by setting its own translate attribute to no.

Note that the browser automatic translation is not reliable. If you want a reliable translation, consult a human professional translator, and have a separate web page for the foreign language.

The HTML5 specification is not very clear on the use of the translate attribute. So, the following example is a copy from the specification.

In this example, everything in the document is to be translated when the page is localized, except the sample keyboard input and sample program output:

<!DOCTYPE HTML>
<html> 
<head>
 <title>The Bee Game</title> 
</head>
<body>
 The Bee Game is a text adventure game in English.
 When the game launches, the first thing you should do is type
 <kbd translate=no>eat honey</kbd>. The game will respond with:
 <pre><samp translate=no>Yum yum! That was some good honey!</samp></pre>
</body>
</html>

The following attributes are translatable attributes:

 abbr on th elements
 alt on area, img, and input elements
 content on meta elements, if the name attribute specifies a metadata name whose value is known to be translatable
 download on a and area elements
 label on optgroup, option, and track elements
 lang on HTML elements; must be "translated" to match the language used in the translation
 placeholder on input and textarea elements
 srcdoc on iframe elements; must be parsed and recursively processed
 style on HTML elements; must be parsed and recursively processed (e.g. for the values of 'content' properties)
 title on all HTML elements
 value on input elements with a type attribute in the Button state or the Reset Button state

The translate attribute must, on getting, return true if the element's translation mode is translate-enabled (yes), and false otherwise (no). On setting, it must set the content attribute's value to "yes" if the new value is true, and set the content attribute's value to "no" otherwise. (All that is from the specification).

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

HTML Global Attributes in DOM

HTML Text and Other Elements in DOM – Part 1

DOM for HTML

Introduction

Related Links

Comments