You can still use div

Mike Robinson — Tue, 13 Jul 2010 13:30:37 +0000

“Sorry, can you say that again?”, I hear you ask. Certainly: you can still use

! Despite HTML5 bringing us new elements like

, and

, the

element still has its place. Let the HTML5 Doctor tell you why.

Status: Unchanged

In HTML 4, the

element was defined to be a generic element for structuring a page. Although you can allude to the nature of its content by assigning id and class attributes with meaningful names, a

has almost no semantic meaning. The HTML5 definitionis basically the same as in HTML 4:

The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

W3C Specification

is literally a container for flow content*, a collection of (hopefully) more semantically marked-up content that may need to be grouped together. It lies at the opposite end of the semantic spectrum from the new HTML5 structural elements.

* For those who haven’t encountered this term before, flow content elements are the same as HTML 4’s block-level content elements.

vs semantic elements

The new semantic elements (

, and friends) justifiably capture a lot of

’s territory, but

still has a place in the HTML5 world. You should use

when there is no other more semantically appropriate element that suits your purpose. Its most common use will likely be for stylistic purposes — i.e., wrapping some semantically marked-up content in a CSS-styled container.

Ask yourself questions about your content: Is it part of the site’s navigation? Is the content secondary to its surrounding content? If this content were printed on a page with nothing else, would it make sense? You will need to evaluate your content carefully, thinking about what it is and pairing it with an appropriate element. I recommend taking a look at The Amazing HTML5 Doctor Easily Confused HTML5 Element Flowchart of Enlightenment to help you choose the right element for your flow content.

Example Uses

Below are a few examples of how you can still use

appropriately in your HTML5 sites.

Site Wrapper

While you can use the element as a “natural” wrapper for site content, many people like to use

as top-level container for styling the entire site. This is an appropriate use of

, as a site wrapper has no meaning or purpose other than to aid styling.


  
    
      My Happy Blog

Intro paragraph

If you want to style a particular block of content, like the intro to an article,

is a perfectly suitable element:


  Big announcement
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  
  Sed massa metus, molestie nec facilisis non, lobortis ac orci. Suspendisse porttitor laoreet mi, at laoreet dolor rhoncus non. Sed ut massa quis mi placerat iaculis non sit amet odio. Cras tempus urna vitae felis rutrum porta.
  Maecenas auctor lacus eget mauris tincidunt consectetur. Donec molestie malesuada ligula, sed feugiat massa consequat sit amet. Pellentesque orci metus, ultricies sit amet adipiscing eget, gravida fringilla dui. Vestibulum accumsan dui diam, eget venenatis urna. Sed eu lobortis justo. Aliquam erat volutpat. Aliquam erat volutpat.

The first two paragraphs aren’t really that different from the rest of the article, but by wrapping them in a

, they can be styled to capture the reader’s attention and draw them into the article. Of course, if you only want to style the first paragraph, you could use a CSS selector like h1 + p {} or article p:first-child {}. But if you want to style an article’s first paragraph only sometimes, or you need the style to work in older versions of Internet Explorer, or (as in this case) you want style more than one paragraph, a wrapper

is the way to go.

Other uses for

As previously stated, use of

will decline in favour of the new semantic elements. If you’re using lots of

s and only a few of the semantic elements in your HTML5 sites, then you’re really not taking advantage of what HTML5 has to offer.

That said, you may need to rely on

as you transition into the world of HTML5. For example, if many of your site’s visitors use Internet Explorer with JavaScript disabled, then you won’t be able to style the new elements for these users. A piece of advice we gave back in our article on how to use HTML5 in your client work right now was to use

with classes named after the new semantic elements, getting you to think about how you would use the new semantic elements without actually using them.


  
    My blog post
    An example using divs with classes instead of the new elements.
  
  



  
    My blog post
    The same article but switched to the new elements.

This makes it simple to switch to the new elements when it becomes practical (think “search and replace”).

Recap

You will certainly use

less often in HTML5 than you did in HTML 4, but it’s still a valuable element to have in your toolkit. Sure, it’ll be picked last for the team because everyone else is better, but it’ll be the best damn generic container element there is!*

Look at the more semantically valuable elements and consider whether your content would benefit from what they offer. Need help deciding? Take a look at some of these articles right here on HTML5 Doctor:

For more, check our article archive. And if all else fails, use a

* As it should be, it’s the only one apart from . That said, if your content is just text, perhaps the oft-overlooked

would be more appropriate.

Share and Save:

You can still use div originally appeared on HTML5 Doctor on July 13, 2010.

Video: the track element and webM codec

Bruce Lawson — Thu, 24 Jun 2010 13:45:42 +0000

There are a couple of interesting developments in the world of HTML5 multimedia that you’ll be interested in. The first is the new element (currently only in the WHAT-WG spec due to political stuff).

is a child of a or element that links to a timed track, or time-based data. The kind of data is set via a kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata, depending on the type of information you’re adding to your media. These point to a source file containing timed text that the browser will expose via some kind of user interface, if the visitor requires additional data.

This will allow for “write once, use everywhere” accessibility; anyone linking to that file with a or element that includes the element can access your information.

The file format is a new format called WebSRT, which competes with about 50 other timed formats, including some W3C formats (hence the omission of from the W3C spec).

Added 9 July 2010: Here’s a readable overview of the SRT format.

Given that the format itself isn’t fully specified yet, it will be a while until we see implementation in browsers. But it’s good to know that there will be an official way to add accessibility information to media. Until then, I have a JavaScript hack to take timed s out of an in-page transcript to superimpose over a video.

