The ol Element and Related Attributes: type, start, value, and reversed
The <ol> element has a new attribute reversed in HTML5. In addition, a couple of related attributes purged in HTML 4 have made a return, namely start and type for <ol>, and value for <li>. Making things more interesting, the returning attributes were removed from HTML 4 for being presentational. So why are they back? Presentational and semantic? As we all know, presentational stuff belongs in CSS, not HTML. The type Attribute # While an ordered list’s counter style is generally presentational, in some documents it can be a part of the document’s meaning, as the specification for the type attribute notes: The type attribute can be used to specify the kind of marker to use in the list, in the cases where that matters (e.g. because items are to be referenced by their number/letter). Examples of this include legal or technical documents, which can contain references to non-decimal list items in prose: We can specify the list’s style using the type attribute, with the following values: <! <! <!
The output element
Across the web, you’ll see a range of sites that feature calculators for working out things like loan repayments, mortgage rates, tax, insurance, and more. Until now, we’ve had no way of semantically marking up the result of those calculations. Enter: the <output> element! In this article, we’ll show you <output> and some related JavaScript tricks. The Definition # The <output> element, new in HTML5, is used in forms. The output element represents the result of a calculation. Along with the standard global attributes, <output> also accepts the following: for A space-separated list containing the IDs of the elements whose values went into the calculation. form Associates the <output> element with its form owner. name The name of the element. Implementing <output> # We’ll start by creating a simple example that adds two whole numbers together (Figure 1). See a live example of the code in Figure 1. As you’d expect, if you only enter a single value, the function returns NaN. Polyfills # Summary #
HTML5: How to Use <DETAILS> and <SUMMARY> Tags
Among several new tags that are available in HTML5, Specifications (such as: figure, figcaption, and aside), detail and summary tags, in my opinion, are the most useful. With these new tags you can hide some of the long content and display only the summary. We actually often see this effect around, but most of them are still built upon JavaScript or its brother: jQuery, which most people don’t understand. Now, with these new elements – details and summary – things will get easier. So, let’s see how tags work in a real case scenario. Recommended Reading: Beginner’s Guide To: Building HTML5/CSS3 Webpages In this demo we are going to summarize a product description. <details><summary>MacBook Pro Specification</summary><ul><li><strong>13.3-inch LED-backlit glossy widescreen display</strong> with edge-to-edge, uninterrupted glass (1280 x 800-pixel resolution). In that example, I’ve added MacBook Pro specification detail, and now let’s see how the browser renders those tags. Browser Supports
HTML5 time and data elements in Firefox
var user = document.getElementById("user"), id = user.value; In the past people used data-* attributes to do something similar, for example: I wanted to implement these for a few reasons. First, one of my classes is implementing the HTML5 <track> element right now, and I wanted to show them how Mozilla's new WebIDL bindings work with some simple examples. Second, I wanted to do some work on the ideas Atul mentioned in his blog post about Markup APIs. One of the goals Brett and I have this year for the Webmaker tools is to have them publish pure markup vs. using JSON or JavaScript. I'm looking forward to seeing how people will use <data> as well--I haven't been able to track down any users of it yet, but I'm sure they're out there. Go forth and microformat!
