HTML5 Doctor » HTML 5

Your Questions Answered #10

Richard Clark — Fri, 09 Jul 2010 12:45:00 +0000

The clinic is getting busy with more HTML5 ailments. This week, we’ll cover using sections within a footer, vs. Flash security, why HTML5 elements are treated as inline, using offline with storage, and marking up block quotes.

Footer with sections

Tommie asked:

Hi, I’ll get to the point right away. I want to use, lets say 3 section elements inside a footer each floating left and inside each of this sections I have some standard information. Is this the right way to go, or should I put my section elements outside the footer and only put copyright text etc. inside the footer?

Thanks!

You could use a

within

. but
is a sectioning root anyway
is flow content and can contain sectioning content. If you want them to appear in the outline within the footer, then it makes perfect sense to do as you suggest.

See more in Jack’s article on the
element. There are also some more examples in the spec.

Cheers, Rich

vs. Flash (security and copyright)

John asked:

I’m seeing lots of opinions that the canvas element might free us of the Adobe Flash monopoly, but what mechanisms can we use to protect our works when using straight HTML and JavaScript?

Right now I’m thinking about simple flash games, but I’m sure this is a concern for others wanting to use (free) HTML methods to perform functions now reserved more for flash.

Thanks for any input.

I’m not sure of any security mechanisms that we can use to protect content. It isn’t really any different than an image or any other type of resource. Having said that, decompilers can circumvent some of Flash’s security measures as well, so you may not be much worse off using .

If we come across anything, we’ll be sure to let you know.

Cheers, Rich

HTML5 tags inline?

Tami asked:

So, I’ve been experimenting with the new HTML5 elements, and one frustration I have is understanding the native display of the new elements, and how it works within the document flow. So far, experimenting with them has shown them to be very unpredictable. At best, they’re kind of behaving like a bastard span. They seem to be behaving like inline elements but that seems like it is wrong. In some cases, setting to display: block gives the expected behavior, but on the footer tag, it’s not interacting with floated elements properly.

So, are these new elements inline or are browsers still just trying to catch up? I tried looking in in the HTML5 working draft spec, but so far I am not understanding the way its written (HTML4’s specs clearly spelled out whether an element was display or inline).

Here’s an article from my personal blog that I wrote a while ago describing why browsers treat HTML5 elements as inline.

Thanks, Bruce.

Offline + Storage

Dear Doctor, I’m trying to work out if HTML5 will be able to do the job that I want. I have a number of documents (PDF, PPT, etc.) that I want to share with people in my team. These documents may change from time to time. Also, the people may not always be connected online.

Would it be possible to “cache” documents in an offline database in the browser so that when they are not connected they can still view them but when they are, they get the latest versions (which also refresh the cache)?

That way I can do a fairly pretty interface for sorting these documents so that they can easily find them.

Thanks in advance for any help you can provide.

You can, but I would strongly encourage you to think carefully about whether it’s worth it.

You can include these “assets” in the manifest, which will make the files available to the offline applications (note that this isn’t storage, just caching, which is what you’re after).

The problem is that when the visitor first hits the page with the manifest — which contains all the PDFs, PPTs, etc. — it will download all of these files. This is the bit that I’d encourage you to consider carefully. To compound that, I believe there’s a 5MB limit on the cache, so you might run into problems if you’re trying to cache more than that.

I’ve not covered offline cache on HTML5 Doctor yet (though it’s on the list), but I have described the process on my 24ways article.

If there are new versions of the cached files, you need to change the contents of the manifest — e.g., include a version number, which will trigger a download of all the assets again. Not ideal, but that’s the current situation.

Hope that helps a bit, Remy

Correct markup with blockquote

Phil asked:

Hi, in HTML 4.0 Strict and XHTML 1.0 Strict, text inside a blockquote element is required to be nested inside another block-level element, e.g. p.

In HTML5 that requirement seems to have been relaxed, as the following element validates successfully:
This is a blockquote.
The HTML5 spec uses the p element in the usage examples, but does not mention whether it is required.

Can you please confirm if this requirement has now been deprecated?

Great question. As I expected, this validates:



blockquote test
Tiger tiger burning bright

We double-checked with the WHATWG mailing list and confirmed that

can contain ‘flow’ content (i.e., text, paragraphs, etc.).

