You are here: Home ‣ Dive Into HTML5 ‣
“DISTRIBUTED,”
“EXTENSIBILITY,”
&
OTHER FANCY WORDS
Show table of contents
DIVING IN
Here are over 100 elements in HTML5. Some are purely semantic, others are just containers for scripted APIs. Throughout the history of HTML, standards wonks have argued about which elements should be included in the language. Should HTML include a element? A element? How about a element? Decisions are made, specs are written, authors author, implementors implement, and the web lurches ever forward.
Of course, HTML can’t please everyone. No standard can. Some ideas don’t make the cut. For example, there is no element in HTML5. (There’s no element either, damn it!) There’s nothing stopping you from including a element in a web page, but it won’t validate, it won’t work consistently across browsers, and it might conflict with future HTML specs if we want to add it later.
Right, so if making up your own elements isn’t the answer, what’s a semantically inclined web author to do? There have been attempts to extend previous versions of HTML. The most popular method is microformats, which uses the class and rel attributes in HTML 4. Another option is RDFa, which was originally designed to be used in XHTML but is now being ported to HTML as well.
Microformats and RDFa each have their strengths and weaknesses. They take radically different approaches towards the same goal: extending web pages with additional semantics that are not part of the core HTML language. I don’t intend to turn this chapter into a format flamewar. (That would definitely require a element!) Instead, I want to focus on a third option which is part of, and tightly integrated into, HTML5 itself: microdata.
WHAT IS MICRODATA?
Each word in the following sentence is important, so pay attention.
PROFESSOR MARKUP SAYS
/> Microdata annotates the DOM with scoped name/value pairs from custom vocabularies.
Now what does that mean? Let’s start from the end and work backwards. Microdata centers around custom vocabularies. Think of “the set of all HTML5 elements” as one vocabulary. This vocabulary includes elements to represent a section or an article, but it doesn’t include elements to represent a person or an event. If you want to represent a person on a web page, you’ll need to define your own vocabulary. Microdata lets you do this. Anyone can define a microdata vocabulary and start embedding custom properties in their own web pages.
The next thing to know about microdata is that it works with name/value pairs. Every microdata vocabulary defines a set of named properties. For example, a Person vocabulary could define properties like name and photo. To include a specific microdata property on your web page, you provide the property name in a specific place. Depending on where you declare the property name, microdata has rules about how to extract the property value. (More on this in the next section.)
Along with named properties, microdata relies heavily on the concept of “scoping.” The simplest way to think of microdata scoping is to think about the natural parent-child relationship of elements in the DOM. The element usually contains two children, and. The element usually contains multiple children, each of which may have child elements of their own. For example, your page might include an element within an element within a element within the element. A data table might contain within within (within ).
(No Ratings Yet)