Category: HTML5

Useful links: site specific browsers, social media stats, Web 2.0

Fluid–Create Site Specific Browsers from ATMac is a new concept to me and has interesting potential.

This stat filled video about social media is eye-opening.

Speaking of video, O’Reilly Media has a lot of video from the Web 2.0 Expo up on YouTube, including this interview with a good deal of talk about HTML5, Flash, and other technology from Brady Forrest, Eric Meyer, and Ge Wang.

HTML5 and Accessibility: heading elements

The second of Aaron Anderson’s articles at WebAIM on Future Web Accessibility appeared. I recommend that you read the entire article, but there’s one section on headings that I want to quote here because I think it’s extremely important.

In current versions of HTML, the only way to define sections and outline-hierarchy of a document is use of the <h1>-<h6> in an otherwise flat structure. This is very beneficial to accessibility, but can be a bit awkward for web authors, especially when moving sections around in ways that change the heading depth. HTML5 introduces two new elements, <section> and <article>, that define logical sections and syndicatable articles present in a page; content hierarchy and heading levels are defined by nesting these tags inside each other. Because of this, HTML5 no longer requires that one actually use the correct heading level for a particular heading, but allows web authors to use <h1> everywhere, with the idea that assistive technologies and other systems can determine the heading level by the nesting of the <section> and <article> tags.

This is actually a perfectly fine way of doing things, but has the potential to create some sizable accessibility problems during the transition phase, that is, during the time where not everyone is using AT (of which there currently is none) that knows how to handle this. Since it will be several years before all the AT vendors update their products to support HTML5, and several more years before all users of those products upgrade to the newer versions, accessibility will require that we continue to use heading tags of the correct level, even when they’re inside nested <section>s and <article>s, at least for now.

Useful links: Widgets, HTML5 & help me with Chrome

Keep WordPress Widgets from Appearing on Particular Pages from KnowIT is a terrific explanation of how to pick and choose which pages you want WordPress widgets to appear on.

HTML5 and CSS3 Readiness by Paul Irish and Divya Manian shows a display you can manipulate of HTML5 elements and which browsers already support them. Chrome and Safari 4 have almost complete implementation of HTML5, moving out toward various versions of IE, with very limited support. In addition to running your mouse around the information, you can also resize the display by dragging, because the page is done in HTML5.

Speaking of Chrome, I’ve tried several times to install it on my Mac (OS 10.5.8) and it won’t open. I keep getting errors. Anybody have any ideas what my problem might be?

Useful links: HTML5, Fast Company lists

Removing the Details and Summary Elements at Burningbird is an extremely well organized and rational response to an issue ongoing in the development of HTML5 right now.

Fast Company listed the most influential women in tech. It’s all good, but the most interesting list for web geeks is the evangelists list, which includes Shireen Mitchell, Shaherose Charania and Angie Chang, Allyson Kapin, Molly Holzschlag, Debbie Weil, Cindy Padnos, Addison Berry, Susan Scrupski, Pamela Jones, Laura Fitton and Gina Trapani. . . . Many of these women are pictured in the Women in Tech Flickr Group, where there are over 200 images and growing.

5 awesome HTML5 demos from Designer Daily is a good list. I’d add this excellent demo by Brian Arnold from a recent Webuquerque event.

New link relations in HTML5

Several new rel attributes for the <a> and <link> elements have been proposed for HTML5. Existing attributes from HTML4 may be redefined somewhat. They include:

  • <rel='alternate'>
    • may be used with link, a, and area elements
    • meaning depends on the values of the other attributes such as 'stylesheet' or 'type'
  • <rel='icon'>
    • may be used with link elements
    • specified resource is an icon representing the page or site
  • <rel='nofollow'>
    • may be used with a and area elements
    • the link is not endorsed by the original author or publisher of the page
  • <rel='prefetch'>
    • may be used with link elements
    • preemptively fetches and caches the specified resource
  • <rel='archives'>
    • may be used with link, a, and area elements
    • indicates that the referenced document describes a collection of records, documents, or other materials of historical interest.
  • <rel='external'>
    • may be used with a and area elements
    • indicates that the link is leading to a document that is not part of the current site
  • <rel='license'>
    • may be used with link, a, and area elements
    • the referenced document provides the copyright license terms
  • <rel='noreferrer'>
    • may be used with link, a, and area elements
    • user agent must not include a Referrer HTTP header  in the request
  • <rel='pingback'>
    • may be used with link elements
    • usage is still being defined, but it creates a hyperlink
  • <rel='sidebar'>
    • may be used with link, a, and area elements
    • the referenced document, if retrieved, is intended to be shown in a secondary browsing context (if possible). It isn’t clear if this means a new tab, a new window, or an iFrame.
  • <rel='tag'>
    • may be used with link, a, and area elements
    • the tag that the referenced document represents applies to the current document

The best I can tell from looking at the current specs, these relative types of links are current in the HTML5 proposal. I hope I haven’t missed any.

HTML5 proposes figure and figcaption elements

The latest working draft of HTML5 proposes two new elements that seem particularly useful to me. These are the figure and figcaption elements. The element name’s are fairly self explanatory–the new elements are meant to let you markup figures and captions included in your documents.

On this blog, these new elements could be used in posts like Adding borders to data tables with CSS. Marking up the images used to illustrate that post as figures and adding the optional figcaption element makes perfect semantic sense.

The figure element also offers a semantic way to mark up illustrations, diagrams, photos, code listings, photos, videos, and other material. The W3C working draft describes figure as,

The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

Take a look at some example code showing a marked up image.

<figure>
<img src="table-borders.jpeg"
alt="A table with CSS borders added to the table element">
<figcaption>The default display of CSS borders on the table element</figcaption>
</figure>

The figure element is described as “flow content” within a document, however using the figure element allows for moving a referenced figure away from the primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.