Multimedia Support in HTML5
First and foremost feature is the support of multimedia in HTML5. Yes HTML5 supports both audio and video files to be played in a browser. Below is the sample syntax to play audio and video files respectively.
Video & Audio:
<video src="Video file path" controls>Text to be displayed when the browser doesn't support the video goes here.</video>
<audio src="location of the audio" controls>Text to be displayed when the browser doesn't support the audio goes here.</audio>
Editable Contents in HTML5
This is a nice feature, which allows the end users to edit the HTML control's content. This kind of feature allows the developers to build web pages that include sections like notes, HTML editor etc. All you need to do is add an attribute named contentEditable="true" to the HTML control.
<p contenteditable="true">Click here to edit this content!</p>
This feature comes in really handy when it is combined with another feature called offline storage. The topic about the offline storage will be covered in a future article
Required Field and Range Validators in HTML5
Required field functionality is achieved using the attribute named "required" on the input controls. This makes sure that the form will not be posted until the value is entered for the input control.
<input type="email" name="EmailTextBox" required/>
Range validation is achieved through specifying the min and max values for the input control along with a valid type. This makes sure that the form will not be posted until the value entered for the input control is within the range.
<input type="number" name="NumberOfItems" min="10" max="50" required/>
Canvas in HTML5
Canvas is a rectangular area, which allows pixel level operations like drawing a line, box, circle, performing graphics, etc. Now HTML5 offers support for canvas areas. Shown below is a sample code.
<canvas id="myCanvas" width="200" height="100"></canvas>
However, it's used for current, and older browsers that require a specified doctype. Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype.