Thursday, February 7, 2013

Our Future Is Open Source - Everything Free For Everyone - The Demise Of Adobe Flash Player Corporate Monopoly. HTML6: The Specifications That Brings Us Freedom :D Bonus: How To Make An HTML5 Video Player In Under 5 Minutes

html, html2, html3,2, html4, html5, html6

 Source: http://html6spec.com/

Section 1 - Introduction

HTML5 was a great leap forward for web developers. It gave us all kinds of hip new tags like <header>, <nav> and <footer>. It also gave us slick new JavaScript APIs like drag and drop, localStorage, and geolocation. Still, however, there is a void that HTML5 has yet to fill and that void is truly semantic markup.
Imagine being able to mark something up the way you want to mark it up. Imagine changing <div id="wrapper"> to <wrapper> or a better example, making a calendar like:
<calendar>
  <month name="January">
    <day>1</day>
    <day>2</day>
    <day>3</day>
    <!-- ...and so on -->
  </month>
</calendar>
Even better yet, how about finally adding support for new types of media by simply changing the media type rather than having to come up with whole new tags for it like <img>, <embed>, <video>, <audio>, and so on? For example, wouldn't it be nice to just simply do: <html:media src="my-audio-file.aac" type="aac"> and let the browser deal with how to render it?
The web is moving towards a giant app store and we need to embrace it. The markup we use shouldn't work against us, it should work for us. This spec is to do just that. To finally break free of fatuous rules and standards and to give us, developers, total freedom to code as we please bringing the web a more semantic, clean, and human readable markup.
Now, without further adieu, let me introduce you to HTML6.

Section 2 - The Concept

HTML6 is conceptually HTML with XML like namespaces. If you don't know XML, or don't know what XML namespaces are they're basically a way to allow you to use the same tag without it conflicting with a different tag. You've probably actually seen one before in the XHTML DOCTYPE: xmlns:xhtml="http://www.w3.org/1999/xhtml"
In HTML6 we take advantage of this ingenious concept by giving us freedom to use whatever tag we want by the W3C reserving namespaces and not tags. The W3C would basically reserve the right to all namespaces, and each namespace they reserve will trigger a different HTML API.
So, what does this look like? Below is an example of a full HTML6 document. We'll go over each tag and attributes in the API section.
<!DOCTYPE html>
<html:html>
    <html:head>
        <html:title>HTML6 Sample</html:title>
        <html:meta type="title" value="Page Title">
        <html:meta type="description" value="This is an example of HTML with namespaces">
        <html:link src="css/main.css" title="Main Styles" type="text/css">
        <html:link src="js/main.js" title="Main Script" type="text/javascript">
    </html:head>
    <html:body>
        <header>
            <logo>
                <html:media type="image" src="images/logo.png">
            </logo>
            <nav>
               <html:a href="/cats">Cats</a>
               <html:a href="/dogs">Dogs</a>
               <html:a href="/rain">Rain</a>
            </nav>
        </header>
        <content>
            <article>
                <h1>This is my main article head</h1>
                <h2>This is my sub head</h2>
                <p>[...]</p>
                <p>[...]</p>
            </article>
            <article>
                <h1>A cool video!</h1>
                <h2>Pay attetion to the media elements</h2>
                <p>[...]</p>
                <html:media type="video" src="vids/funny-cat.mp4" autostart controls>
                <p>Man, that was a stupid cat.</p>
            </article>
        </content>
        <footer>
            <copyright>This site is &copy; to Oscar Godson 2009</copyright>
        </footer>
    </html:body>
</html:html>
As you'll see, there are some weird <html:x> tags throughout this sample. Those are the namespaced elements that belong to the W3C and HTML6 spec. These elements trigger browser events. For example, the <html:media type="image"> element will make an image appear or, the <html:title> element makes the title bar of the browser change and so on.
All those other elements are just for you. None of those elements mean anything to the browser. They're simply hooks for CSS and JS and to make your code more semantic. The HTML elements you see in there like <p> or the <h1> tags are just because I like using those as ways to markup paragraphs or the most important header, but I could have used <paragraph>, <text>, or <helloworldanythingiwant>.
It's whatever makes sense to you and your application.