To summarise, it would be valid not to further mark up content within a
, but authors are encouraged to use a
(or other more appropriate element).

Bruce

Got a question for us?

That wraps up this round of questions! If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Share and Save:

Your Questions Answered #10 originally appeared on HTML5 Doctor on July 9, 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

HTML5 Custom Data Attributes (data-*)

Chris Bewick — Thu, 27 May 2010 13:50:08 +0000

Have you ever found yourself using element class names or rel attributes to store arbitrary snippets of metadata for the sole purpose of making your JavaScript simpler? If you have, then I have some exciting news for you! If you haven't and you're thinking, Wow, that's a great idea! I implore you to rid your mind of that thought immediately and continue reading.

Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements. These new custom data attributes consist of two parts:

Attribute Name: The data attribute name must be at least one character long and must be prefixed with 'data-'. It should not contain any uppercase letters.
Attribute Value: The attribute value can be any string.

Using this syntax, we can add application data to our markup as shown below:


  Carrots
  Celery
  Radishes

We can now use this stored data in our site’s JavaScript to create a richer, more engaging user experience. Imagine that when a user clicks on a vegetable a new layer opens up in the browser displaying the additional seed spacing and sowing instructions. Thanks to the data- attributes we’ve added to our

elements, we can now display this information instantly without having to worry about making any Ajax calls and without having to make any server-side database queries.

Prefixing the custom attributes with data- ensures that they will be completely ignored by the user agent. As far as the browser and indeed the website’s end user are concerned, this data does not exist.

The spec says (emphasis ours):

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

These attributes are not intended for use by software that is independent of the site that uses the attributes.

Every HTML element may have any number of custom data attributes specified, with any value.
W3C Specification

How can I use data attributes?

As custom data attributes are valid HTML5, they can be used in any browser that supports HTML5 doctypes. Thankfully, this is pretty much all of them. In addition to aiding backwards compatibility, this also ensures that custom data attributes will remain a scalable, cross-platform solution well into the future.

Now that we have a broad understanding of what data attributes are, let's take a look at how they can be used:

To store the initial height or opacity of an element which might be required in later JavaScript animation calculations
To store parameters for a Flash movie that’s loaded via JavaScript
To store custom web analytics tagging data as demonstrated by Jason Karns
To store data about the health, ammo, or lives of an element in a JavaScript game
To power accessible JavaScript subtitles as demonstrated by Bruce Lawson

What shouldn’t I use data attributes for?

Although flexible, data attributes aren’t an appropriate solution for all problems.

Data attributes should not be used if there is a existing attribute or element which is more appropriate for storing your data. For example, date/time data should probably be presented semantically in a time element instead rather than stored in custom data attributes.
Custom data attributes are not intended to compete with microformats. It is clearly stated in the spec that the data is not intended to be publicly usable. External software should not interact with it. Marking up contact details or event details using custom data attributes would be wrong, unless of course it is only intended to be used by your own internal scripts.
The presence/absence of a particular data attribute should not be used as a CSS hook for any styling. Doing so would suggest that the data you are storing is of immediate importance to the user and should be marked up in a more semantic and accessible manner.

Using `data-` attributes with JavaScript

Now that we understand what custom data- attributes are and when we can use them, we should probably take a look at how we can interact with them using JavaScript.

If we wanted to retrieve or update these attributes using existing, native JavaScript, then we can do so using the getAttribute and setAttribute methods as shown below:

This method will work in all modern browsers, but it is not how data- attributes are intended to be used. The second (new and improved) way to achieve the same thing is by accessing an element’s dataset property. This dataset property — part of the new HTML5 JavaScript APIs — will return a DOMStringMap object of all the selected element's data- attributes. When using this approach, rather than using the full attribute name, you can ditch the data- prefix and refer to the custom data directly using the name you have assigned to it. Data attribute names which contain hyphens will be stripped of their hyphens and converted to CamelCase.

If, at some point in your script, a specific data- attribute becomes redundant and is no longer needed, it is also possible to completely remove that attribute from the DOM element by setting it to a value of null.

plant.dataset.leaves = null; // Caterpillars attack!

Unfortunately, the new dataset property has not yet been implemented in any browser, so in the meantime it’s best to use getAttribute and setAttribute as demonstrated earlier.

