Twtter is the biggest all in one Twitter application directory. People here can subscribe to whole lots of apps and get benefits- of all the applications free of cost. Twitter is not just a place where you Tweet, it is more than that where people can share and help each other out. So, twtter has been making application that makes user ease their twitter.
You can tweet via anything you like that are listed on the directory. Posting and Updating new status using cool applications like iPhone, iPad, Android, Twitter, Google and more. You do not need to have the device or applications on your own, you just need to allow your Twitter to access and you will be ready to go. Just type any status you want to post via and press the Tweet button, and you see the tweet updated on Twitter time line.
The cheat sheets are broken up into three graphics:
Tags
Event Handler Content Attributes
Browser Support
Each differentiates between the new, existing, and unsupported features of HTML5. The clean visual grid is easy to run through, lending itself to be a very practical tool for a busy designer/developer. The most useful aspect of it all – it is print-ready for you to pin up on your wall for quick and easy referencing.
With the developing of HTML5, there will be a dramatic change for online media content delivery. This industry has been dominated by the proprietary Adobe Flash Player for many years. But now, HTML5 is here and the <video> element is a long-awaited and probably one of the most talked about feature. We can easily embed videos into web pages using the <video> element without any plug-ins.
In this post, I am sharing 10 ready-to-use HTML5 video players to help web designer and developers to boost their Mobile traffic. All these are open source players available for free download.
Built by Alethia Inc., the Open Standard Media (OSM) Playeris a free all-in-one media player for the web. It is an open source (GPLv3) media player that is written in the popular jQuery frameworkto dynamically deliver any type of web media, including HTML5, YouTube, Vimeo, and Flash. It supports audio and video with the most popular media formats. OSM Player could easily use the incredible ThemeRoller system. It also supports playlist and player to player communication.
Performance comparison: supports automatic Flash fallback for non-standard media and videos can be displayed in full-screen.
Kaltura’s HTML5 Media Library enables you to take advantage of the html5 video and audio tags. It has a consistent player interface across all major browsers including Internet Explorer. Upon detection of the client browser, the Kaltura HTML5 Media Library chooses the right codec to use and the right player to display. Based on HTML, CSS and jQuery, its skinning is amazingly easy and flexible. It integrates to any existing web CMS and is pre-integrated into Media Wiki. Kaltura’s HTML5 Media Library is built on jQuery, so it’s easy to theme, customize and extend.
Performance comparison: supports a seamless fallback with Flash based playback, supports emerging subtitles and timed text formats, supports free screen and IOS.
Projekktor is a free, Open Source (GPL) HTML5 based video player written in pure JavaScript. It solves cross browser and compatibility issues, adds eye candy and provides extremely powerful non standard features. Its control panel can be customized and themed by editing a single CSS file. Projekktor supports PRE roll and POST roll content for ads and its server is independent seeking for Theora. It is also built on jQuery and supports playlists.
Performance comparison: can display videos in full-screen, supports IOS platform and flash fallback.
VideoJS is a free, open source and lightweight HTML5 Video Player with three core parts, including an embed code (Video for Everybody), a JavaScript library (video.js), and a pure HTML/CSS skin (video-js.css). The JavaScript library fixes browser & device bugs, and makes sure your video is even more compatible across different browser versions. It also ensures a consistent look between HTML5 browsers and easy custom skinning if you want to give it a specific look, or brand it with your own colors. VideoJS is an easy to use HTML5 video player with volume control and stand alone JavaScript library
Performance comparison: has forced fallback to flash, supports emerging subtitles, plays with free screen player UI and compatible with IOS platform.
OIPlayer is a HTML5 audio and video player with fallback to Flowplayer (mp4, h.264) or Cortado. OIPlayer attaches itself to all video and audio tags it encounters. Besides the general configuration of the jQuery plug-in itself, it uses the respective tag like poster, width, controls, auto play etc. it has multiple different players on a page and supports mute and unmute. OIPlayer can easily play with CSS and has fires events of ‘oiplayerplay’ and ‘oiplayerended’ to use for play statistics.
Performance comparison: compatible with iOS, iPhone, iPad etc, supports video display in full screen.
The jMediaelement is a multimedia framework for JavaScript based on jQuery. With it, you can embed multimedia-content in a clean and lean way (HTML5 audio/video specification is the base here), and you are able to script multimedia in an unobtrusive, intuitive, “jQuerish” way. You can use semantic and accessible markup to add custom control elements. Since jMediaelement Supports HTML 5 Video and Audio elements and degrades gracefully to Flash (JW Player) or VLC, it can support nearly every browser on every device.
Performance comparison: supports player UI features of full screen, keyboard interface and subtitle adding, supports embed type of Flash fallback.
MooPlay brings JavaScript controls over an html5 video element. You can build and customize your own player with a play and a pause control. MooPlay has buttons to move inside the video, an interactive play progress slider, a load progress bar and a volume slider and a mute button. It supports the JavaScript library of Mootools. The supported formats are SubRip (.srt) and SubViewer (.sub). It shows the current and remaining time of the playing video. What’s more, the video element methods can be called by other scripts, and MooPlay objects will adapt themselves to any state changes.
Performance comparison: loads subtitles through an Ajax request that synchronized with the video, supports fallback video display.
Recommendation Index: ★★☆☆☆
MediaElement.js is an HTML5 video and audio player. It supports iPad, iPod, iPhone, IE6, IE7, IE8, Firefox, Opera, Safari, Google Chrome and Android. It is a complete audio and video player upgraded with custom Flash and Silverlight plug-ins that mimic the HTML5 MediaElement API. MediaElement.js is a jQuery plug-in which enables you to use the <video> tag with one H.264 file. If the player doesn’t support it, the plug-in replaces the player with a Flash or Silverlight-powered one.
Performance comparison: supports flash fallback, supports subtitles, timed text and IOS, video can be displayed with full screen.
Html5media enables <video> and <audio> tags in all major browsers. The html5media project makes embedding video or audio as easy as it was meant to be. It’s a fire-and-forget solution, and doesn’t require installing any files on your server. Unlike many other HTML5 video players, it allows people to use the video controls supplied by their own web browser. It’s one of the smallest, fastest solutions available, and as browser technology improves it will become even faster. The html5media project is open source and can be found on GitHub.
Performance comparison: supports Flash fallback and full screen.
jPlayer is completely free and open source media library written in JavaScript. With a jQuery plug-in, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community. jPlayer allows you to play and control media files in your webpage. You can create and style a media player using just HTML and CSS, and add audio and video to your jQuery projects.
Performance comparison:supports older browsers using a flash fallback, supports platform of iOS and video’s full screen displaying.
The above codes use the object of XmlHttpRequest2, which is only supported by Firefox and Chrome at present. XmlHttpRequest2 is the enhanced version of the original familiar xmlhttprequest. You can refer to the description at
In the above code, the first is to determine whether the type of the uploaded files and the size of picture file meet the requirements. If so, call the send method to send files to the server, and set an HTTP header to the file’s name as X_FILENAME.
In the PHP server-side code, first determine whether it is normal upload or upload via AJAX form through the HTTP header.
If the $ fn value is set, then call to use file_put_contents, to duplicate file in uploads folder. If it is uploaded by the ordinary form, then make the following judgments:
else {
$files = $_FILES['fileselect'];
foreach ($files['error'] as $id => $err) {
if ($err == UPLOAD_ERR_OK) {
$fn = $files['name'][$id];
move_uploaded_file(
$files['tmp_name'][$id],
‘uploads/’ . $fn
);
echo ”
File $fn uploaded.
“;
}
}
}
Shows upload progress bar
Next, for the convenience of users, we need to display an upload progress bar. In the era of HTML4, the display of progress bar needs some JavaScript skills. Thus, it is too much complicated. In HTML5, there are progress bar properties feature to support it, currently XmlHttpRequest2 in Firefox and Chrome.
The progress bar properties of HTML5 are value and Max. Value shows the current value of progress bar, and Max defines the maximum value of the progress bar. Unfortunately, the current definition of progress bar in HTML5 lacks definition on style, which can only be beautified by the developer as follows:
#progress p
{
display: block;
width: 240px;
padding: 2px 5px;
margin: 2px 0;
border: 1px inset #446;
border-radius: 5px;
}
We design a progress bar with width as 500px. Among them, 250px is the green part, also showing the part read already. The right part of 250px is set transparent. Here, we set its style according to the upload progress. For example, “background-position: 100% 0 “indicates the beginning of the progress, no part completed. While “background-position: 0% 0” means 0% is remained, and “Background-position: 30% 0 “means 30% are not completed.
In addition, we also designed the required style of upload success or failure as follows:
#progress p.success
{
background: #0c0 none 0 0 no-repeat;
}
#progress p.failed
{
background: #c00 none 0 0 no-repeat;
}
Next, we need to change the former method of upload file () and add code like this:
var pc = parseInt(100 – (e.loaded / e.total * 100));
progress.style.backgroundPosition = pc + “% 0″;
},
Among them, PC means the remaining upload progress, and assigns value to the CSS style of progress. Finally, if you are familiar with AJAX, you know how to judge whether the file upload is completed through onreadystatechange as follows:
Similarly, we can determine whether the uploading is achieved by readState, and then set the related CSS style. As for the rest of the code, there is no need to modify them.
Now, this example of file uploading with progress bar is completed, and the specific code can be downloaded at:
This year HTML5 truly rocked. Oli Studholme, one of the HTML5 Doctors, runs through 20 of the best sites and covers semantics, audio, client-side web apps, canvas as well as SVG and WebGL and looks ahead to the future
2011 has been an amazing year for HTML5 and the web. We’ve seen HTML5 continue maturing, progressing to Last Call status in May and on track to be a W3C specification by 2014. The WHATWG have been busy with both improvements to HTML5, and new post-HTML5 features such as WebVTT. The progress for browsers has also been staggering, with all five main players actively pushing the boundaries of the web, and Firefox joining Chrome, Opera, and to a lesser extent Safari in frequent, automatic updates. One more to go!
On the content side, it’s really felt like 2011 has been the year the HTML5, CSS3 and JavaScript web stack has come of age. HTML5 is now the default for most developers, and impressive explorations of the new features HTML5 makes available have been coming thick and fast. Here’s a tiny sampling of some sites that rocked HTML5 this year. Quite a few of them made my jaw drop with the feeling “I can’t believe this is the native web”.
1. HTML5 For Web Developers
HTML5 for Web Developers might seem like a strange site to include here, because it’s just a version of the HTML5 specification. Historically W3C specifications have tended to be confusing, written for people who make web browsers, not websites. However, the HTML5 spec text is surprisingly readable, and peppered with examples. If you’ve had bad experiences reading W3C specs in the past, you might be pleasantly surprised.
HTML5 For Web Developers was made by Ben Schwarz and friends to be “a companion specification for web developers to use on a regular basis”. It’s a restyled version that drops the “implementor notes” for browser makers, perfect for web developers. Under the very readable print-influenced styling are some nice HTML5 additions too. It uses Offline Cache, and saving it shows a progress bar in supporting browsers using <progress> and the AppCache API. The search-as-you-type feature also works offline, and of course the search box uses type="search".
It also represents how we can all make a difference. Ben did this as a volunteer project, and the source is on GitHub. And as web devs we have the skills to do so! Which takes us nicely into …
The one-page site features clean HTML5 code, using data-* attributes to tie in Twitter hashtag searches. It also has an adorable but invalid doctype:
<!DOCTYPE html public “i ♥ the web”>
(The important bit is <!DOCTYPE html, which triggers standards mode.) But above all, more than any of these awes HTML5 websites, Move the Web Forward’s message is crucial. In Beyond the Blue Beanie?, Stephanie (Sullivan) Rewis comments “As the saying goes, many hands make light work. How fantastic would it be if there were so many hands that the burden didn’t fall on just a few? Together, let’s make the web rawk even harder!”. You can read more in Addy Osmani’s The Smashing Guide To Moving The Web Forward.
3. Boston Globe
The Boston Globe website is the poster child of a beautiful commercial “responsive web design” website. Built mobile-first, it behaves well in old browsers, even those without support for media queries or JavaScript. Scott Jehl of the Filament Group says “Every critical feature of the site was designed to work independent of JavaScript, but enhanced with richer JavaScript-driven interactions in capable browsers.”
Scott continues “We used HTML5 for a number of reasons. Mostly, it’s future-friendly and offered features that were useful in our feature set. For example, we made wide use of data- attributes for configuring behavioural options or associating content enhancements, we also appreciated the ability to use newer semantic elements in place of div/p/span where they made sense.”
The audio of his mashup of Definitive Daft Punk is visualised using the <audio> API and <canvas>, with support from CSS3 transforms and transitions. Cameron says “All of the waveform and spectrum visualisation is performed in realtime, so your browser is rendering a music video on the fly!” Proving that Flash isn’t dead yet, Cameron used a custom Flash app to get the audio spectrum data.
On HTML5, Cameron says “The thing that I love most about working with HTML5 is the immediacy of development; I can edit a JavaScript file, hit refresh and see what I’ve done immediately. No compiling, no special plugins. It’s the most accessible way of getting my work out there.”
5. SoundCloud
SoundCloud is a service for recording and sharing sounds, and is a popular way for artists and DJs to share mixes and expand their fan base. It’s also a great case study in pragmatic use of HTML5. While the desktop web app uses Flash to play audio, there’s an option to use HTML5 Audio in settings. This has also allowed SoundCloud to support the iPad, and they’ve recently released an HTML5-based widget.
In addition to <audio> and the Audio API, they also use data-* attributes heavily, plus Canvas, SVG, and LocalStorage. Matas Petrikas says “We are especially proud of our use of Canvas in rendering of the widget waveform, the optimisations helped us to reduce the CPU load compared to Flash significantly”. Unfortunately there’s also some user agent sniffing (albeit for pragmatic reasons), and little use of new HTML5 elements or form attributes (although this is changing).
However, HTML5 Audio is not the default due to what Matas describes as “the poor state of HTML5 Media API implementation in web browsers”. To combat this Tomás Senart and Yves Van Goethem created the audio test suite “Are We Playing Yet?”. Matas says “The response has been overwhelming, we already have most of the browser makers participating, and we look optimisticly towards 2012!”
Additional problems in mobile devices include recording sound, the lack of widespread support for position:fixed for UI, and the lack of frequent (or any) mobile browser updates – Android WebKit is becoming the modern IE6. Because of this SoundCloud heavily promote their native apps to iOS and Android users. Matas says “we want to offer users the best experience possible, and currently the mobile browsers are still behind”. However, the future still holds promise: “we are big advocates of the upcoming device API (getUserMedia) and we hope in future to be able to capture sounds in the browser without Flash”.
These areas highlight some current problems in both specifications and browsers, but it’s certain both will continue to improve rapidly. For example Mobile Safari now supports background audio, GeoLocation and accelerometer. Even with the problems Matas says compared to Flash making the HTML5 version “was a pretty fast process. Debugging and optimising were also easier. This allows us to build and iterate faster, and in the end our users are happier too!”
6. The Wheels Of Steel
The Wheels Of Steel by Scott Schiller is two turntables and a mixer, live in the browser.
The demo uses HTML5 Audio where supported, with Flash as a fallback, via Scott’s JavaScript library SoundManager 2. It also uses some other fun stuff, including <input type="range"> for the crossfader and localStorage, plus a bunch of CSS3 for the impressive visual bling. Rather than go into detail, I recommend you read Scott’s excellent article The Wheels Of Steel: An Ode To Turntables (in HTML). I especially like this quote: “the page gracefully degrades and the core UI + content renders nicely even with JavaScript turned off. Blank or illegible pages shown to users without JS … reflects poorly on the site developers.”
Client-side web apps
7. Dabblet
Dabblet is marauding maker of awesome Lea Verou’s newest tool – a live CSS sandbox that saves as GitHub gists, and runs entirely client-side.
It uses a raft of HTML5 and related goodies, including CORS (cross-origin resource sharing), localStorage, the History API, the Selectors API, data-*,contenteditable, and inline SVG. Lea’s considering using the Drag & Drop API for resource embedding and the Offline API in the future, but says “the offline API is a huge pain in the arse”. She also tried using Web Workers for asynchronous syntax highlighting, but this made it seem slower. She’d also love to use the currently-being-specced UndoManager API once it is implemented, as “a big portion of dabblet’s code is devoted to recreating Undo/Redo”.
Because the target audience are web developers, Lea hasn’t worried about backward compatibility. “If it was for a less tech savvy audience where IE is a concern, I’d still use HTML5, but with proper polyfills and fallbacks in place.” On HTML5, Lea says “HTML5 means
three things for us developers: speed, universality, and openness. Making cool things is now easier than ever.”
8. Font Dragr
font dragr by Ryan Seddon allows you to preview custom fonts in the browser by simply dragging a font file from your computer into font dragr, or choosing from a list. Even better, you can use the font dragr bookmarklet and change the fonts on any site, targeting each font using a CSS selector. This lets you preview and compare fonts for @font-face use quickly, leaving the coding until you’ve decided.
It uses new HTML5 elements, the Drag and Drop API, the History API, the contenteditable attribute, and localStorage. Support for Google Web Fonts is also in the works. Ryan says localStorage is used to “do an ajax request which will get the view html, replace it in the DOM and then cache that view html in localStorage. So it only needs to do a network request the first time around.” On HTML5, Ryan simply says “it is the future”.
Slavery Footprint is an interactive survey that answers the question “how many slaves work for you?” to raise consciousness about modern-day slavery.
It heavily uses JavaScript to lazy-load and animate content, along with new HTML5 elements, GeoLocation and SVG. While in a modern browser the results are compelling and highly effective, sadly the site is not built with best practices. The survey form is unusable without JavaScript, and the information about slavery (“What? Slaves work for me?”) is inaccessible text-as-image. Perhaps because it didn’t start “content first”, Slavery Footprint also initially had some teething troubles, both with hosting and providing support for old browsers – the client was the USA State Department, who were still using Internet Explorer 7. Despite the problems it’s been successful in interactively raising awareness of modern slavery.
10. Kern Type
Kern Type is a type kerning game by Mark MacKay that is strangely addictive. You try to move the letters in a word to correctly kern them, and are scored on how well you did. Each word is in a different font too.
In addition to SVG with the help of the JavaScript library Raphaël to draw the letterforms, it uses data-* attributes for font data (the initial positions and the x-height), and Raphaël’s drag-n-drop for interactivity.
Mark says “I didn’t plan supporting tablets, but when I was almost finished I fired up Kern Type on my iPad and I was pleasantly surprised: not only was it almost 100% functional, the animations were smooth and the drag and drop worked great. All I had to to was add a couple of lines of JavaScript to prevent the page from scrolling and that was it.” He ended up using Raphaël drag-and-drop because with HTML5’s “I would have had to build an interface between Raphaël and my custom made javascript. I would have used HTML5’s drag-and-drop if I needed to drop over targets, as that’s notoriously difficult.”
When you complete it, have a go at the sister game Shape Type, and stay tuned for Method of Action’s first course “Design for programmers”, of which they’re both a part of.
11. SVG Girl
SVG Girl is a demo site produced for the Internet Explorer 9 release. It showed off IE9’s SVG powers with a very Japanese flip-book type animation running at 10 SVG frames per second, with sound via the <audio> element and an intro <video>.
It was made by the core members of jsdo.it, a social coding community site for creating, sharing and forking JavaScript, HTML5 and CSS code. This is run by Kayac, who describe themselves as “the most playful company in Japan” (as their great `data-*` and SVG-powered team page demonstrates).
I’ve yet to see any Japanese schoolgirls experiencing such a transformation while using Windows Phone 7.5, but hey it’s Japan — anything is possible For another interesting Japanese example, have a look at The Shodo, a <canvas>-based traditional calligraphy web app, that stores stroke info as SVG paths.
Canvas
12. Peoplemovin
Peoplemovin is a personal project from Carlo Zapponi to show migration flows across the world, based around a flow diagram (inspired by Sankey diagrams). More than 215 million people, three per cent of the world population, live outside their countries of birth. Peoplemovin makes it easy to investigate migration by country, with intuitive visual representations explaining the statistics.
Carlo says “The foundation of the website is the canvas, all the interactions and visualisation happens in the space of the canvas that let me draw the connecting lines between the countries. I also used some CSS3 rules for rounded corners, shadows and glows and fonts.” In addition to the latest browsers it also works on smartphones and tablets. Carlo ended up making his own open-source toolkit called DataMovin to achieve this, which he plans to release at some stage (check the source in the meantime).
Describing HTML5, Carlo says “What’s great about HTML5 is that it is the perfect platform for creativity. You have a new crazy idea? Great! In a shorter time than ever before you can build anything into the browser without reinventing the wheel every time.”
13. Rally Interactive
Rally Interactive’s website contains a masterful example of creatively using canvas for interactivity. The triangular shapes react to hover and click in a way that until recently would have required a plugin like Flash.
As Wes Pearce says “We simply couldn’t have gotten the effect we wanted for our site without the HTML5 canvas. Support for the canvas in the latest browsers is shockingly uniform. We also put the new History API to good use, and were surprised at how quick it was to implement.”
<canvas> examples are injected into the essay, allowing you to interactively learn about the point being made. I think this kind of thing is going to be a major part of future educational books, making ePUB 3 and HTML far superior to PDF, ePUB 2, and Kindle Format 8.
15. Sumon
Sumon is a simple addition game with great attention to detail. It’s been made by Ludei as a tech demo for their CAAT framework, which outputs to Canvas, WebGL and DOM/CSS.
As with Agent 008 Ball and Pirates Love Daisies from 2010, it’s a great example of the combination of canvas and audio plus talent – a fun game that runs right in your browser. It’s also available in the iTunes, Chrome and Android stores, plus as a Facebook game, all from the same codebase. That’s the kind of reach native apps just don’t have.
Iker Jamardo writes “JavaScript and HTML5 features are great game development platforms. The main disadvantage we found is poor performance in mobile device browsers.” While Ludei believes this will improve eventually, they’ve developed the Cocoon and CocoonJS frameworks to achieve native performance on mobiles. Iker concludes “we deeply believe JavaScript and HTML5 are great for game development and multiplatform deployment”.
WebGL
WebGL is again not part of the HTML5 spec – it’s a separately specified API that allows 3D graphics to be used in <canvas>. However, for crazy eye candy it’s hard to beat. Rather than go into details, let’s just see some examples:
The travelling wave fronts tech demo is a “fine-tuned 8bit reaction-diffusion system with added traveling wave fronts and subpixel decay”. Mesmerising.
18. ROME “3 Dreams of Black”
ROME “3 Dreams of Black” is an interactive music video by Chris Milk and friends, to music by Danger Mouse, Danielle Luppi and Norah Jones.
There’s a lot of amazing stuff coming to the web stack too. Let’s look at just one example – the WebRTC (Real-time communication) specification (getUserMedia). This allows you to “exchange real-time, interactive media, including audio and video”, with a major use being video chat between browsers. Opera also has experimental support for getUserMedia in developer builds for both desktop and mobile.
As you’ve no doubt noticed by now, despite grouping these websites by an HTML5 technology they use, they’re all using way more than just one. While not everything is ready for adoption, there’s a lot of goodness in the HTML5 specification (and other web stack specs like SVG and WebGL) that you can use right now. Keep up to date and find out more at HTML5 Doctor, the W3C’s Planet HTML5 and on Twitter with @HTML5.
The “HTML5” buzzword has been a double-edged sword, but it’s helped the bandwagon gain momentum and made an impression on management too. Hopefully with this pile of inspiration you’ll return to the first two sites in the article, go forth and make awesome!
SVG to HTML5 Canvas Tool converts SVG into an HTML5 Canvas JavaScript function. It helps people to experiment with Canvas. This online tool uses a modified version of the excellent Canvg library. Canvg usually renders the SVG immediately and does not output JavaScript source code. Having the source code available allows you to study and manipulate the Canvas statements as required. It works with a reasonable subset of SVG. Due to the low-level nature of Canvas, some of the JavaScript functions can be quite large. Try this tool and convert your SVG file into HTML5 canvas equivalent.
If you have a number of related images (or other content) with caption text, you can use nested figure elements to associate both a group caption and an individual caption to each instance using the figcaption element.
Using nested figure elements is a useful method for grouping related content instances, such as images.
Examples are provided on a separate page: Use of nested figures
Recommended methods – grouped images
Examples of recommended methods for marking up groups of images which have associated captions:
Example 1. Code using nested figure elements:
Notes
The group figcaption is placed at the top of the group figure.
Each image is in a nested figure with an associated figcaption below the image.
The name of the photographer in the third caption is French, as the caption text is contained with the figcaption element the name can be marked up using the lang attribute to indicate it is to be pronounced differently from the rest of the text in the page.
The ARIA role=”group” is used to indicate the semantics of the figure and the labelling relationship of figcaption to assistive technologies. Refer to the Firefox implementation bug: Implement figure and figcaption accessibility for more details.
<figure role="group">
<figcaption>The castle through the ages: 1423, 1756, and 1966 respectively.</figcaption>
<figure role="group">
<img src="castle-etching.jpg" alt="The castle has one tower, and a tall wall around it.">
<figcaption>Charcoal on wood. Anonymous, circa 1423.</figcaption>
</figure>
<figure role="group">
<img src="castle-painting.jpg" alt="The castle now has two towers and two walls.">
<figcaption>Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption>
</figure>
<figure role="group">
<img src="castle-fluro.jpg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>Film photograph. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption>
</figure>
</figure>
Example 1. Display using nested figure elements:
Notes
Placement of the group caption at the top of the containing figure means users will encounter it first as the navigate through the content.
Nesting of figure elements provides a richer more granular content structure.
Use of the figcaption to mark up each caption means that caption texts are visible to all users by default and additional semantic markup can be added to the caption text if required.
The castle through the ages: 1423, 1756, and 1966 respectively. Charcoal on wood. Anonymous, circa 1423. Oil-based paint on canvas. Eloisa Faulkner, 1756. Film photograph. Séraphin Médéric Mieusement, 1936.
Example 2: Using nested figure elements and CSS to show/hide caption information.
Notes:
It may be a requirement for visual design that the caption text is not always visible. This can be achieved through the use of some additional markup and CSS to hide/show the caption text on hover or focus.
The castle through the ages: 1423, 1756, and 1966 respectively. caption Charcoal on wood. Anonymous, ca. 1423. caption Oil-based paint on canvas. Eloisa Faulkner, 1756. caption Film photograph. Séraphin Médéric Mieusement, 1936.
How NOT TO markup groups of images with associated captions
The HTML5 specification does not currently provide an example of using nested figure elements to mark up a group of images and their captions. Instead it promotes the use of the title attribute anti-pattern to caption the individual images within a figure.
An example of how not to mark up groups of images which have associated captions is provided in Example 3 – bad code example
Example 3. A version of the original example code from the HTML5 specification of a figure containing multiple images:
Notes:
DO NOT markup multiple images inside a single figure using the title attribute to provide a caption for individual images.
Caption text in the title attribute cannot be marked up for changes in language or emphasis or any other semantic properties it may include.
<!-- THIS IS BAD CODE DO NOT USE IT -->
<figure>
<img src="castle1423.jpeg" title="Charcoal on wood. Anonymous, circa 1423."
alt="The castle has one tower, and a tall wall around it.">
<img src="castle1858.jpeg" title="Oil-based paint on canvas. Eloisa Faulkner, 1756."
alt="The castle now has two towers and two walls.">
<img src="castle1999.jpeg" title="Film photograph. Séraphin Médéric Mieusement, 1936."
alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>The castle through the ages: 1423, 1756, and 1936 respectively.</figcaption>
</figure>
Example 3. Display of a figure containing multiple images with captions text in the img title attribute:
Notes:
If you are a mouse user you can view the caption text by hovering the mouse cursor over the images.
If you are a keyboard only user or are viewing the content on a touch display you will be unable to access the caption content.
The title attribute is an ambiguous and limited semantic container for caption text and therefore is not to be used.
The castle through the ages: 1423, 1756, and 1936 respectively.
Amazon’s recent announcement that it will support HTML 5 in their new eBook format – Kindle Format 8 (or KF8) – to be used by its Kindle Fire, highlights the growing trend of websites adopting HTML 5 as the accepted future web standard.
With this new following will come more opportunities for the pro-active SEO to take advantage of a number of features of this new format to gain the edge over the competition.
There’s been plenty of speculation in the online world about the opportunities inherent in the new HTML tags, so because of that, I won’t belabor that point.
But what I would like to do is highlight the very important search optimisation opportunities that can be gained from semantic HTML 5 tags…right now.
Link Architecture Optimisation with HTML 5
Google has already rolled out support of more semantic <a> rel attributes – part of HTML 5 – to their Search Engine Result Pages (SERPs).
For example, Google’s support of rel=”next” & rel=”prev” was publicised in September (confirming behaviour already spotted in US SERPS while the testing for this feature was carried out), allowing different optimal SERP listings to be generated from the same website based on a searcher’s query with very fine grained control.
As another example, Google’s rel=”canonical” tags have been around for a while now, and can also be considered an extension of the semantic markup promoted by HTML 5.
Google’s interpretation of the tag is now becoming more complex, as the meta <link> tag concept of a ‘canonical page’ can also be indicated in a link rel attribute for an <a> tag.
Google is therefore inferring meaning from the implication of the tags that is more sophisticated than their original purpose of simply providing an alternative to a 301 redirect for webmasters who know they have a duplication issue.
This increased flexibility of interpretation is the area of optimisation that can immediately be taken advantage of.
Simply by combining these options, webmasters can now deliver re-purposed content targeting long tail terms that would otherwise struggle to perform with the minimum of supporting linkbuilding.
So just how does this work? Here is a practical example – we’ll look at a property website in order to spell out the process.
A Semantic SEO Example
The core content delivered in the day to day course of delivering an online property availability service is the individual property listing pages.
Before Google’s announcement of their more sophisticated handling of canonical tags, in order to build pages targeting long tail terms, unique content written around the terms would need to be produced for each of the terms – and when you’re targeting long tail, you’re targeting a lot of long tail terms to deliver sufficient traffic uplift.
So, lets say that 300 pages of 150 – 200 words of content is required to be researched and written.
This means that the CMS delivering the website would need to be adapted to deliver subsets of the main listing content that was relevant to the long tail terms, in order to combine and create a landing page that can both capture traffic and convert visitors with reasonable success.
Unfortunately, while a good strategy in principle, this approach is often shot down before it get started because of the resource-heavy content generation requirement and a feeling that the site quality is being ‘diluted’ (a common client concern with this approach).
After all, if one of 300 or so targeted search terms is ‘Commercial Property to Let in Walthamstow’ it’s unlikely that sufficient research will be undertaken to make it of use to searchers arriving on that term.
However, by setting the rel=”canonical” tag for pagination links to a ‘View all’ page, Google will return the ‘View All’ page for relevant top level search terms (‘Commercial Property London’, say) and treat the paginated pages as non-duplicate for searches highly related to their specific content.
Meaning our ‘Commercial Property to let in Walthamstow’ page can be targeted as a paginated page generated by a ‘Walthamstow’ search filter, say, without requiring any additional unique content.
This means we can use the content production resource for more valuable site optimisation: such as revamping and improving content on high value keyphrase landing pages, developing linkbait worthy content, delivering better quality information on all listed properties, etc, etc.
Oh, and we might pick out a few of the longer tail terms to get special treatment when we know we have the resources to back up the generation of some top quality content.
So, who says we need to wait for ‘the Future of HTML’? Why wait? We’ve just optimised our site for HTML 5.
Facebook launched an HTML5 Showcase for developers today and I was excited to see that two projects that Mozilla has
worked on in the past 9 months were featured: Mozilla’s Mark Up and Mozilla’s Web O Wonder.
12 visitors online now 2 guests, 10 bots, 0 members Max visitors today: 19 at 01:11 am UTC This month: 52 at 01-08-2012 03:05 am UTC This year: 52 at 01-08-2012 03:05 am UTC All time: 122 at 03-21-2010 01:46 pm UTC
For another interesting Japanese example, have a look at 
caption 