Section 3 - The APIs

Section 3A - HTML API

All of the following tags in this API have the namespace html like: <html:title>
<html:html>
This begins a HTML document. Equivelent to the current <html> tag.
Example:
<!DOCTYPE html>
<html:html>
  <!-- rest of HTML would go here -->
</html:html>
<html:head>
This begins an HTML's head. Equivelent to the current <html> tag. The tag contains data that isn't actually displayed (aside from the <html:title> which is displayed in the browser's windows). Rather, it's purpose is to get data and scripts that affect the display of the content in the <html:body>. These scripts and other sources include things like JavaScript, CSS, RSS feeds, etc.
Example:
<!DOCTYPE html>
<html:html>
  <html:head>
    <!-- Head content here, like the <html:title> tag -->
  </html:head>
</html:html>
<html:title>
This is the title of the HTML document. Equivalent to the current <title> tag. Browsers will use this for the tab bar, favorites, etc. and search engines will use this as the title of their links
Example:
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
</html:html>
<html:meta>
This is a bit different then the current HTML version. Meta data in HTML6 can be anything. Unlike HTML now, there are no required or non-standard meta types. It's used to store content for you as a developer, or for other sites as a way to grab information such as a page description.
Example:
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
    <html:meta type="description" value="This is an example of HTML with namespaces">
  </html:head>
</html:html>
<html:link>
This links external documents and scripts such as CSS, JavaScript, RSS, favicons, etc. to the current document. Equivalent to the current <link> tag. This tag takes the following attributes:
  • charset: The character encoding such as "UTF-8".
  • href: The link to the source file.
  • media: The type of device the item should run on, for example, "mobile" or "tablet".
  • type: The MIME type of the document, for example, text/javascript.
Example:
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
    <html:link src="js/main.js" title="Main Script" type="text/javascript">
  </html:head>
</html:html>
<html:body>
This is the body of the HTML document. Equivalent to the current <body> tag. This is where you'd place most of the stuff that would be visible to the users like text, media, and so on.
Example:
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <!-- Your web page's content would go here -->
  </html:body>
</html:html>
<html:a>
This tag represents either an anchor on the page, or a link to another web page. Equivalent to the current <a> tag. The <html:a> tag takes one required attribute which is the href which directs the anchor or link where to go. For an anchor you'd use the syntax #id-of-element-to-link-to and for a link to another web page you'd simply insert the link like http://google.com.
Attributes available to the <a> tag are:
  • href
  • name
  • target (can be blank, parent, top or self)
Example:
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <html:a href="http://google.com">Go to google.com!</html:a>
  </html:body>
</html:html>
<html:button>
Similar to <button> or <input type="button"> in HTML<=5, the <html:button> tag allows you to create a button for user interaction on a page.
Attributes available to the <html:button> tag are:
  • disabled
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <html:button>Push me!</html:button>
  </html:body>
</html:html>
<html:media>
This tag encapsulates what we now have for media which are tags like <img>, <video>, <audio>, <embed>, and so on. Instead of a tag for each file type, the browser will just know how to run it by the type attribute, or will make a guess based on the file extension, or lastly, by the MIME type.
Example:
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <!-- Image -->
    <html:media src="images/logo.jpg" type="image">
    <!-- Video, shows you don't "need" a type -->
    <html:media src="videos/cute-cat.mov">
    <!-- Some made up format, browser will ignore if it doesn't know it -->
    <html:media src="misc/example.abc" type="abc">
  </html:body>
</html:html>

Section 3B - HTML Forms API

HTML Forms are separate from the HTML API to allow development on forms to not have to slow down for the entire HTML spec. Forms are constantly evolving with Sliders, color pickers, date and time pickers, progress bars and more. Forms really are sort of their own "thing" in HTML, so in HTML6 we've broken them into their own API.
<form:form>
This tag creates a new form. Has two attributes, method and action. As with current HTML forms, method can be POST or GET (they can be lowercase too) and will send the form with that as the HTTP header. More details on GET and POST can be found at W3.org. The action attribute tells the form where to send the data. By default the "method" is set to GET and the "action" is the current page.
Example:
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <form:form method="post" action="/sendmail">
      <!-- Form inputs and stuff go here -->
    </form:form>    
  </html:body>
</html:html>
<form:input>
This tag creates a new form input. Any type of form input that you can enter text into would be an input. In HTML currently this includes everything from a plain old text input to a <textarea> and would also include HTML5 style for inputs like email and url. The full list of possible input types are:
  • text
  • email
  • url
  • tel
  • search
  • number
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • textarea
  • password
  • file - (multiple)
The possible attributes on an input are:
  • name
  • disabled
  • readonly
  • placeholder
  • autofocus
  • required
  • novalidate
The following are attributes that will work on any input except file inputs:
  • maxlength
  • autocomplete
  • pattern
  • spellcheck
  • match - This is new to HTML6, give it a name of a field you want it to require a match on.
Example:
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <form:form method="post" action="/sendmail">
      <!-- Simple input (defaults to text) -->
      <form:input>
      <!--  A new HTML6 match example -->
      <form:input type="password" name="user_password">
      <form:input type="password" match="user_password">
      <!-- Advanced example -->
      <form:input type="email" placeholder="user@site.com" autofocus required>
    </form:form>    
  </html:body>
</html:html>
<form:select>
The <form:select> tag lets a user select from options rather than input anything. For example an HTML<=5 <select> would be close to the same. Some others would be a calendar, color picker, and range because these are predefined values in which you choose from.
The possible input types follow along with attributes that are specific to it:
  • select - (multiple)
  • color
  • calendar - (range)
  • meter - (range, step)
Attributes that work for all select types are:
  • name
  • readonly
  • disabled
  • required
  • autofocus
Example:
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <form:form method="post" action="/scheduler">
      <!-- Normal select -->
      <html:select type="select" name="favorite_color">
      <!-- Calendar example -->
      <html:select type="calendar" name="the_calendar" range="10/10/10-10/10/11">
    </form:form>    
  </html:body>
</html:html>
<form:status>
The <form:status> tag allows you to give feedback, or a "status" update to your users. Useful for an upload progress bar or steps in a multi-page form, for example. These are similar to the <progress> and <meter> elements in HTML5.
  • progress
  • meter
Attributes that work for all status types are:
  • min
  • max
  • value
Example:
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <form:form method="post" action="/upload">
      <!-- Example showing "steps" in a form -->
      <form:status type="meter" min="1" max="3" value="2">
      <message>You're currently on step 2 of 3</message>
      <!-- Example showing an upload progress bar -->
      <form:status type="progress" max="100" value="25">
    </form:form>    
  </html:body>
</html:html>
<form:label>
The <form:label> tag allows you to label inputs for the user. It links text to an input and when click will focus on the connected input. It matches the label's for attribute to the id of any form element.
Attributes that work for the <form:label> tag are:
  • for
Example:
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <form:form method="post" action="/login">
      <form:label for="username">Username</form:label>
      <form:input id="username" name="username">
      <form:label for="password">Password</form:label>
      <form:input id="password" name="password" type="password">
    </form:form>    
  </html:body>
</html:html>
<form:submit>
Just like <input type="submit"> in HTML<=5, <form:submit> will create a button which submits your form. If a submit button is present in a form, pressing enter while focused inside of a form will submit it.
Attributes that work for the <form:submit> tag are:
  • name
  • value
Example:
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <form:form method="post" action="/login">
      <form:label>Login</form:label>
      <form:input name="username">
      <form:input name="password" type="password">
      <form:submit name="submit" value="submit">
    </form:form>    
  </html:body>
</html:html>

Section 4 - Using HTML6 Now

Unfortunately you can't but I'm hard at work on a polyfill that will transform your HTML6 document into a normal HTML document with JS. There will be a front-end one (which I wouldn't use in production due to the processing time and because search engines won't understand what the document is) and a Node.js one which will transform it and give it to the browser as if it were HTML.
If you'd like it in another language submit it to the issue tracker or send a pull request.

Section 5 - Conclusion

This is simply an idea. It's an idea I've personally had for years, but it's in no way finished. There's still a lot missing and a lot I haven't yet thought about, but it's a start. I'd love to hear your thoughts in the issue tracker or better yet, send a pull request of what you think should be changed or added.

Copyright on all documents and code:

Copyright (c) 2012 Oscar Godson oscargodson@gmail.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

HTML5 is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997)[2] and, as of December 2012, is a W3C Candidate Recommendation.[3] Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML as well.[2]