While developing your application, you may find it useful to be able to select elements based on the presence of — or indeed the specific values of — their custom data- attributes. This can be achieved quickly and easily using querySelectorAll as shown below:

// Select all elements with a 'data-flowering' attribute
document.querySelectorAll('[data-flowering]');

// Select all elements with red leaves
document.querySelectorAll('[data-foliage-colour="red"]');

A word of warning

As data attributes become more widely used, the potential for clashes in naming conventions becomes much greater. If you use an unimaginative attribute name such as data-height, then it is likely you will eventually come across a library or plugin that uses the same attribute name. Multiple scripts getting and setting a common data- attribute will probably cause chaos. In order to avoid this, I encourage people to choose a standard string (perhaps the site/plugin name) to prefix all their data- attributes — e.g. data-html5doctor-height or data-my-plugin-height.

Summary

Custom data- attributes are a great way to simplify the storage of application data in your web pages. Although you can’t utilise the new JavaScript APIs just yet, you can enjoy great success using getAttribute and setAttribute safe in the knowledge that they will work in all major browsers.

Homework

If you’re super keen to have a play with the new dataset property but disappointed that it hasn’t been implemented, fear not!, for there is a light at the end of the tunnel. You might be interested in looking at Dr Remy’s experimental code, which partially enables the dataset functionality in some browsers by editing the Element.prototype.

The code supports the retrieval of data- attributes in the latest versions of Firefox, Safari, Opera, and Chrome, but sadly will not work in any version of IE (since IE does not expose the Element object). This code also partially supports the setting of data attributes, but it will only store the new attribute values within the JavaScript and will not update the DOM element as a full, native implementation of the dataset property would. Although this code is mainly a proof of concept, it may be useful for mobile application or intranet development in closed environments where cross-browser (IE) compatibility is not an issue.

Share and Save:

HTML5 Custom Data Attributes (data-*) originally appeared on HTML5 Doctor on May 27, 2010.

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.

Your Questions Answered 9

Richard Clark — Fri, 14 May 2010 14:15:57 +0000

The Doctor is in with another round of patient questions about HTML5. This week, we’ll cover offline viewing on requests, the drag-and-drop API, using href on any element, the

element, and headings.

Offline viewing on requests

Johan asked:

It is possible to let Firefox 3.5/3.6 save a page for offline viewing with the manifest file?
In that case Firefox asks for permission to save the site the same second you arrive – not very user-friendly.

Is it possible to send the save-it-locally request via Javascript on a click?

Basically I want a link/button which will fire the request – and not on document load.

While it isn’t possible to make Firefox 3.5/3.6 save a page for offline viewing with the manifest file, there is a way to do this. It all depends on how you write the “save-it-locally request” code. You have two options:

If you want to store an arbitrary document that is not explicitly listed in your manifest, you could run an Ajax request for that document and store its contents in localStorage. When you want to view that document, load it from localStorage and overlay it on the existing page.
Dynamically manage a manifest file for individual users, so that if a user requests a new file that isn’t in their manifest, register this on the server side and add it to the manifest — which is bespoke to this specific user — on the fly.

I’m not sure what you’re seeing with regards to the permissions error. When I test the manifest (offline **cache**), it doesn’t ask twice.

Note: you asked about Firefox 3.5 — the offline manifest doesn’t work properly at all in this version.

Thanks, Remy

Question about dragging

Marc asked:

Evening,

I’m trying to get my head around the drag and drop (DnD) possibilities of HTML5. I have a “simple” task: Read the content of a XML file, using JavaScript, and do some manipulations of he XML. Without the use of server side scripts.

I tried my way with Google, but apart from people complaining about the DnD specs, I wasn’t able to find much insightful informations.

Can you point me toward resources to understand the DnD possibilities of HTML5?

Thank you Doctor, a French canadian HTML5 fan

Absolutely! There’s actually an HTML5 Doctor article covering native drag-and-drop. It also includes links for further reading and related posts (such as accessibility experiments).

I hope that helps.

Cheers, Remy

About the `href` on any element

Luan asked:

I’ve heard a long ago that href would work in any tag, such as a
or a h1, even a div and others… but I don’t see anything about this in the last days. Do you know if this is going to work?

That was in XHTML2 (on which the W3C have now stopped work).

The HTML5 equivalent is to wrap an around the other tags. It’s called block-level linking, and we’ve written an article about it.

Cheers, Bruce

W3C Validator for the
element

Fjpoblam asked:

I have a (prospective) structure containing 8 figures: each an image with a caption. My goal is an image gallery, each image clickable toward an individual htm file containing a slide show. (In html4 I structured each “figure” as a div: figure seemed ideal for the task.)

Problem is, I tried to follow the *validator* hint with a dd for the image and a dt for the caption (each surrounded by an a). Upon doing so, the validator pops up an error. When I try a straight image with a legend, it is also rejected for want of a dd and an optional dt.

What gives? Do you have a hint? Or better, simply, point me doofus to the correct doc so’s you’ll “teach a man to fish”.

I’m not sure if the validator is up to date or not, but you shouldn’t be using

anymore. Please use

See our article on the

and

elements for more.

Also see our glossary for more examples.

Cheers, Rich

Headings

Thomas asked:

Dear Doctors,

you covered the new header tag in an article. The header tag should contain a heading element, like h1-6. So far so good, but how do I structure my headings further on. E.g. I’ve got this:
	
		My major heading
		Subheading
		Abstract text...
	
	... lorem ipsum ....
	Heading within my article
	... dolor sit amet ...
	Subheading in my article
Which heading-level would be appropriate in my example? h1 because it starts again? or h3 because it continues?

Thank you

If the first is a new subheading and not related to the

already there, then would be an
. Then would be an
if it is a subheading of the above
.

However, if you’re splitting the article into sections, then you could use an
each time. See our article on the section element for more.

Thanks, Tom

Got a question for us?

That wraps up this round of questions! If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Related Posts:

Your Questions Answered #10

Your Questions Answered #7

Your Questions Answered #4

Your Questions Answered #3

Your Questions Answered #8

Share and Save:

Your Questions Answered 9 originally appeared on HTML5 Doctor on May 14, 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.

Your Questions Answered #8

Richard Clark — Wed, 05 May 2010 13:00:55 +0000

We’re back with more of your questions (and our answers) about HTML5. In this article, we’ll discuss using a

at the top of your markup, how to skip to certain parts of a video, styling form elements and attributes, and more.

HTML5
on top

David asked:

Hi!

I wonder if it possible to put the footer on top such as www.perfectfools.com with HTML5 and still make the HTML validate.

Thanks a lot and best regards!

David

HTML elements should always describe their content, so if you think that

is most suitable for your content, then you’re absolutely entitled to use it. Despite its name,

’s position is in no way restricted — visually or ordinally — within a document.

Cheers, Rich

Skip to certain parts of a video file

John Paul asked:

Hello

supposing I have a very long video file in an accompanying video element, without using the controls, how do I skip to certain time stages through the API? Much as one would on a DVD menu, for example.

Apologies if this has been asked already.

JP

You can achieve this using JavaScript and data attributes. Check out these articles from Bruce Lawson and Patrick Lauke from Opera. They’ve used data attributes to add subtitles, but you could just as easily use the attributes to jump to specific parts of a video.

For example, set data-start and data-end attributes on your element. You can then use JavaScript to read the attribute values, set the current position of the video using the currentTime attribute, start playing the video via the play() method, and even stop playing the video by listening for the timeupdate event and stopping the video with pause() once it’s reached a specified time. See the spec for the HTMLMediaElement object for more details.

Cheers, Rich

In addition to this, the recent addition of the track element will make this more easily achievable. We will cover the track element in more detail soon.

s within navigation links

Benjamin asked:

Hey,

I’m currently doing up the new version of my website, and decided to do it in HTML5.

One area I’m confused about is whether or not for navigation links I should be using a h1 or h2 element.

For example:
    
        Actions
    
    
        Sitemap
        Login
        Search
        Enquire
    
Should those span.title elements be wrapped in a h2? My thoughts on why this would be required is for an outline, as navigation should appear in the outline right?

Thanks a bunch.

In theory, yes, navigation should appear in the outline. I personally don’t think it should require a heading, and I know there have been requests to the developers of the outline algorithm to make

show as a ‘Navigation’ element rather than ‘untitled section’.

If you want to use a heading within your

element, using an

would be fine. You don’t really need the

element in there too. The outline would be calculated correctly without it. With current browser implementations, however, I don’t think it would make much difference if you used an

.

You don’t need the elements in the

s. They aren’t required in the outline unless they’re providing a table of contents for the document.

I hope that answers your question. We plan to write an article regarding outlining soon.

Cheers, Rich

Styling supported HTML5 form elements and attributes

Mike asked:

First off, I wanted to say I really appreciate the service this site is doing. I have found this site to be a very valuable resource and is always the first place I look when I have a question about implementing HTML5.

How do I style/edit/change the UI generated feedback for the new HTML5 form elements and attributes. For example, In Opera, is there a standard CSS notation to style the error message so that it doesn’t necessarily show up under the field in red? Where in the DOM is it inserted? Is the message for a required field customizable? Finally, is this information specified in the HTML5 spec or are the implementation details left up to the browsers?

There is currently no way to use CSS to style error messages. As the HTML5 spec isn’t finished yet, it’s a bit early to start specifying new CSS.

The HTML5 spec defines no UI requirements regarding how browsers should display messages.

You can override a browser’s default behaviour with JavaScript. I’m not a scripter, but I reckon you would need to attach an event handler to the error event and have the handler cancel the default action and show a custom error message. I think that as long as you call evt.preventDefault() within the event handler, it should prevent showing the default error message. Then you can add an element into the DOM and style it as you wish, with the default error handling as a fallback for those without JavaScript. If anyone gives this a go and gets it working, we’d be very interested to see the results.

Ta, Bruce

Section headers

Tibor asked:

Hi. I would like to know, how to use section’s headers. Is this code correct?
	header 1


	header 2
or I have to use header element inside every aside, article, section etc.
	
    	header 1
	


	
    	header 2
	
Tibor

Your first example is correct. You only need

to group items within a header. If the header contains only a single

–
element, you don’t need to wrap it in a
.

Thanks, Bruce

Got a question for us?

That wraps up this round of questions! If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Related Posts:

Your Questions Answered #5

Your Questions Answered #7

Your Questions Answered #4

Video: the track element and webM codec

Your Questions Answered 9

Share and Save:

Your Questions Answered #8 originally appeared on HTML5 Doctor on May 5, 2010.

Your Questions Answered #7

Richard Clark — Tue, 20 Apr 2010 14:10:51 +0000

Here we are again with another round of patient questions about HTML5. In this article, we’ll be covering AJAX, the eternal question of

, our old friend Internet Explorer, how to mark up multiple blocks of content in a sidebar, and using

with .

HTML and AJAX

Arie asked:

I’m still learning about html5 and javascript, I’m wondering how html5 makes doing a lot of the things currently done in ajax and javascript more simple. Is it by providing things like the canvas that unify ideas?

Certain parts of HTML5 will indeed simplify or reduce the need for JavaScript. One such area of improvement is Web Forms 2.0, which will handle client-side form validation in the browser and provide new input types (like that checks for a valid email address). Of course, you’ll still need to validate your forms on the server, but at least the browser will catch the most obvious mistakes before the user actually submits the form.

Other parts of HTML5, like Web SQL Databases and , are essentially JavaScript APIs. They may not cut down on your need for JavaScript, but they do provide a consistent interface to some powerful functionality and will enable your application or site to do more things within (or outside of) the browser.

Cheers, Rich

or
?

Paul asked:

Hello

I see you are using divs on your website, I thought divs should be replaced by more semantic tags such as sections or article. what did I miss?

Thanks

Hi Paul,

Just like with HTML4, you shouldn’t use

s or s where another, more precise element would fit the bill. But for grouping arbitrary content,

s and s remain the way to go.

Thanks, Bruce

HTML5 and IE6

Adam asked:

Greetings HTML5 Doctor,

Is it at all possible to have a HTML5 layout while 30% of our users are running IE6? We are an IT company and our website is very large so having separate versions is completely impractical. HTML5 would allow us to move on and keep our markup a lot simpler but with no concrete guarantees regarding universal support is HTML5 ever going to get off the ground within 5 years while not having to resort to javascript solutions?

Simply change the doctype and you’ll be writing HTML5! If you want to use new elements, however, you’ll need to use JavaScript to support them (for all versions of IE up to IE8). The best place to start? Read Remy’s article on How to get HTML5 working in IE and Firefox 2.

