Its name is Modernizr (http:// . www.modernizr.com) and if you're writing HTML5 pages, it's worth your attention. If you're a fan of lowercase, then is just as good. If you are not writing pages in English, it is better to specify the correct language code.
If you pay attention to how you write code, you'll usually use lowercase letters for the most part, wrap attribute values in quotes, and declare a "type" for scripts and stylesheets. Previously, if you wanted your markup to validate, it was necessary to wrap each element in its own tag. Realistically, avoid them if you can, but they won't drop the air if you do use them.
Mismatched features may still be displayed in certain browsers, but if you use them, you're considered very, very naughty and may not get a treat this weekend. However, if you are curious, you can see the full list of deprecated and non-conforming features at http://dev.w3.org/html5/spec/ . If you need to wrap an element simply to style it, you should continue to use a
as you would before.
If you have some headlines, taglines, and subheadings in
,
,
and subsequent tags, consider putting them in the tag.
The <header> element
The <footer> element
The <address> element
Practical usage of HTML5's structural elements
As you can see in the preceding code, we use a ,
This was especially easy for the header, navigation and footer, as the IDs were the same as the element we were changing them for - we just removed the initial. The sidebar is a little different: we need to change the references from #sidebar to sidebar. However, doing a weave and replace in your code editor of choice will help here.
Even if you've written a large CSS style sheet, switching references from HTML 4.01 IDs to HTML5 elements is a fairly painless task. Now, even though we're telling the user agents which section of the page is on the sidebar, within that we have two distinct sections, UNSUNG HEROES and MUCH NONSENSE. Because of the HTML5 outline algorithm, we can also change our
tags to
tags and it will still produce an accurate outline of our document:.
What about the main content of the site?
HTML5 text-level semantics
The <b> element
The <em> element
The <i> element
Applying text-level semantics to our markup
We also need to reshape the film names, but they don't have to suggest a different mood or voice. Default style of text-level semantic elements Due to the historical use of , most browsers will still display it in bold, so depending on your situation you may need to adjust the default style in the associated CSS. Finally, I mean it when I say 'we're here to set the record straight'. I'm not messing around and I want user agents to know.
Like , browsers will default to italicizing the tag, so where needed, reformat as needed. So now we've added some text-level semantics to our content to give more.
Adding accessibility to your site with WAI-ARIA
A complete implementation of ARIA is beyond the scope of this book (go to http://www.w3.org/WAI/intro/aria for full information). However, there are some very simple parts of ARIA that can be used to enhance any site written in HTML5 for assistive technology users. If you're tasked with building a website for a client, there's often no time/money dedicated to adding accessibility support beyond the basics (unfortunately, it's often not even thought about).
However, we can use ARIA's landmark roles to solve some of the glaring deficiencies in HTML's semantics and allow screen readers that support WAI-ARIA to easily switch between different screen regions.
ARIA's landmark roles
For example, if a widget displays a constantly updated stock price on the screen, how would a blind user accessing the page know this. To go even further, a complete list of applications and a concise description of their suitability for use is available at http://www.w3.org/TR/. Let's jump ahead and extend our current version of HTML5 And there is no winner.
If you develop on the Windows platform and want to test your ARIA-enhanced designs on a screen reader, you can do so for free with NVDA. Hopefully, this brief introduction to WAI-ARIA has shown how easy it is to add partial support for those using assistive technology, and you'll consider enhancing your next HTML5 project with it.
Embedding media in HTML5
Adding video and audio the HTML5 way
Instead of the plethora of code currently required to include video on a page, HTML5 allows for a single
