Welcome to The HTML5 Qwanturank Tutorials

Learn HTML5 tags online with The HTML5 Tutorials

The HTML5 Tutorial will help you to learn HTML5 online with all the new features and HTML5 tags. HTML5 has recently been launched and attracting attention of many web designers. The HTML5 Tutorials best meets the requirements of freshers, who want to pursue their career as web designer, and experienced web design professionals who only need to know the new HTML5 tags. You’ll learn this Markup Language with major emphasis on range of new elements with example codes like

• Audio and video playback
• Familiarization with new tags like header
• Footer and section
• Resizing
• Canvassing
• Rotation

Additionally, learning with HTML5 tutorial will help you to practise all new HTML5 tags and its usage in developing new website using easy to grasp example codes. All sort of information related to its multimedia features and rich applications has also been provided in this tutorial that should fascinate you. Beginners should learn the steps one-by-one as given in the tutorial to understand the language from the scratch.

You will also get detailed information on:

• History of HTML
• Features
• Glossaire tapissier decorateur
• Comparison with older versions, and
• Learning new tags

Consequently, you'll also learn HTML5 to design and develop websites in latest Mark up language whether you're a beginner or an experiended web designer.

HTML5 tutorial also contains the guidelines to handle all elements and help, how to recover from errors and overcome huge development cost. All the major web browsers including Internet Explorer, Safari, Google Chrome, and Mozilla FireFox supports some of the HTML5 tags and some tags may require plugins to work on browers.

Example codes provided in this tutorial with explaination of each element will help you gain both theoretical and practical knowledge of new tags. Those example codes will also help you to understand how to use tags while creating web pages. So, you can study all the tags and by practicing it in your day to day life you will learn all tactics to create attractive websites.

Introduction to HTML5

HTML5 is a newest version of HTML (Hypertext Markup Language). It is an ongoing process that took place by combined efforts of World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The initial phase for the development of HTML5 started in 2004 by WHATWG that has been developed by edited by David Hyatt of Apple and Ian Hickson of Google, Inc. There are several features in the latest version that have been implemented in various Web browsers.

An open source workable platform has been intended to be produced by HTML5, which can be used by multiple vendors throughout the internet. As a result, everyone can have access to the development of new applications. Some of the major browsers namely Internet Explorer, Safari, Google Chrome and Mozilla Firefox presently supports some of the features of HTML5.

This the latest version have been considered as the new platform for streaming video capabilities into browser applications. JavaFX, Adobe Flash and Microsoft Silverlight obsolete are some of the potential plug-ins that can be used with this language. It comes endowed with many interesting features like:

Canvas technology: It has been invented by well known brand Apple with a 2-D browser based drawing feature. To draw graphics on web page, JavaScript has been used. Here are some of the drawing methods like circles, paths, boxes, characters and images that have been used by canvas element.
Web videos: These days, most video are shown by plug-ins like Flash. HTML5 includes standard way with the video element for quality videos.
Audio on web: mostly, all audios are played using plug-ins like Flash whereas, HTML5 indicate standard audio element to play sound files.
Web Storage: There are two methods namely session storage and local storage used for storing data without any effect the website's performance.
In addition to this introduction to HTML5, the APIs (Application Programming Interfaces) need to tbe outlined as they have also been outlined by HTML5. It include several impressive features like browser history management, canvas element for immediate mode 2D drawing, drag and drop, MIME type and protocol handler registration, timed media playback, Microdata, offline storage database, document editing, cross-document messaging and further more.

Older versions Vs. HTML5

HTML is a markup language that stands for Hypertext Markup Language. By using HTML you can easily create your own websites. Its functioning depends on various tags that are categorized in two ways including opening tags (<b>) and closing tags (</b>).

It requires plug-ins like Flash to operate various music and video files.
It has been considered an interactive form that allows images and objects to be embedded.
HTML is a W3C recommendation that stands for World Wide Web Consortium.
It lacks canvas feature for drawing.
In HTML, cookies are used for storing login and web browsing history. For large amount of data storage cookies has not been considered suitable option.
Recently, HTML5 has become the centre of focus for developing websites. It is being considered as a new standard of HTML, HTML DOM and XHTML.

It can play audio-video files and supports various formats.
HTML5 includes interactive documents that functions for embedding graphics.
HTML 5 is not a W3C recommendation yet
It has initiated Canvas feature that uses JavaScript to draw graphics on a web page and is useful to control pixels.
Two new storage methods have also been introduced in HTML5 that include local storage and session storage. The data is not passed on by every server request, but used only when asked for. So, this makes it possible to store large amounts of data without affecting the website's performance.
Apart from the above features, several new tags have been introduced in HTML and some of the tags have been deprecated that were previously being used in HTML such as <acronym>, <big>, <dd>, <frame>, <strike> and so on. Some of the new tags that have been added in the HTML5 are <source>, <keygen>, <footer>, <figure>, <datalist>, <canvas>, <audio> and further more.

Tags

• source
• article
• aside
• audio
• canvas
• command
• datalist
• details
• embed
• figcaption
• figure
• footer
• header
• hgroup
• keygen
• mark
• meter
• nav
• output
• progress
• ruby
• section
• summary
• time
• video
• wbr

The <source> Tag

The media elements like <audio> and <video> are defined in source tag to specify multiple media resources. This newest tag initiated by HTML5 is denoted by <source> allowing you to specify alternative video and audio files, based on its media type or codec support. The main reason to use source tag is to recognize multiple versions of source media.

Example code:

<video controls>
<source="video.WMV" type="video/WMV" /> <!-MP4 for Mozilla Firefox -->
<source="video.ogg" type="video/ogg" /> <!-- Ogg Theora for Google Chrome -->
</video>

With the use of source tag you can now embed video clips and audio tracks in web pages without any need for plug-ins like Flash or Quicktime.

The <article> Tag

The Article tag <article> is used to show some external content that could have been taken from any external source or provider like other web sites, forum post, newspaper article, any user submitted documents, blogs, etc.

The external content here stands for the independent and redistributable content that user reads and is not directly related to the contents of the web page that contains the <article> tag.

The article may have a heading and may also include a footer.

Example code:

<html>
<body>
<article>
<h5>HTML5 PROCESS</h5>
<p>HTML5 is currently under development as the next major revision of the HTML standard.</p>
<p>Like it's immediate predecessors, HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
</article>
</body>
</html>
Consequently, you can now go through HTML5 tutorials and practice this newest tag for its further utility in web pages.

The <audio> Tag

HTML5 solves the dependence on external third party plug ins where a user viewing a web page can directly listen to the sound file in the page as soon as the page loads.

The user may control the sound stream through the provided control provisions. Currently, three sound formats are playable on HTML 5. These are .Ogg, .MP3 and .WAV.

Currently Internet explorer 8 doesn't support playing sound files but other browsers like Firefox 3.5, Chrome 3.0 and Saafri 3.0 do. Please note that not all browsers support all the given three formats.

You can display an error message to the viewer using fallback content to display an error message if the viewer is using an incompatible or outdated browser that doesn't support audio playback.

Example code:
<html>
<body>

</body>
</html>

The <canvas> Tag

The canvas tag is used to draw graphics on a rectangular area inside a web page by using JavaScript. The canvas tag can be used to draw graphs, generate photo compositions and dynamic content like animations, games etc.

One can also write a fallback content (as you may have read in audio tag) between the start and end tags to show legacy browser that they do not support this element.

Using this feature, one can control each and every pixel that is part of it. The element reduces the need to download images or graphics from a server.

Example code:
<html>
<body>

</body>
</html>

The <command> Tag

The command tag is used to represent a command like a checkbox, radio button or any other button that the user can interact with.

There is one criterion which must be met while making a command- it should be inside a menu element, else it won't get displayed on the page in the browser. It simply means that a menu contains a command element and this could not be vice versa.

Example code:
<html>
<body>

</body>
</html>

The <datalist> Tag

The <datalist> tag is used to list a set of data to be used in a list of options like autocomplete feature used in forms.

This feature has to be used along with the input element, so as to include which values the input element should have. This option would not be shown on the page as the datalist tag is used to check if the input values are valid or not.

Example code:
<html>
<body>

</body>
</html>

The <details> Tag

This tag is used to specify the additional details about document(s) which can be viewed or hide by the viewer.

The tag can also be used along with the summary tag to make a header so that the user can expand or collapse the details of the data when required.

Example code:
<html>
<body>

</body>
</html>

The <embed> Tag

Embed means "to insert something into". Plug ins or other embedded content are defined using this tag.

This tag can be used to embed any multimedia files, application or any other content that is basically non HTML in standard.

Note that this tag does not support the fallout content so one should not write any data between the opening and closing tags of this element to inform old legacy browsers.

Example code:
<html>
<body>

</body>
</html>

The <figcaption> Tag

The figcaption tag is used to give caption to a figure or a legend. This tag is used along with the figure tag.

This tag could be optional and there should be only one tag of a figcaption within one figure tag irrespective of the number of images/code/graphics that are in the parent figure tag.

The figcaption tag could be placed before or after the object or content but should be within the figure element. The placement order for this tag is for the user to define.

Example code:
<html>
<body>

</body>
</html>

The <figure> Tag

The <figure> tag is used to represent a content that is a single stand alone unit from the main flow of the document.

It could be moved away to any other page, to the side of the page, to dedicated pages or an appendix without affecting the flow of a document.

The figure tag don't only place or hold images but can also include audio, video, charts, tables and so forth.

Example code:
<html>
<body>

</body>
</html>

The <footer> Tag

The <footer> tag defines footer for a part of a document or a section in the document.

Footer tag can contain things like copyright info, name of the writer or owner, terms of use or privacy options links, the date the document when it was written or contact information of the writer, etc.

It is also not necessarily that a footer tag should be kept at the bottom of the page. It can appear anywhere in the document.

Note, it cannot be placed within a <header> or another <footer> tag.

To display all the extra info, footer tag can be used in several places in a page.

Example code:
<html>
<body>

</body>
</html>

The <header> Tag

The header tag is to represent some or all the introductory information about the document.

It can be used to hold the section's heading (from h1 to h6) and can also contain a section's contents such as table of contents, any relevant logo/images, a search form, etc. Normally, this tag is used at the beginning of the page and it can be used more than once in a document just like the footer.

Example code:
<html>
<body>

</body>
</html>

The <hgroup> Tag

The <hgroup> tag represents the heading of a section or a document. It can be referred as a form of title that outlines the document which it belongs to.

The hgroup tag is used to group a set of headers, <h1> to <h6> elements, when the heading has multiple headings.

The header tags <h1> to <h6> are grouped using this tag which places the largest as the main heading for that section in the document.

Example code:
<html>
<body>

</body>
</html>

The <keygen> Tag

The <keygen> tag is intended to be used in a form, along with other information which would help in creating a certificate request and after its generation the end result would be a signed certificate.

The tag would cause some sort of selection to be presented to the user of the page for selecting key size and the interface could be a menu, radio buttons, etc.

Using the canvas feature, one can control each and every pixel that is part of it. The element reduces the need to download images or graphics from a server.

This tag is provided to generate keys and to submit the public keys as part of HTML form. The private key is encrypted and stored in the local key database while the public key is packaged and sent to the server for authentication.

Example code:
<html>
<body>

</body>
</html>

The <mark> Tag

The <mark> tag is used to mark and highlight text or portions of text in a document just like a marker which is used to mark certain words and sentences in a document.

Mark tag is used to highlight that a part of the text to bring the reader's attention to that part of the text.

Example code:
<html>
<body>

</body>
</html>

The <meter> Tag

The <meter> tag is used for measurement purposes. This tag can be used only for measurements that have a predefined minimum and maximum value.

It represents a numeric value in a range which must be pre-specified. A scalar measurement is possible within a known range. The range of the measurement should be defined, either in the tag's text or with the min/max attributes.

Example code:
<html>
<body>

</body>
</html>

The Navigation tag - <nav> Tag

The <nav> tag indicates to a section of page that may link to other pages or to parts within the page itself.

The navigation tag may be considered as a section in the page that contains navigational links to other pages or the same page.

A document may contain several nav tags, for example, one for the intra-page navigation and one for site navigation.

Example code:
<html>
<body>

</body>
</html>

The Output tag - <output> Tag

The <output> tag is used to show the result of a calculation made using a script.

Example code:
<html>
<body>

</body>
</html>

The Progress tag - <progress> Tag

The progress tag is used to define the progress of a task which is currently undergoing in the page. It can be helpful to track what amount of task has been done and what is under process.

It could be implemented by the use of Ajax or JavaScript to display the progress of a task or any other process that is going on.

A progress tag can show you what percentage of a file is downloaded or how far the time has elapsed in the movie that you are currently watching:

The progress could either be indeterminate, meaning that the progress is being made but that it is not known how much more work is remaining to be done to complete the task.
The progress will show a determinate value that will tell how much task had been done and how much is remaining by providing a range.
If the value attribute is not provided then the progress bar becomes an indeterminate progress bar.
Example code:
<html>
<body>

</body>
</html>

The Ruby tag - <rt> Tag

The ruby parentheses (rt) tag is used to provide parentheses around a ruby text component of a ruby annotation. It is shown by browsers that do not support the ruby annotations.

The rp tag which is the sub element of a ruby element represents nothing and its contents must be ignored. The rp tag is used in conjunction with the ruby and the rt tags as it wraps the beginning and closing parentheses around the (rt) ruby text.

Web browsers that support the ruby element hide the rp tag.

Example code:
<html>
<body>

</body>
</html>

The <section> Tag

HTML5 symbolizes section tag as <section> that has been added to define sections in a document like headers, chapters and footers. A web page may have several sub-sections and nesting sections.

For example: You can have a look on "About us" page that includes section for features, facilities provided by organizations, introduction, contact information etc.

Example code:
<html>
<body>

</body>
</html>

The <summary> Tag

The summary tag has been introduced in HTML5, which is symbolized as <summary>. It basically includes brief summary of the content. Consequently, with this tag you can easily provide summary for a table in the page layout. The summary tag must be used in conjunction with the HTML5 <details> tag.

Example code:
<html>
<body>

</body>
</html>

The <time> Tag

Many times, you may need to add time and date in your web page. HTML5 gives you ability to incorporate time on your web page using time tag. To add on a time or a date or both on a particular web page, you can use time tag that has been included in HTML5 (represented as <time>). This tag may record what a user is doing and for how long.

time tag example code:
<html>
<body>

</body>
</html>
Example code for date:
<html>
<body>
</body>
</html>

VIDEO Tag

Video tag is symbolized as <video> that is used to define videos including movie clips and other video streams etc. The procedure to insert video is just as similar as image. You can now use it with JavaScript and CSS. The various plug-ins like Flash or Quicktime.

Example code:

<video controls>
<src="video.AVI" type="video/ AVI" /> <!-- WMV for Chrome -->
<src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for FireFox -->
</video>
If in case, no video data is available then either the poster frame or nothing will be appeared in the video element. Whereas, when a video element is paused, then element will show either the poster frame or current playback position frame.

Thus, the video tag is used to play video files in the web page which until now depended on third party plug-ins like flash

Attributes Of Video Tags

• Auto-play: The video will be played just after the page loads.
• Auto-buffer: By default (without this attribute), the video file is not downloaded unless you click on the play button. Adding this attribute starts downloading the video just after the page loads.
• Controls: by default (without this attribute), the video doesn’t include any controls (play/pause button, volume, etc.). Use this attribute if you want the default controls.
• Height/width: The size of the video

Word Break Tag

The word break tag stands for Word Break Tag that is used to add a line-break. This tag is used when a word is too long or you are anxious about line not to break from place where you don’t want it to.

Till yet, <wbr> tag has not gained immense popularity though, it has great usability. It is compatible with tables on sites. With the help of these tags, you can easily add space, even in very large and very tight tables and avoid horizontal scrollbars. These scrollbars are mainly caused by the length of method or attribute names. Moreover, it is essential to keep the table limited by not allowing it to extend the window.

On smaller resolutions, strategically placed line breaks keep the table from growing larger than the window, and thus causing horizontal scrollbars.

This is a sample page text that gives you information on how you can use wbr tags. Use this tag between any two words where you want browser to break <wbr>the line if necessary. You can use it as <wbr> many times as required on a page.