HTML and CSS Reference
In-Depth Information
Internationalization Improvements
While there are not many internationalization-supporting changes in the HTML5 specification,
it does make standard the
ruby
,
rp
, and
rt
elements, which were initially supported by the
Internet Explorer browsers to associate a reading text with a base text for certain East Asian
languages like Japanese. The base text that the annotation is associated with should be enclosed
in a
<ruby>
tag; the annotation, enclosed in a
<rt>
tag, will appear as smaller text above the
base text, and optionally an
<rp>
tag can be used to wrap content to delimit ruby text for
browsers that do not support this formatting:
<p>
<!-- The Kanji for Japanese language with the romanji above it or within
parens for non ruby aware browsers
-->
<ruby>
日本語
<rp>
(
</rp><rt>
nihongo
</rt><rp>
)
</rp>
</ruby>
</p>
HTML5 Metadata Changes
The next generation of Web sites will be loaded with metadata. Such “data about the data”
is needed to enable the semantic Web and to power emerging Web applications. HTML5
adds numerous attributes and defines metadata values that should assist the trend.
data-X Attributes
HTML5 defines a standard way to include developer-defined data attributes in tags, often
for the consumption by scripts. The general idea is to use the prefix
data-
and then pick
a variable name to include some non-visual data on a tag. For example, here an author
variable has been defined as custom data:
<p id="p1" data-author="Thomas A. Powell">
This is a data-X example
</p>
This value could then be read either by using the standard DOM
getAttribute()
method,
<form>
<input type="button" value="Show Author" onclick="alert(document.
getElementById('p1').getAttribute('data-author')); ">
</form>
or by using new HTML5 DOM objects and properties for accessing such data:
<form>
<input type="button" value="Show Author" onclick="alert(document.
getElementById('p1').dataset.author);">
</form>
