HTML5

Elements redefinition

Relevant specification for non-visual user agents such as screen readers

  • CSS is an abbreviation not an acronym!
  • <small> is not anymore a visual element It is not "render this at a small size." Instead, it has the semantic value,
  • <b> is not anymore anymore a visual element Itisused for some text "to be stylistically offset from the normal
    prose without conveying any extra importance"  
  • <i> is not anymore a visual element It means the text is "in an alternate voice or mood"
  • <cite> means "the title of a work" and not the source or the author: browsers italicize the text between <cite> tags<a> is now considered as a block element:
  <a href="/about">
<h2>About me</h2>
<p>Find out what makes me tick.</p>
</a>

Rich media elements

These are meant to be browser-native rich media elements.

plug-in content is sandboxed from the rest of the docu ment and then, they do not play with the JavaScirpt and CSS

Canvas API

The html file:

<canvas id="my-first-canvas" width="360" height="240">       <p>No canvas support? Have an old-fashioned image instead:</p>       <img src="marocco.JPG" alt="Emanuele and Rosalba in Marocco"> </canvas>

The javascript file:

var canvas = document.getElementById('my-first-canvas'); // context is our canvas API
var context = canvas.getContext('2d');
context.strokeStyle = '#990000';
context.strokeRect(20,30,100,50);

No canvas support? Have an old-fashioned image instead:

Emanuele and Rosalba in Marocco

Once an image has been served up to a browser, its contents cannot be updated. The canvas element is an environment for creating dynamic images.

The canvas element has no DOM. text not accessible
Instead of using canvas to create content, use it to recycle existing content.

SVG API

 Canvas isn't the only API for generating dynamic images. SVG, Scalable Vector Graphics, XML format that can describe the same kind of shapes as can
vas

Audio API

<audio controls preload="auto">
    <source src="unbeso.ogg" type="audio/ogg"/>     <source src="unbeso.mp3" type="audio/mpeg" />
    <object type="application/x-shockwave-flash" data="player.swf?soundFile=witchitalineman.mp3">
        <param name="movie" value="player.swf?soundFile=witchitalineman.mp3">
        <a href="witchitalineman.mp3">Download the song</a>
    </object>
</audio> 

controls attribute allows the user to  play and pause the audio, as well as adjust the volume.
preload attribute can take three possible values: none , auto , and metadata .


Video API

The video element works just like the audio element. It has the optional autoplay, loop, and preload attributes. The video element is not only scriptable, it is also styleable. poster attribute: representative image for the video you'll need to provide alternate encodings and fallback
content: