Dear reader, as you all must be aware that ADMEC Multimedia Institute team has written some of the best articles on graphic designing, web designing, and multimedia. So, we are contributing a bit more by posting one more article on today’s burning topic i.e. HTML5.
HTML5Â introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics to give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications.
HTML5, which was commenced in 2004, is currently being carried out in a joint effort between the W3C HTML WG and the WHATWG. The specification is still in progress and quite a long way from completion.
So, it is might possible that any feature discussed in this article may change in the future. This article is intended to provide a brief introduction to some of the major features as they are in the current draft.
Introduction of HTML
HTML has been in continuous evolvement since it was introduced in the early 1990s. Some features were introduced in specifications; others were introduced in software releases.
HTML4 was recommended by W3C in 1997. While it continues to serve as a rough guide to many of the core features of HTML, it does not provide enough information to build implementations that interoperate with each other and, more importantly, with a critical mass of redistribute content.
The same goes for XHTML1, which defines an XML serialization for HTML4, and DOM Level 2 HTML, which defines JavaScript APIs for both HTML and XHTML.
What is HTML5
This is the next advancement of HTML, or Hyper Text Markup Language, which forms the backbone of almost every site on the Internet. HTML4, the last major iteration of the language, debuted in 1997 and has been subsequently poked and prodded so that it can handle the demands of the modern Web.
There are some points to be noticed:
- HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.
- The previous version of HTML came in 1999. The web has changed a lot since then.
- HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.
New Features in HTML5
Some of the most interesting new features in HTML5 are below:
- The canvas element for drawing
- The video and audio elements for media playback
- Better support for local offline storage
- New content specific elements, like article, footer, header, navigator, section, aside and figure
- New form controls, like calendar, date, time, email, url, search
Here is the w3c Link for new tags in HTML5 –
https://www.w3.org/TR/2012/WD-html-markup-20121025/elements.html
Canvas Element
One of new features is the canvas element. HTML5 canvas gives you an easy and powerful way to draw graphics using JavaScript. For each canvas element you can use a “context”, into which you can issue JavaScript commands to draw anything you want. Browsers can implement multiple canvas contexts and the different APIs provide the drawing functionality.
Most of the major browsers include the 2D canvas context capabilities – Opera, Firefox, Konqueror and Safari. Opera the browser is quite advanced in what it can do with the element, even allowing users to save canvas demos as Opera widgets.
Create a Canvas Element
Constructing a canvas context on your page is as simple as adding the <convas> element to your HTML document like so:
<canvas id="myCanvas" width="300" height="150"></canvas>
Draw with JavaScript
The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript:
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.fillRect(0,0,150,75);
</script>
The markup for new added tags could look like the following:
<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>
The header element
It represents the header of a section. Headers may contain more than just the section’s heading—for example it would be reasonable for the header to include sub headings, version history information or bylines.
<header>
<h1>a preview of html5<h1/>
<p class="byline">By Lachlan Hunt</p>
</header>
The footer element
The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
<footer>© 2007 Example Inc.</footer>
© 2007 Example Inc.
The nav element
The nav element represents a section of navigation links. It is suitable for either site navigation or a table of contents.
<nav>
<ul>
<li><a href-"/">home</a></li>
<li><a href-"/">home</a></li>
<li><a href-"/">product</a></li>
<li><a href-"/"services</a></li>
</ul>
</nav>
The aside element
The aside element is for content that is tangentially related to the content around it, and is typically useful for marking up sidebars.
<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</aside >
The section element
The section element represents a generic section of a document or application, such as a chapter, for example.
<section>
<h1>Chapter 1: The ADMEC Multimedia Institute</h1>
<p>This institute is the one of the pioneer institutes in Delhi, India. It has highly professional training staff for various courses Including digital media and programming courses. Apart from these qualities institute provides flexible timings for early to bird to late owls.</p>
</section>
Special Audio-Video features of HTML5
In recent years, video and audio on the web has become more and more viable and sites like YouTube, Viddler, Revver, MySpace, and dozens of others are making it easy for anyone to publish video and audio. The latest version of Opera supports the HTML5 video and audio elements. But how do you use them? How do we get a video to play in HTML?
First you need an actual video in the right format. Opera currently supports Ogg/WebM, which is also supported by Firefox and Chrome. If you have a video that you want to play but it’s not in Ogg/WebM, you need to convert it. You can use Miro or another program of choice to do this. So now you have a video lying around on your server (or your local disk), and you want to play it in HTML. Use the following markup:
<video src="video.ogv" controls>
video not supported
</video>
The controls attribute instructs the browser to provide its own controls. If you want to write your own controls with JavaScript, you just leave out the controls attribute. The text “video not supported” will be shown if the browser doesn’t support the video element; you could replace this with a link to the video file itself.
Depending on how your server is configured, the video might or might not actually play. Current Opera requires that your video file is served as video/ogg (or audio/ogg, or application/ogg, or audio/wav…) for it to play. So if it doesn’t play, your server might not know about the ogv file extension and serve the video as text/plain, which Opera refuses to play.
Here’s how to fix this for Apache servers; add the following lines to your .htaccess file: AddType video/ogg .ogv AddType audio/ogg .oga The audio element works much the same as the video element, except it doesn’t show any video, and some features that only makes sense for videos are missing.
<audio src="audio.oga" controls>
audio not supported
</audio>
You can also create video and audio elements with script. For a video to render anything, you also need to insert it in the document. An audio element doesn’t need to be in the document to play sound, but it does if you want to show the browser’s controls.
Advantages of HTML5
There are number of advantages HTML5 Has which the previous version didn’t have, they are
Audio and Video Playback without any Plug-in
With HTML5 you can stream audio and video without no need of third party plug-in such as flash. You can construct player controls that are fully programmable with JavaScript.
Code Maintenance
In HTML5 we have new structural elements instead of traditional div tags to create page template, the final result will be a cleaner and more organized code.
Local Data Storage
HTML5 allows storing data locally from client side. The data can be accessed to support the web application and it can even be accessed when the client is disconnected for a short period of time. There are methodologies for storing data: session storage, local storage and database storage.
Reduces Development Costs
HTML5 introduces new elements and features that allow developers to improve interoperability, handling elements in a precise way saving time and costs.
Great for Mobile Devices
HTML5 could be the solution to faster applications that will be accessible universally across all mobile phones.
New Forms
New form types and elements will help you a lot certify that the information entered online is completely accurate. There won’t be any need to run additional scripts for checking validation. This speed up the loading time and the user experience will be enhanced.
HTML5 doctype is much simpler: New Way
<!doctype html> Old ways: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Meta charset tag is much simpler
New Way:
<meta charset="UTF-8" /> Old way:
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
Differences between HTML5 and HTML 4.01
HTML5 has several goals which differentiate it from HTML4.01. Some of the differences, so far, are to be expected.
Structuring elements
HTML5 includes several new structural elements that help describe parts of the document, Some of the main structural elements that are being used in HTML 5 are:
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <footer>
Although it seems like “positions” in a document, and very frequently will be used in that way, but they really are about grouping and not positioning. You might have 3 in a page, with each having its own and for instance. (Note that these elements – like classes – can be used more than once on a page).
But to keep it easy, here’s a simple way to code a very basic document that contains a top header, a menu for navigation, a content section that contains a couple of articles, a sidebar, and a footer in HTML5.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Admec Multimedia Institute</title>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style>
header,
footer,
section,
aside,
nav,
article {
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<header>
<h1><a href="#">Multimedia Institute</a></h1>
<h2>A tag line might go here</h2>
</header>
<section>
<article>
<h3><a href="#">First Article Title</a></h3>
<img src="images/flower.jpg" alt="flower">
<p>We have successfully running center in Delhi which is located in North Delhi at Rohini. We provide experienced faculty, high-tech labs, latest computer applications, and a training ground for our students to practice their skills and creativity in the areas of Design and Media. The Institute is established by the Professionals and for the Professionals.</p>
</article>
<article>
<h3><a href="#">Second Article Title</a></h3>
<img src="images/tree.jpg" alt="tree">
<p>Students not only get speculative curriculum but they also get thorough practical training.</p>
</article>
</section>
<aside>
<h4>Connect With Us</h4>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</aside>
<footer>
<p>All rights reserved.</p>
</footer>
</body>
</html>
- Article – The article includes an independent element section, which is, however, in the context of the ancestor elements. This applies to, for example, news articles, blogs or forum entries.
- Aside – This element identifies content that fits the theme surrounding the content but is not directly entailed by it. A policy might contain a message body aside element that cross-references to similar messages.
- Dialog – An element is specially imported for dialogue.
- Figure – The figure element allows a particular medium (e.g., images, videos, etc.) to bear a caption.
- Footer – The footer element defines a footer for the current section (for example, in an article-element) there is, for example, information about the author or the creation time of the text.
- Header – The header element defines the header for the current section (for example) in a section element. In addition to a headline, it can have further necessary information, such as version information.
- Nav – This element encloses a navigation area. This not only links to other pages with a web presence here, but, for example, allows the references to sections within a document to show (as in Wikipedia).
- Section – A section element groups thematically related content, and usually has a header and footer. Based on a typical Web page, examples of a section- element would, as one might imagine, a message and a contact area.
Elements for data representation
- Audio, video – Audio and video files are to be included in the future with these elements. HTML5 provides some interfaces to these elements, such as being able to control playback.
- Embed – With the embed element, applications and interactive content can be added. The element is the standardization of a previously proprietary element.
- Mark – The mark element is highlighted text. This is not to be confused with underlined text. Instead, it visibly marks the text that was found by a search engine, enabling users to quickly find their presentation programs.
- Meter – The meter element represents a share compared to its maximum. Using this item one can view, for example, how good the result is compared to the search term, i.e., how well a product compares to the highest rating, cuts, etc.
- Source – This item allows for a media element in a variety of given sources, from which the display program selects the appropriate one.
- Time – The time element is used to indicate dates and times. It is equipped with metadata so that a browser can generate, for example, an interactive calendar.
Application elements
- Canvas – The canvas element to create a drawing surface that can be drawn with the help of DOM methods. The specification provides only a two-dimensional drawing surface, but it is expected that three-dimensional contexts could be introduced in the future.
- Progress – The progress element reflects the progress of a particular task. The element is also controlled with the DOM. An example is the progress of a multi-page survey.
- Forms – Also, some new forms have been defined. Originally they were developed in a separate specification called Web Forms 2.0. Since its inclusion in the separate development of HTML5, Web Forms 2.0 has been discontinued. This specification is already very mature and brings new features such as these:
- New input types, such as e-mail addresses, Internet addresses, dates, etc., so that the browser can check them for syntactic correctness.
- Input fields can be defined as a mandatory field.
- Input templates can be created and can be added dynamically (for example, to an order form) to expand the possible entries.
- Data lists, for example, to generate an adjustable control object, such as the volume of an audio or video element.
- Clarify how CSS properties affect the form elements.
- Mapped elements
Some elements have been redefined
- IÂ – Previously, this element produced italic text. Now it identifies text that are usually written in italics, such as text in a different voice or mood, thoughts, etc.
- BÂ – Previously, the b element formatted text in bold. Now the text that should be identified is text that should be emphasized, although only stylistically, as it has no more important significance than the rest of the text, e.g., keywords, product names, etc.
- Em – This item still distinguishes text that should be emphasized. The emphasis is now enhanced, however, if this element is nested.
- Hr – This was the first generation of a dividing line. Now, this dividing line symbolizes a thematic break between paragraphs.
- Small – In the past, this formatted text smaller than normal. Now, fine print is to reserved, for example, for genuine author references, disadvantages by asterisk correlation, and legal restrictions.
- Strong – Earlier this award meant a strong emphasis. This is now being taken by em-nested elements. The strong element now distinguishes great importance.
- The attribute start of the ol once enabled elements
- Element and the value attribute of the li element is once again part of the core language.
- New DOM methods
- Additional methods were added for controlling audio and video elements, as was a method called getElementsByClassName. This method puts together all the elements of a particular class within a document (for more class information at the same time is possible). JavaScript has now implemented this functionality, but a version implemented in the browser would handle the task quickly and efficiently.
- Distant elements and attributes
The following elements have been removed
- Acronym – Instead, only the abbr element for abbreviations should be used because it is more general, and the acronym element alone may also reflect the versatile little acronyms.
- Big & tt are also elements that have been removed.
- Also, some attributes have been removed. Stark was criticized in this regard; however the absence of the attributes of the summary header element and axis should make the tables more accessible. Since the specification is still a draft, it is unclear whether these attributes will or will not be added. In XHTML5 (MIME type application / xhtml + xml), the noscript element is no longer allowed because the element model is compatible with the XML processing rules. Text in HTML5 (Mime-Type text / html) is allowed to continue noscript.
Document Representation
Unlike previous versions of HTML and XHTML, which are defined in terms of their syntax, HTML5 is being defined in terms of the Document Object Model (DOM)—the tree representation used internally by browsers to represent the document. The DOM tree could look something like this:
The advantage of defining HTML5 in terms of the DOM is that the language itself can be defined independently of the syntax. There are primarily two syntaxes that can be used to represent HTML documents: the HTML serialization (known as HTML5) and the XML serialization (known as XHTML5).
Browser Support
HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.
Contribution of HTML 5
Work on HTML 5 is rapidly progressing, yet it is still expected to continue for several years. Due to the requirement to produce test cases and achieve interoperable implementations, current estimates have work finishing in around ten to fifteen years. During this process, feedback from a wide range of people including, among others, web designers and developers, CMS and authoring tool vendors and browser vendors is vital to ensure its success. Everyone is not only welcome, but actively encouraged to contribute feedback on HTML5.
Summary
This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to define clear conformance criteria for user agents in an effort to improve interoperability.
In adding together to this HTML5, the APIs (Application Programming Interfaces) require to the outlined as they have also been outlined by HTML5.
It include some notable features like browser history management, canvas element for immediate mode 2D drawing, drag and drop, MIME type and protocol handler registration, timed media playback, Micro data, offline storage database, document editing, cross-document messaging and moreover.
- API for playing of video and audio which can be used with the new video and audio elements.
- An API that enables offline Web applications.
- An API that allows a Web application to register itself for certain protocols or media types.
- Editing API in combination with a new global content editable attribute.
- Drag & drop API in combination with a draggable attribute.
- API that exposes the history and allows pages to add to it to prevent breaking the back button.
- Cross-document messaging.
The principle purpose of these APIs is to make easy web application creation. Notice the third API enables offline web apps. This is excellent news for users and programmers alike because it enables the use of rich, internet-driven applications in an offline environment.
Interested in making your career in web designing? If yes then ADMEC Multimedia a professional HTML5 training institute in Delhi is an ideal place to go for.
