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
You will also get detailed information on:
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:
- 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
- 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, 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
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.
Features Of HTML5
The HTML5 is equipped with many new featusres that give you power to design attractive web pages you might have never designed before with HTML alone.
Here are some of the major features in HTML5 that you will find useful:
- Video playback and drag-and-drop, which are dependent on third-party browser plug-ins like Microsoft Silverlight and Adobe Flash.
- Wide range of new attributes and elements that reveal effective usage on modern websites.
- Through a standardized interface, it provides new multimedia functionality of <audio> and <video>.
- Reduced usage of plugins like Flash.
- New APIs (Application Programming Interfaces) has been specified in HTML5 that includes offline storage database, the canvas element for immediate mode 2D drawing, timed media playback, Cross-document messaging, document editing, browser history management, drag-and-drop, Microdata, MIME type and protocol handler registration etc.
- Compressed and user-friendly API.
- Versatility in handling incorrect syntax.
- Detailed rules for lexing and parsing.
- Advanced language support.
- Apart from these, there are several other features loaded in HTML5 such as ContentEditable, Stylable elements, Canvas element for drawing, geo-location, Web Forms 2.0, server-sent DOM Events, hyper-threading for Web browsers, application caches, client-side storage and further more.
- Local off-line storage for better support.
- Formats like date, time, calendar, email, url, search have been added.
- Local storage and session storage are two new methods that are used for storing data.
Recently, HTML5 has become the centre of focus for designing and 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.
- One of the characteristics of HTML5 includes its storage methods: 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 amount 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.
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.
New Elements in HTML5
The internet has changed a lot since HTML 4.01 became a standard in 1999.
Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended to. These elements are deleted or re-written in HTML5.
To better handle today's internet use, HTML5 also includes new elements for better structure, drawing, media content, and better form handling.
New Markup Elements
New elements for better structure:
| Tag | Description |
|---|---|
| <article> | Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other articles which can be distributed independently from the rest of the site. |
| <aside> | For content aside from the content it is placed in. The aside content should be related to the surrounding content |
| <bdi> | For text that should not be bound to the text-direction of its parent elements |
| <command> | A button, or a radiobutton, or a checkbox |
| <details> | For describing details about a document, or parts of a document |
| <summary> | A caption, or summary, inside the details element |
| <figure> | For grouping a section of stand-alone content, could be a video |
| <figcaption> | The caption of the figure section |
| <footer> | For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information |
| <header> | For an introduction of a document or section, could include navigation |
| <hgroup> | For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings |
| <mark> | For text that should be highlighted |
| <meter> | For a measurement, used only if the maximum and minimum values are known |
| <nav> | For a section of navigation |
| <progress> | The state of a work in progress |
| <ruby> | For ruby annotation (Chinese notes or characters) |
| <rt> | For explanation of the ruby annotation |
| <rp> | What to show browsers that do not support the ruby element |
| <section> | For a section in a document. Such as chapters, headers, footers, or any other sections of the document |
| <time> | For defining a time or a date, or both |
| <wbr> | Word break. For defining a line-break opportunity. |
New Media Elements
HTML5 provides a new standard for media content:
| Tag | Description |
|---|---|
| <audio> | For multimedia content, sounds, music or other audio streams |
| <video> | For video content, such as a movie clip or other video streams |
| <source> | For media resources for media elements, defined inside video or audio elements |
| <embed> | For embedded content, such as a plug-in |
| <track> | For text tracks used in mediaplayers |
The Canvas Element
The canvas element uses JavaScript to make drawings on a web page.
| Tag | Description |
|---|---|
| <canvas> | For making graphics with a script |
New Form Elements
HTML5 offers more form elements, with more functionality:
| Tag | Description |
|---|---|
| <datalist> | A list of options for input values |
| <keygen> | Generate keys to authenticate users |
| <output> | For different types of output, such as output written by a script |
New Input Type Attribute Values
Also, the input element's type attribute has many new values, for better input control before sending it to the server:
| Type | Description |
|---|---|
| tel | The input value is of type telephone number |
| search | The input field is a search field |
| url | The input value is a URL |
| The input value is one or more email addresses | |
| datetime | The input value is a date and/or time |
| date | The input value is a date |
| month | The input value is a month |
| week | The input value is a week |
| time | The input value is of type time |
| datetime-local | The input value is a local date/time |
| number | The input value is a number |
| range | The input value is a number in a given range |
| color | The input value is a hexadecimal color, like #FF8800 |
| placeholder | Specifies a short hint that describes the expected value of an input field |