Following its immediate predecessors HTML 4.01 and XHTML 1.1, HTML5 is a response to the observation that the HTML and XHTML in common use on the World Wide Web are a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice, and the many syntax errors in existing web documents.[4] It is also an attempt to define a single markup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications.[5] For the same reasons, HTML5 is also a potential candidate for cross-platform mobile applications. Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets. In December 2011, research firm Strategy Analytics forecast sales of HTML5 compatible phones will top 1 billion in 2013.[6]

In particular, HTML5 adds many new syntactic features. These include the new <video>, <audio> and <canvas> elements, as well as the integration of scalable vector graphics (SVG) content (that replaces the uses of generic <object> tags) and MathML for mathematical formulas. These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs. Other new elements, such as <section>, <article>, <header> and <nav>, are designed to enrich the semantic content of documents. New attributes have been introduced for the same purpose, while some elements and attributes have been removed. Some elements, such as <a>, <cite> and <menu> have been changed, redefined or standardized. The APIs and document object model (DOM) are no longer afterthoughts, but are fundamental parts of the HTML5 specification.[5] HTML5 also defines in some detail the required processing for invalid documents so that syntax errors will be treated uniformly by all conforming browsers and other user agents.[7]

w3c recommandations, proposed, candidate, canvas, webgl, file api, touch events

 Contents

History

The Web Hypertext Application Technology Working Group (WHATWG) began work on the new standard in 2004. At that time, HTML 4.01 had not been updated since 2000,[8] and the World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0. In 2009, the W3C allowed the XHTML 2.0 Working Group's charter to expire and decided not to renew it. W3C and WHATWG are currently working together on the development of HTML5.[9]

While HTML5 is often compared to Flash, the two technologies are very different. Both include features for playing audio and video within web pages, and for using Scalable Vector Graphics. HTML5 on its own cannot be used for animation and interactivity — it must be supplemented with CSS3 or Javascript. There are many Flash capabilities that have no direct counterpart in HTML5. See Comparison of HTML5 and Flash.

Although HTML5 has been well known among web developers for years, it became the topic of mainstream media around April 2010[10][11][12][13] after Apple Inc's then-CEO Steve Jobs issued a public letter titled "Thoughts on Flash" where he concludes that "[Adobe] Flash is no longer necessary to watch video or consume any kind of web content" and that "new open standards created in the mobile era, such as HTML5, will win".[14] This sparked a debate in web development circles where some suggested that while HTML5 provides enhanced functionality, developers must consider the varying browser support of the different parts of the standard as well as other functionality differences between HTML5 and Flash.[15] In early November 2011, Adobe announced that it will discontinue development of Flash for mobile devices and reorient its efforts in developing tools utilizing HTML 5.[16]

Standardization process

