The solution for now is to produce your videos in multiple formats.
Table 1. Browser support by video format
Browser
MP4
WebM
Ogg
Internet Explorer 9
Yes
No
No
Firefox 4.0
No
Yes
Yes
Google Chrome 6
Yes
Yes
Yes
Apple Safari 5
Yes
No
No
Opera 10.6
No
Yes
Yes
Note: For the latest compatibility information, always check the CanIUse website.
A more robust way to create the fallback is to use a JavaScript utility like Modernizr to evaluate the browser's capabilities and then dynamically write the video and source tags or embed the Flash video player using SWFObject.
Tip 3: The source tag should always include the "type" attribute with the correct MIME type value. You may need to add an .htaccess file to your server to define the MIME types as well. Check out the Video for everybody article for more tips on MIME types.
Tip 2: The video tag includes a range of parameters that you can use to configure the video. See the Mozilla article Using HTML5 audio and video for more information.
Tip 1: The Adobe Media Encoder does not currently export video to Ogg or WebM format. You can use the Firefogg add-on for Firefox to encode video to Ogg Theora format, or you can use Miro Video Converter to encode video to WebM or Ogg Theora format.
The schema.org vocabulary can be used with both Microdata or RDFa 1.1 Lite syntax, and it has
types for Event, Organization, Person, Product,
Review, AggregateRating, Offer and hundreds of others.
The schema.org vocabulary can be used with both Microdata or RDFa 1.1 Lite syntax, and it has types for Event, Organization, Person, Product, Review, AggregateRating, Offer and hundreds of others.
The Doctors’ advice on SEO is to follow Google’s time-honoured guidelines: write valid, cross-browser, accessible HTML, don’t misuse markup or “cloak” with CSS, make a site with a clear hierarchy and text links, and write good content:
to produce and consume information about types of content for which HTML doesn't yet include nouns. The most prominent of these are WAI-ARIA, Microformats, and Schema.org.
Web crawlers understand some of these side-contracts,
a third option developed using lessons learned from microformats and RDFa, and designed to be integrated into HTML5 itself: microdata.
“Adding microdata” to your page is a matter of adding a few attributes to the HTML elements you already have.
So where is the real information? It’s in the <dd> element, so that’s where we need to put the itemprop attribute. Which property is it? It’s the name property. Where is the property value? It’s the text within the <dd> element. Does that need to be marked up? the HTML5 microdata data model says no, <dd> elements have no special processing, so the property value is just the text within the element.
This technique is also useful for microdata. There are two distinct pieces of information here: a title and an affiliation. If you wrap each piece in a dummy <span> element, you can declare that each <span> is a separate microdata property.
There are two major classes of applications that consume HTML, and by extension, HTML5 microdata:
Web browsers
Search engines
Google supports microdata as part of their Rich Snippets program.
a handy tool to see how Google “sees” your microdata properties
Just like associating a URL with a Person, you can associate a URL with an Organization. This could be the company’s home page, a contact page, product page, or anything else. If it’s a URL about, from, or belonging to the Organization, mark it up with an itemprop="url" attribute.
To handle edge cases like this, HTML5 provides a way to annotate invisible data. This technique should only be used as a last resort. If there is a way to display or render the data you care about, you should do so. Invisible data that only machines can read tends to “go stale” quickly. That is, someone will come along later and update the visible text but forget to update the invisible data. This happens more often than you think, and it will happen to you too.
itemscope says that this element is the enclosing element for a microdata item with its own vocabulary (given in the itemtype attribute). All the properties within this element are properties of http://data-vocabulary.org/Geo, not the surrounding http://data-vocabulary.org/Organization.
The sectioning elements act quite literally as their name suggests: they define sections of the parent element. These sections can be thought of as child nodes whose headings fall under their parent heading, regardless of their rank.
Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section’s nesting level.
For accessibility reasons, we recommend each sectioning element have a heading, even <aside> and <nav>, as shown below. If you don’t want these headings to be visible, you can always hide them with CSS.
It’s best if you use logical heading levels — <h1>–<h6> — at least until the new outlines are more widely supported.
Unfortunately, there is little support for the new outlining algorithms right now. Search engines may be experimenting with it in their crawling algorithms as you read this, but as far as we know, headings are treated just as they were before. You won’t be penalised for using them, even if you use multiple <h1>s (which have always been okay as far as the spec is concerned). Check out our HTML5 and Search Engine Optimisation article for more on search engines and HTML5.
"How to enable and tags in all major browsers
To make HTML5 video and audio tags work in all major browsers, simply add the following line of code somewhere in the of your document.
"
Get the meta element out of your markup and and send the header over HTTP instead.
On Apache, add this to your root .htaccess file:
Header set X-UA-Compatible "IE=edge"
Browsers that support HTML5 form validation have one thing in common; if a <form> is submitted and has errors on multiple fields, the browser will only display the first error to the user.
instead of listening for submit on the <form>, I instead listen for a click on the <input type="submit">. Since the user is also able to submit the form pressing enter in text inputs, I attach a keypress listener to them to ensure the same logic runs.
Compared to <link>s, @import is slower, adds extra page requests, and can cause other unforeseen problems. Avoid them and instead opt for an alternate approach
Compile your CSS with a preprocessor like Sass or Less into a single file
Place media queries as close to their relevant rule sets whenever possible.
Limit shorthand declaration usage to instances where you must explicitly set all available values.
Avoid unnecessary nesting. Just because you can nest, doesn't mean you always should. Consider nesting only if you must scope styles to a parent and if there are multiple elements to be nested.
For a complete list of properties and their order, please see
Once more, the iPhone recognises type="tel", only this time it goes one step further and completely changes the keyboard to the standard phone keyboard, as shown on the left in Figure 6. In addition to the iPhone, some Android devices (such as HTC Desire, shown on the right in Figure 6) also display a numeric keyboard for type="tel". That’s pretty handy, don’t you think? Nice, big keys for entering a phone number help you to get that big, nasty form completed quickly.
In contrast to Opera’s implementation, the iPhone (Figure 8) and some Android devices (such as HTC Desire, shown on the right in Figure 6-13) simply render the field as a standard text box but optimize the keyboard for easy input.
Chris’ technique may soon become absolete though with the introduction of the inputmode attribute. The attribute, recently added to the specification will allow users to specify the type of input mechanism that is most useful for users. When implemented, you will be able to choose between numeric, latin, email, or kana input modes.
To make the iPhone render with the standard telephone keypad as we saw for type="text" Chris Coyier, of CSS Tricks devised a little hoax you can use. Rather than using type=”number”, use a standard type="text" input and add a pattern attribute that accepts only numbers, as shown below. This solution isn’t ideal but if you think it could be useful, Chris has put a short video together showing it in action.
<input type="text" pattern="[0-9]*" name="shoe-size">
There are dedicated keys for the @ and . characters to help you complete the field more efficiently. As we discussed with type="search", there is no downside to using type="email" right now. If a browser doesn’t support it, it will degrade to type="text". And in some browsers, users will get a helping hand.
The url input type, as you might expect, is for web addresses. You can use the multiple attribute to enter more than one URL. Like type="email", a browser will carry out simple validation on these fields and present an error message on form submission. This is likely to include looking for forward slashes, periods, and spaces, and possibly detecting a valid top-level domain (such as .com or .co.uk). Use the url input type like so:
<input type="url" name="url" required>
Besides the data- prefix, the name of a valid custom data attribute must contain only letters, numbers, hyphen (-), dot (.), colon (:) or underscore (_). It cannot contain capital letters.
I recommend you use this method for quick prototypes rather than a production website, not least because CSS-only tooltips are not fully accessible.
Include the HTML5 shiv in the <head> of your page in a conditional comment and after any stylesheets.
<!--[if lt IE 9]>
<script src="components/html5shiv/html5shiv.js"></script>
<![endif]-->
Manual installation
Download and extract the latest zip package from this repositiory and copy the two files dist/html5shiv.js and dist/html5shiv-printshiv.js into your project. Then include one of them into your <head> as above.
One important facet of <main> is that it can only be used once per page.
Another stipulation of <main> is that it can’t be used as a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
Of course, if you use the html5shiv, <main> is now baked in directly.
use the header, footer, main and nav elements to mark up the broad structure of the page. Doing this will make your site more accessible to real people who use some assistive technologies
On mobile devices with on-screen keyboards, the search input type sets the submit button text to "Search".
On desktop devices, this should also enable submitting the form by pressing the Enter key?
Possible values are:
off: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method. The browser does not automatically complete the entry.
on: The browser is allowed to automatically complete the value based on values that the user has entered during previous uses, however on does not provide any further information about what kind of data the user might be expected to enter.
name: Full name.
honorific-prefix: Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle").
given-name: First name.
additional-name: Middle name.
family-name: Last name.
This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.
minlength HTML5
If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter.
maxlength
If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter.
autocorrect
A Safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. Permitted values are:
on
Enable automatic correction of typos, as well as processing of text substitutions if any are configured.