I think we’re in a position to do something about this. By using the new doctype, block-level links, and new form input types (that degrade gracefully), we can start promoting HTML5 right now.

Cheers, Rich

Multiple blocks in a sidebar

Bart asked:

On my page (revora.net) I have a sidebar with content that I deem appropriate for the aside element. The sidebar contains several blocks of content. I’ve currently made the whole bar aside and made the blocks div. Is this correct, or should I do it the other way around?

It sounds like your first approach is correct. The

s might be

s or maybe

elements though, depending on their content. I suggest you read our article (and the comments) on the

element.

Thanks, Tom

Header with

Diego asked:

Hi,

This structure is right?
   
       
           Foo Bar
           Baz Bat Qux
       
   
   lorem ipsum
What I mean is, if I have a HEADER with just 2 H(n) I need to put these into a HGROUP ? Or… I can remove the HEADER and leave just a HGROUP? What’s the better solutions for it?

Thanks for all,

Diego Tres

What you have is correct. Basically, in the document outline, you will only see “Foo Bar” as the heading for that section. “Baz Bat Qux” will be hidden from the outline.

You don’t have to use a

within your

or an within your

. Similarly, you don’t have to use a

around your .

To summarise, the best solution (if you don’t require the

to appear in the document outline) is what you’ve already got.

Cheers, Rich

Got a question for us?

That wraps up this round of questions! If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Share and Save:

Your Questions Answered #7 originally appeared on HTML5 Doctor on April 20, 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.



Your Questions Answered #6
Richard Clark — Thu, 08 Apr 2010 14:30:59 +0000

			

				

			
		
 We’re back with another round of patient questions about HTML5. In this article, we’ll discuss using multiple 
s, audio codecs, microformats, post bylines, and the  element.
Using multiple s
Bnonn asked:
I’m unsure of how h1 is supposed to be used now that pages can be divided into sections and articles. In (X)HTML4, a page was basically a page, and so you only had one h1 element: the top level heading for the page. I’m not even sure if that was a requirement of HTML4, or if it was just a de facto standard, but it made sense.
Now, however, there are any number of possible sections and articles per page; each of which may contain any number of heading elements (and one of those might be inside a header element). Given that h1 is a top-level heading, it seems as if each section and/or article should have one, in addition to the page-level h1. However, this contradicts what I know of accepted usage, so I’m confused about the way in which I should be marking up headings in HTML5. It doesn’t seem right to start headings in a section, for instance, with h2, because then…where’s the top-level heading for that element? But it doesn’t seem right to start them with h1, because that element in current web usage has more “power” than warrants its use there.
There is also SEO to wonder about. Even if using multiple h1 elements is right, I wouldn’t want to be penalized for it by Google. So what’s the story with that?
Any help is much appreciated.
Regards,
Bnonn

Basically, you can use multiple 
s in order to shape the document outline. So an  within a  will be treated like an  (if it is a nested ). If that  (and only that ) is aggregated elsewhere on the web, however, it will fit seamlessly into that external document’s outline. This means that your original  could be treated as an , , , or  as appropriate.
I hope that makes sense! Bruce’s article on the section element touches on this, and we also hope to talk more about document outlines in the future.
Cheers,
Rich
P.S. Multiple 
s in HTML4 are perfectly legal, but seldom used.
Audio Codecs
Adam asked:
Hello,
I’ve got a query about the issues regarding what codecs to use for the audio tag. I don’t quite get why Firefox won’t support mp3. Surely the browser calls on the codecs present on the operating system, not within the browser, so how are the licensing issues a problem to the browsers if they are simply leaving what is already present (and in theory already licensed)?
I fully admit that I am no lawyer. It just seems very odd the line of argument Mozilla has taken.
Adam Wilcox