The Mozilla Foundation and Opera Software presented a position paper at a World Wide Web Consortium (W3C) workshop in June 2004,[17] focusing on developing technologies that are backwards compatible with existing browsers,[18] including an initial draft specification of Web Forms 2.0. The workshop concluded with a vote, 8 for, 14 against, for continuing work on HTML.[19] Later that month, work based upon that position paper moved to the newly formed Web Hypertext Application Technology Working Group (WHATWG), and a second draft, Web Applications 1.0, was also announced.[20] The two specifications were later merged to form HTML5.[21] The HTML5 specification was adopted as the starting point of the work of the new HTML working group of the W3C in 2007.
2008 – First Public Working Draft
WHATWG published the First Public Working Draft of the specification on 22 January 2008.[22] Parts of HTML5 have been implemented in browsers despite the whole specification not yet having reached final Recommendation status.
2011 – Last Call
On 14 February 2011, the W3C extended the charter of its HTML Working Group with clear milestones for HTML5. In May 2011, the working group advanced HTML5 to "Last Call", an invitation to communities inside and outside W3C to confirm the technical soundness of the specification. The W3C is developing a comprehensive test suite to achieve broad interoperability for the full specification by 2014, which is now the target date for Recommendation.[23] In January 2011, the WHATWG renamed its "HTML5" living standard to "HTML". The W3C nevertheless continues its project to release HTML5.[24]
2012 – Working Draft
As of May 2012, the specification is back to Working Draft state at the W3C. Ian Hickson of Google is the editor of HTML5. The criterion for the specification becoming a W3C Recommendation is "two 100% complete and fully interoperable implementations".[25] Many parts of the specification are stable and may be implemented in products.[26]
In July 2012, WHATWG and W3C have decided on a degree of separation. W3C will continue the HTML5 specification work, focusing on a single definitive standard, which is considered as a "snapshot" by WHATWG. The WHATWG organization will continue its work with HTML5 as a "Living Standard". The concept of a living standard is that it is never complete and is always being updated and improved.[27]

Plan 2014

In September 2012, the W3C proposed a plan[28] to release a stable HTML5 Recommendation by the end of 2014 and an HTML 5.1 specification Recommendation by the end of 2016.
Core HTML specification
The combined timelines for HTML 5.0, HTML 5.1 and HTML 5.2:

2012 2013 2014 2015 2016
HTML 5.0 Candidate Rec Call for Review Recommendation

HTML 5.1 1st Working Draft
Last Call Candidate Rec Recommendation
HTML 5.2[28]


1st Working Draft
Features and APIs
The W3C proposed a greater reliance on modularity as a key part of the plan to make faster progress, meaning identifying specific features, either proposed or already existing in the spec, and advancing them as separate specifications. Some technologies that were originally defined in HTML5 itself are now defined in separate specifications:
  • HTML Working Group – Microdata, HTML Canvas 2D Context
  • Web Apps WG – Web Messaging, Web Workers, Web Storage, WebSocket API, Server-Sent Events
  • IETF HyBi WG – WebSocket Protocol
  • WebRTC WG – WebRTC
  • W3C Web Media Text Tracks CG – WebVTT
Some specifications that were initially developed standalone have been adapted as HTML5 extensions or features by reference: SVG, MathML, WAI-ARIA.

Features

Markup

HTML5 introduces elements and attributes that reflect typical usage on modern websites. Some of them are semantic replacements for common uses of generic block (<div>) and inline (<span>) elements, for example <nav> (website navigation block), <footer> (usually referring to bottom of web page or to last lines of HTML code), or <audio> and <video> instead of <object>.[29][30][31] Some deprecated elements from HTML 4.01 have been dropped, including purely presentational elements such as <font> and <center>, whose effects have long been superseded by the much more powerful Cascading Style Sheets. There is also a renewed emphasis on the importance of DOM scripting (e.g., JavaScript) in Web behavior.
The HTML5 syntax is no longer based on SGML[32][33] despite the similarity of its markup. It has, however, been designed to be backward compatible with common parsing of older versions of HTML. It comes with a new introductory line that looks like an SGML document type declaration, <!DOCTYPE html>, which triggers the standards-compliant rendering mode.[34] As of 5 January 2009, HTML5 also includes Web Forms 2.0, a previously separate WHATWG specification.

New APIs