WebM video format

The big news of the last month is that Google open-sourced the VP8 video codec that it acquired when it took over On2 Technologies. When combined with the Vorbis audio codec (that Spotify uses) and wrapped in a subset of the Matroska container format, it’s collectively known as WebM.

All YouTube videos are being transcoded to WebM, and Adobe have also announced they will include it in their Flash player. It’s available in an Opera 10.60 beta, a Firefox testing build, and a Chromium dev channel. Even Microsoft have said that IE9 will support it if the codec is installed on the computer.

The VP8 video codec itself is high-quality (Google had said that Ogg Theora wasn’t good enough compression-to-quality for YouTube, but Theora was based on the VP3 precursor to VP8). It’s available for streaming too.

If you want to encode to WebM, you can try the Miro Video Converter utility. Although it doesn’t allow you to optimise settings, it’s very easy to use. As the codec becomes more widespread, expect to see many more tools for content creation, editing, and transcoding.

Once production versions of the browsers are available, you should encode your videos with WebM as the first option, Ogg for older versions of Opera, Firefox and Chrome, falling back to royalty-encumbered H.264 for Safari and links to downloads or a Flash player for legacy browsers:






Your browser does not support video; download the WebM, mp4 or Ogg video for off-line viewing.

If, however, you’re having problems with the iPad, put the MP4 version first in the element; apparently there’s a bug that causes the iPad only to see the first element.

It’s a long haul, and it’s not over yet, but and .webM show significant progress towards our goal of accessible, open, and royalty-free video playing natively in the browser.

Share and Save:

Video: the track element and webM codec originally appeared on HTML5 Doctor on June 24, 2010.

The dl element

Mike Robinson — Thu, 03 Jun 2010 14:00:10 +0000

The

element existed in HTML 4, but it’s been repurposed in HTML5. Let the Doctor explain what’s changed and how it can be used.

It’s all in the description

In HTML 4,

was considered a “definition list”, containing groups of terms and their definitions. The terms and definitions were a many-to-many relationship: one or more terms to one or more definitions. The element was often misunderstood and therefore misused or not used at all in favour of more widely used and (perhaps) less semantic markup.

To address these issues,

HTMLdescription list

The dl element represents an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (dt elements) followed by one or more values (dd elements). Within a single dl element, there should not be more than one dt element for each name.

It maintains the many-to-many relationship between names and values. These groupings use

to represent the term or name and

for the description. Also note the last line of the quote, stating that a name should not be used more than once within a single

Example Uses

I’ve put together a couple of appropriate uses of

to get your creative juices flowing.

Glossary

can be used to mark-up a glossary of terms, although you must remember to use to indicate that the word is defined here:


  The article element
  An independent piece of content, one suitable for putting in an
    article element, is content that makes sense on it’s own. This yardstick
    is up to your interpretation, but an easy smell test is would this make sense
    in an RSS feed? Of course weblog articles and static pages would make sense
    in a feed reader, and some sites have weblog comment feeds..
  ...
  
    Glossary
    
      RSS
      An XML format for aggregating information from websites whose
        content is frequently updated.
      Weblog
      Contraction of the term "web log", a weblog is a
        website that is periodically updated, like a journal

The example content is from our recent post on the article element. In the example, I plucked out the terms “RSS” and “weblog” and defined them in a handy glossary. Since this information is supplementary to the article, the glossary has been placed in an

Metadata

) to one key (
). Multiple keys ( ) to a single value As mentioned above, a may map many keys ( ) to many values ( ). This means that one term might have multiple descriptions, or there may be multiple terms that mean the same thing. Related s should follow each other immediately before their descriptive . colour color The visual result of light in their emission, transmission and/or reflection. This perception is determined by the hue, brightness and saturation of the light at a specific point. Here I have indicated that there are two different spellings of “colour” and grouped these terms to match them with the same description. It is not appropriate, however, to use the same key multiple times within a single . You can’t define “car” as one thing at the start of a and then define it again at the end of that same . If you have multiple descriptions for a single term, you should list both s directly under the same . Chips Strips of potato usually deep fried in fat. Commonly referred to as "french fries". A small fragment that has been broken off from a larger body (e.g. stone). What it should not be used for Dialogue was a suggested use for in HTML 4, which was widely debated and often considered inappropriate. This application of the element is no longer recommended in HTML5, and the new definition of the element does indeed back this up. When marking up a conversation, you’re not describing the speaker, but rather stating what they said. With the demise of , conversations have no specific markup element. Instead, the specification makes recommendations of how to mark up conversations. Summary The changes to are fairly minor, but the new definition should clear up confusion and enable developers to use it more appropriately. You can use this element to represent key-value pairs semantically and couple it with other elements like and to give context to this information. Where do you see yourself using in HTML5? Perhaps details about a downloadable file? Or are you going to give your more technical blog articles a glossary? Let us know in the comments! Related Posts: The article element A little more conversation with dialog HTML5 Doctor Glossary Aside Revisited Understanding aside Share and Save: The dl element originally appeared on HTML5 Doctor on June 3, 2010.
) to a single value

The article element

Tom Leadbetter — Tue, 18 May 2010 14:00:27 +0000

We’ve discussed a lot of new elements here at HTML5Doctor, but the article element has somehow escaped the microscope… until now! article is one of the new sectioning elements. It is often confused with section and div but don’t worry we’ll explain the difference between them.

What the spec says

Thankfully, the spec is short and sweet:

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
W3C Specification

In addition to it’s content, an

element typically has a heading (often in a header element), and sometimes a footer. The easiest way to conceptualise

is to think of it’s use in a weblog, as mentioned in the spec’s examples “a blog entry” and “user-submitted comments.” Here at HTML5 Doctor, we wrap each weblog entry inside an

element. We also use

on ‘static’ content pages, like the About and Contact pages, as

can be used for “any other independent item of content.” The tricky part is, what exactly is an independent item of content?

The smell test for going independent

An independent piece of content, one suitable for putting in an

element, is content that makes sense on it’s own. This yardstick is up to your interpretation, but an easy smell test is would this make sense in an RSS feed? Of course weblog articles and static pages would make sense in a feed reader, and some sites have weblog comment feeds. On the other hand, a feed with each paragraph of this article as a separate post wouldn’t be very useful. The key point here is that the content has to make sense independent of its context, i.e. when all the surrounding content is stripped away.

Examples of
in use

A bare-bones

We only have a title and some content, but it’s enough to make sense on it’s own (assume there’s a lot more content about apples


	Apple
	The apple is the pomaceous fruit of the apple tree...
	...

A weblog-style

A published date leads us to add a

, and there’s also content that would be suitable in a

elements.


  
    Apple
    Published: 2009-10-09
  
  The apple is the pomaceous fruit of the apple tree...
  ...
  
    Creative Commons Attribution-ShareAlike License

An
with comments as nested
s

This example shows a weblog entry with comments. Each comment can be marked up as an

within the containing


  
    Apple
    Published: 9th October, 2009
  
  The apple is the pomaceous fruit of the apple tree...
  ...
  
  
    Comments
    
      
      Posted by: Apple Lover
      ~1 hour ago
    
    I love apples, my favourite kind are Granny Smiths
    
    
    
      
        Posted by: Oranges are king
        ~1 hour ago
      
      Urgh, apples!? you should write about ORANGES instead!!1!

An
with
s

You can use the

element to split the article into logical groups of content with headings:


  Apple varieties
  The apple is the pomaceous fruit of the apple tree...

  
    Red Delicious
    These bright red apples are the most common found in many supermarkets...
  

  
    Granny Smith
    These juicy, green apples make a great filling for apple pies...

A
containing
s

Where appropriate a

element can contain

elements. We already saw this in the comment section example above, and other common examples are the homepage or category pages of a weblog:


  Articles on: Fruit

  
    Apple
    The apple is the pomaceous fruit of the apple tree...
  

  
    Orange
    The orange is a hybrid of ancient cultivated origin, possibly between pomelo and tangerine...
  

  
    Banana
    Bananas come in a variety of sizes and colors when ripe, including yellow, purple, and red...

Using
for a widget

The specification also mentions that an interactive widget can also be an

. The example below shows how the markup might look for an embedded widget from somewhere like Widgetbox.


  My Fruit Spinner

The `pubdate` attribute

You may have noticed the pubdate attribute in these examples. pubdate is an optional boolean attribute that may be added to one time element within the

. If present it indicates that the element is the date the

was published. It can be written in several ways, the most popular being:

pubdate
pubdate="pubdate"

You could think of these as HTML and XHTML-style — the end result is the same so use the style you like. Note that pubdate applies only to the parent

element, or to the document as a whole.

The difference between
and

There’s been a lot of confusion over the difference (or perceived lack of a difference) between the

and

elements in HTML5. The

element is a specialised kind of

; it has a more specific semantic meaning than

in that it is an independent, self-contained block of related content. We could use

, but using

gives more semantic meaning to the content.

By contrast

is only a block of related content, and

is only a block of content. Also as mentioned above the pubdate attribute doesn’t apply to

. To decide which of these three elements is appropriate, choose the first suitable option:

Would the content would make sense on it’s own in a feed reader? If so use
Is the content related? If so use
Finally if there’s no semantic relationship use

Dr Bruce has written HTML5

s and

s, what’s the difference?, so we recommend reading that if you are still fuzzy on when to use

Summary

Hopefully this post has given you some insight into the correct use of the

element. Do you have any other examples that you can share for using

in your HTML5 markup?

I’m also keen to hear your thoughts on the confusion between the

and

elements. Do you think the distinction between the two is clear?

Share and Save:

The article element originally appeared on HTML5 Doctor on May 18, 2010.

The ruby element and her hawt friends, rt and rp

Oli Studholme — Tue, 11 May 2010 14:00:55 +0000

Ruby text is a short annotation for some base text. It’s typically used to give pronunciation guidance in a phonetic script for kanji in Chinese, Japanese, and Korean (CJK) languages. It’s named after an old printers’ term for the very small size of 5.5 points.

The ruby element allows spans of phrasing content to be marked with ruby annotations.
W3C Specification

As the name implies, ruby text is small, displayed by default above the base text in horizontal text and to the right in vertical text. Browsers without support put the ruby text inline after the base text.

These are the elements used in creating ruby text in HTML5:

— an inline element that contains base text with ruby annotations
— ruby text, coming after the base text it defines
— ruby parentheses, an element used to wrap opening and closing parentheses around ruby text. These are for user agents that don’t support ruby text, so that it makes sense when displayed inline. Browsers that support hide via {display:none;}.

Examples

If you’ve never seen ruby in action you’re probably wondering what I’m talking about, so here are some examples:

Furigana ruby text in the Japanese manga Vagabond

Snippet of a Taiwanese newspaper for students, with bopomofo ruby

Korean hangul followed by hanja in an editorial on Chosun.com

Browser support

As is often the way with internationalisation features, browser support is — well, sparse. In a break from your expectations, Internet Explorer has supported since IE5 — three years before the actual 2001 W3C Ruby Annotation specification! While this specification was incorporated into XHTML 1.1, no browser ever implemented it.

in HTML5 is based on a reverse-engineering of IE’s implementation. It also lacks Ruby Annotation’s ‘complex ’, as these can normally be accomplished via nesting. (Please submit feedback if you have a real-world example that can’t be.) Webkit added HTML5 support at the start of 2010. At the time of writing, has made it into Chrome but not Safari. Firefox and Opera have yet to implement natively, although there are Firefox extensions for support (HTML Ruby (basic ruby including HTML5) and XHTML Ruby (complex ruby)).

On the styling side, there’s the W3C CSS3 Ruby Module (2003). It’s based on Ruby Annotation’s ‘complex ruby’ and is being updated for HTML5 . Because of this, it’s also yet to be implemented beyond the default IE-level formatting. Ruby text will be used in combination with the W3C CSS Text Layout Module Level 3 properties direction, block-flow, and writing-mode for alternative text flow (such as vertical text), but again these have poor implementation.

Summary of browser support for display & styling in the five main browsers
Browser	Basic	`writing-mode`	‘Complex ’	CSS3 Ruby (2003)
Internet Explorer	IE5.5+	IE6+*	-	-
Firefox	(via plugin)	-	(via plugin)	-
Chrome	Chrome5+	-	-	-
Safari	Safari5+	-	-	-
Opera	-	-	-	-

Note: writing-mode support in IE6 was lr-tb and tb-rl only. IE8 added support for all possible combinations.

CSS we can use

Having said that no browsers support the CSS3 Ruby module yet, there are still a few things we can do to style and friends. Default browser styles use font-size and display, so we can safely change these to affect display in both supporting and non-supporting browsers.

If you want to de-emphasise the ruby text when it’s displayed inline in non-supporting browsers, you could do this via setting the size of and , as IE and Webkit do:

rt, rp {font-size: 60%;} /* = Webkit value */

You can also move ruby text and parentheses to after the base text, mimicking non-supporting browser rendering on supporting browsers:

rt, rp {display: inline; font-size: 100%;}

Finally, if you’re brave/foolish, you can implement ruby display yourself via CSS inline-table (CSS with explanation and demonstration (Hiragana.jp)). Note that this currently doesn’t work in Chrome because of a bug with display:inline-table on (fixed in trunk), and as you’ll probably need per-browser style tweaks, I recommend against it.

Code samples and output

These code samples (with notes and CSS) are also available separately.

in Japanese — furigana and rōmaji

Using without

攻殻こうかく機動隊きどうたい

Using to indicate the pronunciation of the Japanese name of the Ghost in the Shell anime series in furigana. Notice that the lack of makes it pretty unreadable in a non-supporting browser (you may have to trust me on this!).

Using with

攻殻（こうかく）機動隊（きどうたい）

The above example with text surrounded by parentheses degrades gracefully on non-supporting browsers.

Nested for multiple ruby texts

攻（こう）殻（かく）機（き）動（どう）隊（たい）（Kōkakukidōtai）

The scope of depends on the amount of base text before it, from one character to an entire phrase. can also be nested to provide multiple ruby texts for one base text — in this case furigana and rōmaji. Although per-kanji is more informative, it degrades somewhat poorly in non-supporting browsers. Copy & paste support is also poor, as browsers just use source order, for example “攻こう殻かく機き動どう隊たい Kōkakukidōtai”. It’s also a PITA to code

Japanese glossary

Furigana is the name given to using hiragana phonetic script beside words written in kanji to aid reading. It’s used extensively in education for learners of Japanese, and in reading material for children. It’s also sometimes used when writing kanji a literate adult may not be able to read.

Rōmaji is the romanisation of Japanese into the latin alphabet. Rōmaji is generally used for those who don’t know Japanese, especially in signage and tourism information.

in Chinese — Pīnyīn and zhùyīn fúhào (bopomofo)

Ruby is used to some extent in China (pīnyīn), and more so in Taiwan (zhùyīn fúhào), especially in textbooks and signage.

Pīnyīn

The Grass mud horse — 草泥馬(Cǎo Ní Mǎ) — is … characterised as “lively, intelligent and tenacious”. However, their existence is said to be threatened by the “river crabs” — 河蟹 (héxiè)  — which are invading their habitat.

In this example of pinyin you can see how significantly affects the leading () of text blocks in supporting browsers. Setting font-size for and can de-emphasise ruby text in non-supporting browsers, as demonstrated in the second in the second image.

Zhùyīn fúhào

世（ㄕˋ）上（ㄕㄤˋ）無（ㄨˊ）難（ㄋㄢˊ）事（ㄕˋ）只（ㄓˇ）怕（ㄆㄚˋ）有（ㄧㄡˇ）心（ㄒㄧㄣ）人（ㄖㄣˊ） （Anything can be done with enough perseverance）

Unfortunately, no browser can render this example of Zhùyīn fúhào (bopomofo) ruby on horizontal Mandarin Chinese correctly. I’ve included an ideal rendering and how it appears in both a browser supporting simple ruby (with incorrectly rendered bopomofo) and a non-supporting browser.

Chinese glossary

Pīnyīn is a romanised phonetic system for Chinese, generally written above or after the word. Bopomofo (Zhùyīn fúhào) is a phonetic script for transcribing Chinese, especially Mandarin. It is generally written (in both horizontal and vertical scripts) vertically to the right of each hanzi character.

Korean ruby

While the use of hanja (kanji) is decreasing in South Korea, they are still used for disambiguation and proper names.

한자(漢字)

Current Korean ruby use is to have the hangul coming before the hanja in parentheses (the opposite way from the default fallback style). For styling use: rt, rp {display: inline; font-size: 100%;}. This formatting is also used when foreign words such as English are included in Korean text.

Korean glossary

Hangul is the Korean script, and hanja is Korean for Chinese characters. Traditionally written Korean used hanja, but now it’s mainly used in academic texts and occasionally for disambiguation.

Using for English

Not everyone is using East Asian languages, but any short annotation is (theoretically) applicable. While English doesn’t typically have pronunciation guidance, phonetic annotations are used in dictionaries:

cromulent (crôm-yü-lənt)

Using ruby text for a dictionary definition by displaying the ruby text inline after the base text

: to use or not to use

The main use case of is marking up pronunciation in Asian writing, such as bopomofo for traditional Chinese and furigana for Japanese. I don’t know whether Arabic diacritics like Taškīl, Hebrew Niqqud, or other non-CJK languages would use for marking up phonetic annotations or diacritics. The WHATWG specification says:

Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations

WHATWG specification

As someone who uses tools like Popjisyo to add pop-up readings and translations to kanji, I definitely see as semantic (and valuable) for ‘phonetic annotation,’ in the same way that provides extra information on potentially confusing content. Outside of this usage, however, could be seen as a presentational hack. Oh noes! I believe the Korean and English examples above are valid uses, but much like some people think the extra code of using is not justified when the default presentation is the same as plain text.

To further muddy the waters, the 2001 W3 Ruby specification included an abbreviated word marked up with a visible definition via , and a use-by date where the day, month, and year are added via . These uses seem like presentational hacks to me, and while they’re not forbidden, the lack of such examples in HTML5 indicate they’re not exactly blessed either

In conclusion…

The most important thing is that the , , and elements are valid HTML5, and even if they’re not officially supported, they will by default display as if they were s in non-supporting browsers. Because of this, if you actually need to use , especially for phonetic annotations, do it! It might not look perfect yet in non-supporting browsers, but this will change, and hey, at least you don’t have IE support to worry about!

For non-phonetic annotation, consider using to give an expanded reading via mouse-over for an abbreviation or acronym, unless displaying the reading by default is important. Consider for phrasing content-level side comments, if the comment placement is not important and the association with the relevant content doesn’t need to be explicit.

Feedback please!

So what do you think of and friends? Let us know in the comments! If you know about the use of annotations like this in other languages, or have used , tell us about it too!

Share and Save:

The ruby element and her hawt friends, rt and rp originally appeared on HTML5 Doctor on May 11, 2010.

The figure & figcaption elements

Richard Clark — Tue, 13 Apr 2010 13:45:20 +0000

In traditional printed material like books and magazines, an image, chart, or code example would be accompanied by a caption. Before now, we didn’t have a way of semantically marking up this sort of content directly in our HTML, instead resorting to CSS class names. HTML5 hopes to solve that problem by introducing the

and

elements. Let’s explore!

The
element

The

element is intended to be used in conjunction with the

element to mark up diagrams, illustrations, photos, and code examples (among other things). The spec says this about

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.
W3C Specification

The
element

The

element has been the subject of much debate. The spec initially wanted to repurpose rather than introduce a new element. Other suggestions included , ,

or the

–

elements. was changed, so we then used a combination of

and

inside

at Jeremy’s suggestion. Most of these suggestions failed since there was no backwards compatibility for styling with CSS.

Regular readers will know that a new element was recently introduced, namely

. Who knows if it’ll stick, but for now here’s what the spec says about

The figcaption element represents a caption or legend for a figure.
W3C Specification

The

element is optional and can appear before or after the content within the

. Only one

element may be nested within a

, although the

element itself may contain multiple other child elements (e.g., or

).

Using  and 

So we’ve seen what the spec says about these elements. How do we use them? Let’s look at some examples.

Figure with an image

An image within a 
 element without a caption:



Here’s the code for that:


  


Figure with an image and caption

An image within a 
 element with an explanatory caption:

A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark


and the code that we used:


  
  A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark


A figure with multiple images

Nesting multiple images within one 
 element with a single caption:

Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet.
Originals by Richard Clark


The code:


  
  
  
  Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by Richard Clark


Figure with a code block

The 
 element may also be used for code examples:

Creative Commons Attribution Share-alike license
Using  around a Creative Commons license link with rel="license"


Here’s the code for that:


<small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a></small>
Using <small> around a Creative Commons license link with rel="license"


Differences between  and 

We covered 
 in an earlier article, but it is important to note the difference between the two. You should choose between  or  by asking yourself if the content is essential to understanding the section:


  If the content is simply related and not essential, use .
  If the content is essential but its position in the flow of content isn’t important, use .


Having said that, if its position relates to previous and subsequent content, use a more appropriate element — e.g., a 
, a plain old , a , or possibly even , depending on its content.

Don’t stop there!

No need to constrain your 
s to images and code examples. Other content suitable for use in  includes audio, video, charts (perhaps using  or ), poems, or tables of statistics.

It may not always be appropriate to use the 
 element, though. For example, a graphic banner should not be marked up with . Instead, simply use the  element.

Summary

As we’ve illustrated in this article, there are a lot of possibilities for the 
 element. Just remember to make sure it’s the most appropriate element for the job. But you already do that for all your markup, right?  
Related Posts:
The small & hr elements
The hgroup element
Hello, summary and figcaption elements
Your Questions Answered 9
September HTML5 spec changes


Share and Save:


	
	
	
	
	
	
	
	
	
	
	
	
	
	
	




The figure & figcaption elements originally appeared on HTML5 Doctor on April 13, 2010.



The nsfw element
Bruce Lawson — Thu, 01 Apr 2010 07:30:20 +0000

			

				

			
		
Among the new semantic elements for section, footer, header, and the like, HTML5 also adds an element that can contain any other element and describes it as Not Safe For Work (commonly abbreviated to “nsfw”).
Browsers can be configured by parents or workplace sysadmins never to show content marked as , thereby shielding faint-hearted people from obscenity and protecting employers from employees downloading things they shouldn’t.
It’s not just a presentational element, although it does carry with it the default CSS:
nsfw { display: none; }
The user agent is forbidden from downloading any of the resources contained within the element if the browser’s  setting is “on”.
It works like this:

 
 
 
 Huge cockerel: two chicks, one coop.
 

The entire figure is taken out of the document flow with no indication to the user that something is missing (which could tempt teenagers to circumvent the browser setting). Although the video is set to autoplay, it will never even be downloaded, meaning nothing compromising will be in the user’s cache.
The new element was suggested by Ian Hickson, the editor of the HTML5 spec and Google employee: “Google builds a separate index for those who search using Google SafeSearch. Given that 72.3% of the Web is not safe for work but we currently have to analyse that using machines, semantically marked-up porn and foul language will dramatically reduce the time it takes to build our index, enhance its accuracy and, most importantly, protect little children.”
So far, it is not implemented in any browser, although in its recent IE9 announcement, Microsoft confirmed that IE9 and its Bing search engine will use a Microsoft-only extension  instead of the standard .

Related Posts:

YouTube and Vimeo support HTML5 Video
The video element
Native Audio in the browser
HTML5 Reset Stylesheet
Your Questions Answered #10


Share and Save:
	

	

	

	

	

	

	

	

	

	

	

	

	

	

	



The nsfw element originally appeared on HTML5 Doctor on April 1, 2010.



The hgroup element
Richard Clark — Tue, 23 Mar 2010 15:45:12 +0000

			
				
			
		
One of the new elements defined in HTML5 is 
, used for grouping titles with their associated subtitles. But why do we need  when we’ve already got the  element? In this article, we’ll do our best to answer that question.

What is the  element?
Here’s what the spec says about 
:
The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.
W3C Specification

So what does that mean?
 acts as a wrapper for two one or more related heading elements possibly contained within a  element. It can only contain a group of – element(s), and it should be used for subtitles, alternative titles, and tag lines.

The easiest way to demonstrate proper use of 
 is through some examples. Thanks to Dr. Oli for letting us use his examples.

An article with one title
The title consists of a single 
, so neither  nor  is required:

  Title goes here
  Lorem Ipsum dolor set amet


An article with a title and metadata
Here we’re using 
 to group the title and associated metadata, so an  is not required:

  
    Title goes here
    20th March, 2010
  
  Lorem Ipsum dolor set amet


An article with a title and subtitle
An 
 contains the title and subtitle of the article:

  
    Title goes here
    Subtitle of article
  
  Lorem Ipsum dolor set amet


An article with a title, subtitle and metadata
An 
 contains the title and subtitle of the article, and then a  contains the metadata and the :

  
    
      Title goes here
      Subtitle of article
    
    20th March, 2010
                  
  Lorem Ipsum dolor set amet



Real world examples
On Alex Gibson’s MiniApps, he uses 
 to include a tag line after the main “MiniApps” heading. (This is also what we’ve done on this site if you view the source.)


	
    Screenshot from Alex Gibson’s MiniApps site


So why use ?
It’s all about the document outline. When grouping headings in an 
 element, the outline algorithm will mask the lowest level all but the highest level heading in the group from the resulting document outline. Using MiniApps as an example again, in his markup (although this is simplified), Alex uses:

<header>
  <hgroup>
    <h1><a href="/">Mini Apps</a></h1>
    <h2>Web applications for iPhone, Android & other mobile platforms</h2>
  </hgroup>
</header>


The 
 contains both  and  elements, but the outliner only includes the . This is illustrated in the image below. (Please ignore the “untitled section” as well. This is caused by the nav element, and a change request has been submitted to address this.)


	
    Document outline of miniapps.co.uk


We’ll be covering document outlines in another article, so I won’t go into detail here. You can test your own pages in the HTML5 Outliner to ensure that you’re using the heading elements within 
 correctly.

Summary
In this article, we’ve demonstrated how to use the 
 element effectively. To recap:


  If you have a simple title with a single heading element (–), you do not need an .
  If you have a title with subtitle(s) or tag lines (i.e., more than one consecutive –), group them in an .
  If you have a title with subtitle(s) and other metadata associated with the section or article, place both the  and the metadata within a single  element.


Let us know how you’re using 
 in your HTML5 projects!
Related Posts:
The header element
Your Questions Answered #7
Your Questions Answered #6
HTML5 Reset Stylesheet
Your Questions Answered #5


Share and Save:


	
	
	
	
	
	
	
	
	
	
	
	
	
	
	




The hgroup element originally appeared on HTML5 Doctor on March 23, 2010.



The small & hr elements
Oli Studholme — Tue, 16 Mar 2010 13:58:55 +0000

			
				
			
		
We recently examined  and , presentational HTML4 elements that have been given a new lease on semantic life. Two more elements that have undergone transmogrification to receive semantics in HTML5 are  and 
:


 — was for smaller text, now used for side comments and small print (W3C:Markup, WHATWG)

 — was horizontal rule, now used for a paragraph-level thematic break in text (W3C:Markup, WHATWG)



The  element



The small element represents so-called “small print” such as legal disclaimers and caveats.
W3C specification


 is now for side comments, which are the inline equivalent of 
 — content which is not the main focus of the page. A common example is inline legalese, such as a copyright statement in a page footer, a disclaimer, or licensing information. It can also be used for attribution. Don’t use it for block-level content (paragraphs, lists, etc.), as this would be considered main content.



Using  to fulfill the requirements of a font license agreement




Creative Commons Attribution Share-alike license
Using  around a Creative Commons license link with rel="license"



 text does not need to be smaller than surrounding text — if all you want is smaller text use CSS instead. Use  only on inline content. Finally,  doesn’t affect the semantics of  or .




The  element


The hr element represents a paragraph-level thematic break.
W3C specification


The “paragraph-level” bit means between blocks of text, so it can’t be used to separate sections of a site. Instead, 
 now separates different topics within a section of prose, or between scenes in a novel. After checking with Hixie I found I misinterpreted the paragraph content model (we regret the error!). I learned  actually means “end of one section, start of another”, which is the same semantically as 
. Because elements like  already indicate this intrinsically,  is more for thematic breaks, such as separating different topics within a section of prose, or between scenes in a novel. However you can use it anywhere you can use a . While not widely used these days (given the dull default browser renderings), it can be replaced via CSS with an image:



Style  by removing borders and adding margins & a background image using CSS. For example;

hr {height: 24px; background: url('flourish.png') no-repeat 50% 50%; margin: 3em 0; border: 0;}


IE7 and lower live up to reputation by adding a border around the image regardless, but this can often be worked around. Alternatively you can just hide it via an IE7-and-lower stylesheet. Use a CSS border or background image on another element instead if the transition is obvious (for example between weblog comments), or the intended use is solely presentational.


Cork’d.com uses a decorative CSS background image on titles. This would not be a good place to use .




In summary
When HTML4 was released, the presentational elements , , , , and  were already deprecated in favour of CSS. HTML5 completes this by removing  and .


The remaining HTML4 presentational elements — the long-ignored  and 
 elements (along with  and  from last week) — have been redefined in HTML5 with useful, media-independent semantics that relate to their typical use. Will you be using them? Let us know in the comments!
Related Posts:
The figure & figcaption elements
The i, b, em, & strong elements
HTML5 Reset Stylesheet
The ruby element and her hawt friends, rt and rp
The section element



Share and Save:


	
	
	
	
	
	
	
	
	
	
	
	
	
	
	




The small & hr elements originally appeared on HTML5 Doctor on March 16, 2010.



The i, b, em, & strong elements
Oli Studholme — Tue, 09 Mar 2010 15:40:01 +0000

			
				
			
		
While many HTML4 elements have been brought into HTML5 essentially unchanged, several historically presentational ones have been given semantic meanings.



Let’s look at  and  and compare them to the semantic stalwarts  and . In summary:



 — was italic, now for text in an “alternate voice,” such as foreign words, technical terms and typographically italicized text (W3C:Markup, WHATWG)

 — was bold, now for “stylistically offset” text, such as keywords and typographically emboldened text (W3C:Markup, WHATWG)

 — was emphasis, now for stress emphasis, i.e., something you’d pronounce differently (W3C:Markup, WHATWG)

 — was for stronger emphasis, now for strong importance, basically the same thing (stronger emphasis or importance is now indicated by nesting) (W3C:Markup, WHATWG)




Giving presentational elements new semantic meanings

 and  were HTML4 font style elements and are still used presentationally where appropriate to follow typographic conventions. They now have semantic meaning, however, and their style can be changed via CSS, meaning they’re not only presentational — , for example, doesn’t have to be bold. Because of this, it’s recommended to use classes to indicate meaning to make it easy to change the style later.



The  element



The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose (content whose typical typographic presentation is italicized).
W3C specification


Things that are typically italicised include foreign words (using the attribute lang=""), taxonomic and technical terms, ship names, inline stage directions in a script, some musical notation, and when representing thoughts or hand-written text inline:



Deckard: Move! Get out of the way!
Deckard fires. Kills Zhora in dramatic slow motion scene.
Deckard: The report would be routine retirement of a replicant which didn’t make me feel any better about shooting a woman in the back. There it was again. Feeling, in myself. For her, for Rachael.
Deckard: Deckard. B-263-54.

Using  to indicate a voiceover (alternate mood)




We ate unagi, aburi-zake, and tako sushi last night, but the toro sushi was all fished out.

Using  to indicate “an idiomatic phrase from another language” (or, Japanese). To check character sets for lang="" values you can use the IANA’s official list of character sets (ouch), or the excellent Language Subtag Lookup tool by Richard Ishida, W3C.





Nanotyrannus (“dwarf tyrant”) is a genus of tyrannosaurid dinosaur, and is possibly a juvenile specimen of Tyrannosaurus. It is based on CMN 7541, a skull collected in 1942 and described by Charles W. Gilmore described in 1946, who gave it the new species Gorgosaurus lancensis.

Using  for taxonomic names



Only use  when nothing more suitable is available — e.g.,  for text with stress emphasis,  for text with semantic importance,  for titles in a citation or bibliography,  for defining a word, and  for mathematical variables. Use CSS instead for italicizing blocks of text, such as asides, verse, and (as used here for W3C specification quote) block quotations. Remember to use the class attribute to identify why the element is being used, making it easy to restyle a particular use. You can target lang in CSS using the attribute selector (eg [lang="ja-latn"]).




The  element



The  element represents a span of text offset from its surrounding content without conveying any extra importance; for example, keywords in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is bold text.

W3C specification


For  text that should merely look different, there is no requirement to use font-style: bold; — other styling could include a round-cornered background, larger font size, different color, or formatting such as small caps. For instance, in the script example above,  is used to indicate who’s speaking or narrating.


Text that is bold by typographic convention (and not because it’s more important) could include names in a Hollywood gossip column or the initial text on a complex or traditionally designed page:



Connecting the versal (drop cap) with the text using . The pseudo-element selector :first-letter is used to create the versal. In this case, the opening phrase is bold only for stylistic reasons, but if it was semantically important,  or some other element would be more appropriate. Note that :first-letter only applies to block-level elements, so the versal “I” is not inside .





While we can use  to apply a traditional typographic style like small-caps to the first word, phrase or sentence, the CSS pseudo-element selector :first-line is more appropriate in this case. For the first paragraph of HTML5Doctor.com articles we use the nifty :first-of-type CSS3 pseudo-class selector.



Only use  when there are no other more suitable elements — e.g.,  for text with semantic importance,  for emphasized text (text with “stress emphasis”), 
– for titles, and  for highlighted or marked text. Use classes on list items for a tag cloud. To recreate traditional typographic effects, use CSS pseudo-element selectors like :first-line and :first-letter where appropriate. Again, remember to use the class attribute to identify why the element is being used, making it easy to restyle a particular use.





…and for comparison, the  and  elements


While  and  have remained pretty much the same, there has been a slight realignment in their meanings. In HTML4 they meant ‘emphasis’ and ‘strong emphasis’. Now their meanings have been differentiated into  representing stress emphasis (i.e., something you’d pronounce differently), and  representing importance.



The  element


The em element represents a span of text with emphatic stress.
W3C specification


The ‘stress’ being referred to is linguistic. If spoken, this stress would be emphasised pronunciation on a word that can change the nuance of a sentence. For example, “Call a doctor now!” emphasises the importance of calling a doctor, perhaps in reply to someone asking “Should I get a nurse?” In contrast, “Call a doctor now!” emphasises the importance of calling immediately.

Use  instead to indicate importance and  when you want italics without implying emphasis. The level of nesting represents the level of emphasis.




The  element


The strong element represents a span of text with strong importance.
W3C specification


Not much more to say really — it’s the  we all know so well. Indicate relative importance by nesting  elements, and use  for text with stress emphasis, or  for text that is “stylistically offset” or bold without being more important.





In summation…
A final thing to note: these elements (and almost all HTML5 elements) have also been made explicitly media-independent, meaning their semantics are not tied to how they look in a visual browser.

So there you have it — two stray dogs of presentational HTML4 have been transformed into meaningful HTML5 elements, ready to be adopted into your coding once again. Can you resist their semantically shiny puppy-dog eyes? Let us know!

Related Posts:
The small & hr elements
The ruby element and her hawt friends, rt and rp
Draw attention with mark
HTML5 Reset Stylesheet
Measure up with the meter tag


Share and Save:


	
	
	
	
	
	
	
	
	
	
	
	
	
	
	




The i, b, em, & strong elements originally appeared on HTML5 Doctor on March 9, 2010.

HTML5 Doctor » Elements

You can still use div

Example Uses

Site Wrapper

Intro paragraph

Big announcement

Other uses for

My blog post

Recap

Related Posts:

Example Uses

Glossary

The article element

What it should not be used for

Summary

Apple

Comments

Apple varieties

Red Delicious

Granny Smith

A containing s

Articles on: Fruit

Apple

Orange

Banana

Using for a widget

My Fruit Spinner

The pubdate attribute

The difference between and

Summary

Related Posts:

The ruby element and her hawt friends, rt and rp

Examples

Browser support

CSS we can use

Code samples and output

in Japanese — furigana and rōmaji

Using without

Using with

Nested for multiple ruby texts

Japanese glossary

in Chinese — Pīnyīn and zhùyīn fúhào (bopomofo)

Pīnyīn

Zhùyīn fúhào

Chinese glossary

Korean ruby

Korean glossary

Using for English

: to use or not to use

In conclusion…

Further reading

Feedback please!

Related Posts:

The figure & figcaption elements

The element

The element

Using and

Figure with an image

Figure with an image and caption

A figure with multiple images

Figure with a code block

Differences between and

Related Posts:

The nsfw element

Related Posts:

The hgroup element

Summary

–), you do not need an .

), you do not need an .

–), group them in an .

), group them in an .

Related Posts:

The small & hr elements

The element

The element

In summary

Related Posts:

The i, b, em, & strong elements

Giving presentational elements new semantic meanings

The element

A
containing
s

Using
for a widget

The `pubdate` attribute

The difference between
and

The
element

The
element

Using
and

Differences between
and

–
), you do not need an .

–
), group them in an .

`Related Posts:`