I’m not sure why they’ve taken that stance, but I know that Mozilla only plans to support Ogg and Apple are keen to push MP3 and MP4, so we’re at stalemate. Because of this, discussion of specific codecs has been removed from the spec altogether.
Although not related to audio, see this article I wrote about YouTube and Vimeo supporting HTML5 video. It explains a little about codecs.
Sorry I can’t be of more help.
Rich
Since writing this reply there has been a lot more talk over codecs for both video and audio since Microsoft announced they would be supporting H.264 in IE9. We’ll cover this in more detail soon.
hCards
Ken asked:
How does html 5 deal with hCards and microformats in general? Specifically, can you have more than one hCard per page? As I understand it currently, having more than one is problematic. I’m asking now because of the treatment “footer” and “aside” has gotten, i.e. they are context sensitive to their “article” or “section” unless top-level, then applied to the page. Also, the use of scoped on style tags: hCards should be updated in a like manner for html 5.
Thanks for hearing me out. I don’t know if this is the appropriate place for this question, but as html 5 is much more useful, I thought maybe a post is in order  
Also, “article”’s impact on the hAtom microformat makes for an interesting article, don’t ya think?

We touched upon microformats in our articles on the 
 and  elements, but we’ll try to cover more soon (possibly in an article on the  element).
I haven’t heard that having more than one hCard is problematic. I’ve certainly never had any issues doing that. If you check out the source code on the homepage of HTML5Doctor, you’ll see we’ve used multiple hCards — one for each author’s name associated with a post.
Hope that helps a little.
Cheers,
Rich
Article bylines
Eric asked:
I tweeted to you guys a few days ago (@ericdfields), wondering what you recommend for bylines for blog posts. Bylines, borrowing a newspaper term, would be the ‘Posted by SoandSo on Nov 1, 2010′ copy you find under the article of your typical blog post.
To me, they seem like something of an ‘aside’ for the header of the document.
I don’t know if its perfectly valid, but here’s the test case I whipped up.
Thanks in advance for any insight!

In my opinion, they’re header or footer information, so I do:

  
    Foo
    Bar
  
  Posted by Bruce on 1st November

Thanks, Bruce
How to use  with a date in astrology
Dear HTML5Doctors,
I was confused in how to using the time tag with the Astrology date. For example if I have a chunk of content like this:
ARIES: 13 Apr – 14 May
how can I use attribute “datetime” to explain the format of that date?
ARIES: 13 Apr - 14 May
The year of birth is not fixed, please advice me some solutions about this.
Thank you,
radiz

Hi Radiz,
The time element is for one specific day, not a range or “imprecise” date. So you can’t use it for “13 April.” You need to use it for a specific “13 April” and give a year. For more, see our article on the  element.
Thanks, Bruce
Got a question for us?
That wraps up this round of questions! If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Related Posts:

Your Questions Answered #7
Your Questions Answered 9
Your Questions Answered #4
Your Questions Answered #5
Your Questions Answered #8


Share and Save:
	

	

	

	

	

	

	

	

	

	

	

	

	

	

	



Your Questions Answered #6 originally appeared on HTML5 Doctor on April 8, 2010.

HTML5 Doctor » HTML 5

Your Questions Answered #10

Footer with sections

vs. Flash (security and copyright)

HTML5 tags inline?

Offline + Storage

Correct markup with blockquote

Got a question for us?

Related Posts:

The dl element

It’s all in the description

Example Uses

Glossary

The article element

What it should not be used for

Summary

HTML5 Custom Data Attributes (data-*)

How can I use data attributes?

What shouldn’t I use data attributes for?

Using data- attributes with JavaScript

A word of warning

Summary

Homework

Related Posts:

The article element

What the spec says

The smell test for going independent

Examples of in use

A bare-bones

Apple

A weblog-style

An with comments as nested s

Comments

An with s

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:

Your Questions Answered 9

Offline viewing on requests

Question about dragging

About the href on any element

W3C Validator for the element

Headings

. However, if you’re splitting the article into sections, then you could use an

each time. See our article on the section element for more. Thanks, Tom

Got a question for us?

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:

Using `data-` attributes with JavaScript

Examples of
in use

An
with comments as nested
s

An
with
s

A
containing
s

Using
for a widget

The `pubdate` attribute

The difference between
and

About the `href` on any element

W3C Validator for the
element

.

However, if you’re splitting the article into sections, then you could use an

each time. See our article on the section element for more.

Thanks, Tom

The
element

The
element

Using
and

Differences between
and

as appropriate.

I hope that makes sense! Bruce’s article on the section element touches on this, and we also hope to talk more about document outlines in the future.

Cheers,

Rich

P.S. Multiple