In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs) that can be used with JavaScript.[35] Existing document object model (DOM) interfaces are extended and de facto features documented. There are also new APIs, such as:
HTML5 related APIs.[36]
Not all of the above technologies are included in the W3C HTML5 specification, though they are in the WHATWG HTML specification.[41] Some related technologies, which are not part of either the W3C HTML5 or the WHATWG HTML specification, are as follows. The W3C publishes specifications for these separately:
HTML5 alone cannot provide animation within web pages. Either JavaScript or CSS3 is necessary for animating HTML elements. Animation is also possible using JavaScript and HTML 4[47][not in citation given], and within SVG elements through SMIL, although browser support of the latter remains uneven as of 2011.

XHTML5

XHTML5 is the XML serialization of HTML5. XML documents must be served with an XML Internet media type such as application/xhtml+xml or application/xml.[48] XHTML5 requires XML's strict, well-formed syntax. The choice between HTML5 and XHTML5 boils down to the choice of a MIME/content type: the media type one chooses determines what type of document should be used.[49] In XHTML5, the HTML5 doctype html is optional and may simply be omitted.[50] HTML that has been written to conform to both the HTML and XHTML specifications—and which will therefore produce the same DOM tree whether parsed as HTML or XML—is termed "polyglot markup".[51]

Error handling

An HTML5 (text/html) browser will be flexible in handling incorrect syntax. HTML5 is designed so that old browsers can safely ignore new HTML5 constructs.[citation needed] In contrast to HTML 4.01, the HTML5 specification gives detailed rules for lexing and parsing, with the intent that different compliant browsers will produce the same result in the case of incorrect syntax.[52] Although HTML5 now defines a consistent behavior for "tag soup" documents, those documents are not regarded as conforming to the HTML5 standard.[52]

Popularity

According to a report released on 30 September 2011, 34 of the world's top 100 Web sites were using HTML5 – the adoption led by search engines and social networks.[53]

Differences from HTML 4.01 and XHTML 1.x

The following is a cursory list of differences and some specific examples.
  • New parsing rules: oriented towards flexible parsing and compatibility; not based on SGML
  • Ability to use inline SVG and MathML in text/html
  • New elements: article, aside, audio, bdi, canvas, command, data, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, track, video, wbr
  • New types of form controls: dates and times, email, url, search, number, range, tel, color[54]
  • New attributes: charset (on meta), async (on script)
  • Global attributes (that can be applied for every element): id, tabindex, hidden, data-* (custom data attributes)
  • Deprecated elements will be dropped altogether: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt
dev.w3.org provides the latest Editors Draft of "HTML5 differences from HTML4",[55] which provides a complete outline of additions, removals and changes between HTML5 and HTML4.


The W3C HTML5 logo
On 18 January 2011, the W3C introduced a logo to represent the use of or interest in HTML5. Unlike other badges previously issued by the W3C, it does not imply validity or conformance to a certain standard. As of 1 April 2011, this logo is official.[56]

When initially presenting it to the public, the W3C announced the HTML5 logo as a "general-purpose visual identity for a broad set of open web technologies, including HTML5, CSS, SVG, WOFF, and others".[57] Some web standard advocates, including The Web Standards Project, criticised that definition of "HTML5" as an umbrella term, pointing out the blurring of terminology and the potential for miscommunication.[57] Three days later, the W3C responded to community feedback and changed the logo's definition, dropping the enumeration of related technologies.[58] The W3C then said the logo "represents HTML5, the cornerstone for modern Web applications".[56]

See also

References

  1. ^ "Mac Developer Library: System-Declared Uniform Type Identifiers". Apple. 2009-11-17.
  2. ^ a b "HTML5 Differences from HTML4". Working Draft. World Wide Web Consortium. 5 April 2011. Introduction. Retrieved 30 April 2011. "HTML 4 became a W3C Recommendation 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 deployed 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. HTML5 will replace these documents."
  3. ^ "HTML5 — Smile, it's a Snapshot!". W3C Blog. 2012-12-17. Retrieved 2013-01-14.
  4. ^ W3C Markup Validation Service, using this service anybody can check that almost all the web sites created by popular user friendly tools produce web pages not conforming to the W3C standards. The situation can perhaps become a bit better as time passes, but this was the situation between 1998 and 2012. This fact belongs to the folklore of the real experts, not the average experts floading the world of informatics.
  5. ^ a b "HTML5 Differences from HTML4". World Wide Web Consortium. 19 October 2010. Retrieved 4 December 2010.
  6. ^ HTML5-enabled phones to hit 1 billion in sales in 2013 | Internet & Media - CNET News
  7. ^ "1.9.2 Syntax Errors". HTML5. 16 November 2010. Retrieved 4 December 2010.
  8. ^ "HTML 4 Errata". World Wide Web Consortium. Retrieved 4 December 2010.
  9. ^ "Frequently Asked Questions (FAQ) About the Future of XHTML". World Wide Web Consortium. Retrieved 4 December 2010.
  10. ^ "FOX News: No Flash on the iPhone? Apple's Steve Jobs Finally Explains Why". Fox News. 29 April 2010.
  11. ^ "TIME: Steve Jobs: ‘Flash is No Longer Necessary’ and Other Musings". Time. 29 April 2010.
  12. ^ "Steve Jobs: Why Apple Banned Flash". CBS News.
  13. ^ "FastCompany: Steve Jobs: Adobe's Flash Is Old PC History, Open Web Is the Future".
  14. ^ 'Thoughts on Flash', by Steve Jobs, CEO of Apple, Inc.
  15. ^ Is HTML5 Replacing Flash?
  16. ^ "Flash to Focus on PC Browsing and Mobile Apps; Adobe to More Aggressively Contribute to HTML5". adobe.com. Retrieved 26 February 2012.
  17. ^ "Position Paper for the W3C Workshop on Web Applications and Compound Documents". World Wide Web Consortium. Retrieved 30 December 2011.
  18. ^ "W3C Workshop on Web Applications and Compound Documents (Day 1) Jun 1, 2004". World Wide Web Consortium. Retrieved 30 December 2011.
  19. ^ "W3C Workshop on Web Applications and Compound Documents (Day 2) Jun 2, 2004". World Wide Web Consortium. Retrieved 30 December 2011.
  20. ^ "[whatwg] WHAT open mailing list announcement". lists.whatwg.org Mailing Lists. Retrieved 4 March 2010.
  21. ^ "This Week in HTML 5 – Episode 5". WHATWG Blog. Retrieved 30 December 2011.
  22. ^ "HTML5: A vocabulary and associated APIs for HTML and XHTML.". World Wide Web Consortium. Retrieved 28 January 2009.
  23. ^ "W3C Confirms May 2011 for HTML5 Last Call, Targets 2014 for HTML5 Standard". World Wide Web Consortium. 14 February 2011. Retrieved 18 February 2011.
  24. ^ Hickson, Ian. "HTML Is the New HTML5". Retrieved 21 January 2011.
  25. ^ "When Will HTML5 Be Finished?". FAQ. WHAT Working Group. Retrieved 29 November 2009.
  26. ^ "HTML5: A vocabulary and associated APIs for HTML and XHTML (Editor's Draft).". World Wide Web Consortium. Retrieved 12 April 2010.
  27. ^ "HTML5 gets the splits.". netmagazine.com. Retrieved 23 July 2012.
  28. ^ a b "Plan 2014". World Wide Web Consortium. Retrieved 23 September 2012.
  29. ^ Introduction to HTML5 video
  30. ^ IBM Developer Works New elements in HTML5: Structure and semantics
  31. ^ ICAMD.org Finalcut Silverlight Films that Videographers share Quicktime in a Flash : Video on the Web using HTML5 and other Codecs
  32. ^ HTML5 DTD: "HTML5 is not SGML-based, and there will be no official DTD for it."
  33. ^ HTML 5 Reference: "Although it is inspired by its SGML origins, in practice, it really only shares minor syntactic similarities." "As HTML5 is no longer formally based upon SGML, the DOCTYPE no longer serves this purpose, and thus no longer needs to refer to a DTD."
  34. ^ Shannon Suetos (April 26, 2010). "HTML5: Worth the Hype?". instantshift.com. Retrieved October 21, 2012.
  35. ^ "HTML5 Differences from HTML4 – APIs". World Wide Web Consortium.
  36. ^ Sergey Mavrody "Sergey's HTML5 & CSS3 Quick Reference. 2nd Edition". Belisso Corp., 2012. ISBN 978-0-9833867-2-8
  37. ^ "HTML Canvas 2D Context". World Wide Web Consortium.
  38. ^ "Offline Web Applications". World Wide Web Consortium.
  39. ^ "HTML5 Web Messaging". World Wide Web Consortium.
  40. ^ "Web Storage Specification". World Wide Web Consortium.
  41. ^ 1 Introduction — HTML Standard
  42. ^ "Web SQL Database". World Wide Web Consortium.
  43. ^ "Indexed Database". World Wide Web Consortium.
  44. ^ "File API". World Wide Web Consortium.
  45. ^ "Filesystem API". World Wide Web Consortium.
  46. ^ "File API: Writer". World Wide Web Consortium.
  47. ^ "What HTML5 is (and what it isn't)", HTML5 First Look, (lynda.com, 2010), <http://www.lynda.com/home/DisplayCourse.aspx?lpk2=67161>
  48. ^ van Kesteren, Anne. "HTML5 differences from HTML4 – W3C Working Draft 19 October 2010". World Wide Web Consortium. Retrieved 2 November 2010.
  49. ^ Sergey Mavrody "Sergey's HTML5 & CSS3 Quick Reference". Belisso Corp., 2010. ISBN 978-0-615-43321-9
  50. ^ "The XHTML syntax ― HTML5". Web Hypertext Application Technology Working Group. Retrieved 1 September 2009.
  51. ^ Polyglot Markup: HTML-Compatible XHTML Documents, W3C Working Draft 5 April 2011
  52. ^ a b "FAQ – WHATWG Wiki". WHATWG. Retrieved 26 August 2011.
  53. ^ "Percentage of Web sites Using HTML5". binvisions. Retrieved 21 October 2011.
  54. ^ "HTML5: The Markup Language Reference: Input Control". World Wide Web Consortium. Retrieved 17 February 2011.
  55. ^ "HTML5 Differences from HTML4". FAQ. World Wide Web Consortium. 14 September 2012. Retrieved 29 September 2012.
  56. ^ a b "W3C HTML5 Logo FAQ". World Wide Web Consortium. Retrieved 21 January 2011. "Is this W3C's "official" logo for HTML5? Yes, as of 1 April 2011."
  57. ^ a b "HTML5 Logo: Be Proud, But Don't Muddy the Waters!". The Web Standards Project. Retrieved 22 January 2011.
  58. ^ "The HTML5 Logo Conversation". World Wide Web Consortium. Retrieved 21 January 2011.

External links

Source: https://en.wikipedia.org/wiki/HTML5

Learn how to code an HTML5 video player in under 5 minutes and make it so that it plays on any browser!

View the sample (You can attain the source code for this project by viewing the HTML source in the webpage listed below.):
http://www.tinkernut.com/demos/html5/...
 

5 comments:

  1. Are you trying to earn money from your websites or blogs with popup advertisments?
    If so, have you tried using Pop Ads?

    ReplyDelete
  2. Ashleys furniture
    Occasionally it may be a sensible idea to select reputable brands to design your house. You will radiate confidence with the environment you encounter.However, it is not just for this purpose that you really want the greatest brands to purchase. Each is distinctive and provides your house a different type of décor. The choices you choose rely on your own particular requirements and needs.

    ReplyDelete
  3. Always look forward for such nice post & finally I got you. Really very impressive post & glad to read this.
    Architects in Indore
    Civil Contractors in Indore

    ReplyDelete
  4. Best content & valuable as well. Thanks for sharing this content.
    Approved Auditor in DAFZA
    Approved Auditor in RAKEZ
    Approved Auditor in JAFZA
    i heard about this blog & get actually whatever i was finding. Nice post love to read this blog
    Approved Auditor in DMCC

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...