HTML5 tutorial examples

Semantic elements:

• The article tag example (article)
• The header tag example (header)
• The footer tag example (footer)
• Example with sections in HTML5 (section tag)
• The aside tag example (aside)
• Setting up details and summary sections (details and summary tags)
• The summary tag example (summary)
• Basic navigation in HTML5 example (nav)
• The main tag basic example (main)
• The headings grouping in HTML5 (hgroup)
• Example of menus in HTML5 (menu)
• Menu items in HTML5 (menuitem)
• Setting up a figure tag with an image (figure)
• Caption added to a figure tag's image (figcaption)
• The dialogue tag example (dialog)
• Example of marking lines in HTML5 (mark)
• Bi-directional text element example (bdi)
• Example of word breaking in HTML5 (wbr)
• Example with the time tag and datetime attribute (time)
• The ruby tag example (ruby)
• The ruby text element example (rt)
• The ruby parenthesis element example (rp)

Graphic elements:

• Basic example of canvas element's usage with fillRect and getContext methods (canvas)
• Example of drawing rectangles with canvas element
• Example of drawing a straight line with canvas element
• How to draw a face with canvas element
• Example of creating text with canvas element
• Creating linear and radial gradients with HTML5
• Example of inserting and working with canvas images
• How to make rectangles, rounded rectangles, circles, stars and text with SVG element

Media elements:

• Inserting videos with HTML5 example (video)
• Inserting sound with HTML5 example (audio)
• Example of source element (source)
• Example of track element (track)
• Example of embed element (embed)

Form elements:

• Example with all HTML5 input element's types (input type=color...)
• Example of datalist and input elements (datalist, input)
• Example of keygen element (keygen)
• Example of output element (output)

Form and input elements attributes:

• Example of autofocus attribute
• Example of autocomplete attribute
• Example of form attribute
• Example of formaction attribute
• Example of formnovalidate attribute
• Example of novalidate attribute
• Example of formtarget attribute
• Example of width and height attributes
• Example of list attribute
• Example of min and max attributes
• Example of multiple attribute
• Example of pattern attribute
• Example of placeholder attribute
• Example of required attribute
• Example of step attribute

Progress and meter elements:

• Example of progress element (progress)
• Example of meter element (meter)

Math elements:

• Math element with basic math functions example

HTML5 elements attributes:

• Semantic elements menu and menuitem and their attributes example
• Semantic elements details, dialog and time and their attributes example
• Graphic element canvas with basic drawing of rectangular, line and coordinates example
• Graphic element canvas with simple path methods example
• Graphic element canvas with text methods example
• Graphic element canvas with linear and radial methods example
• Graphic element canvas with image manipulation methods example
• Graphic element SVG with gradient effect example
• Media elements video, source and track and their attributes example
• Media element audio and its attributes example
• Form element keygen and its attributes example
• Form element output and attributes name and for example
• Progress and meter elements their attributes example
• Global attribute contextmenu example
• Global attribute content editable example
• Global attribute data-* example
• Global attribute hidden example
• Global attribute spellcheck example
• Event mouse attributes ondrop, ondragover, ondragstart and ondrag example
• Event form attributes onreset, oninput, oninvalid and onsubmit example
• Event window attribute onresize example
• Event media attributes onplaying, onpause, onvolumechange and onended example
• Event clipboard attributes oncut, oncopy and onpaste example
• Non-HTML5 elements attribute download for <link> example
• Non-HTML5 elements attributes disabled for <fieldset> and maxlength and wrap for <textarea> example
• Non-HTML5 elements attribute reversed for <ol> example
• Non-HTML5 elements attributes sandbox and srcdocfor <iframe> example

Advanced HTML5:

• How to add Youtube videos to HTML5 page example
• Example of animated canvas in HTML5
• How to draw polygons with HTML5 canvas example
• Example of local storage API with one session