HTML5 Introduction – Features and Resources for HTML5

Copyright © 2014 Team Mango Media Private Limited. All rights reserved.

HTML5 Introduction – Features andResources for HTML5

What is HTML5?HTML5 is the fifth revision and newest version of the HTML standard. It offers newfeatures that provide not only rich media support, but also enhance support for creatingweb applications that can interact with the user, his/her local data, and servers, moreeasily and effectively than was possible previously.

Because HTML5 is still being developed, changes to the specifications are inevitable.Therefore, not all of its features are supported by all browsers yet. However, Gecko, andby extension, Firefox, has very good initial support for HTML5, and work continuestoward supporting more of its features. Gecko began supporting some HTML5 features inversion 1.8.1. You can find a list of all of the HTML5 features that Gecko currentlysupports on the main HTML5 page.

HTML5 is the successor of HTML 4.01, released for the first time in 1999. The internethas changed significantly since 1999 and it seemed like the creation of HTML5 wasnecessary. The new markup language was developed based on pre-set standards:

New features should be based on HTML, CSS, DOM, and JavaScript. The need for external plugins (like Flash) needs to be reduced. Error handling should be easier than in previous versions. Scripting has to be replaced by more markup. HTML5 should be device-independent. The development process should be visible to the public.

A Brief History of HTMLIn addition to this official work on HTML, the browsers have been making their ownadditions to HTML. Some changes were eventually adopted into W3C HTMLRecommendations; others remain proprietary coding aspects that only the individualbrowsers recognize. The browsers' versions of HTML changed, too, in a game ofmarketing and programming one-upmanship, hoping to lock Web developers into usingone browser or the other exclusively.

http://www.themangomedia.com/webapplication-development.php

http://www.themangomedia.com/digital-marketing.php

http://www.themangomedia.com/web-development.php


Timelines: Creation of language in conjunction with Berners-Lee's WWW program - Oct.->Dec.

1990 Specification for HTML released on the Internet - Summer, 1991 Draft defining HTML released (Internet draft later expired) - June, 1993 Initial document for 'HTML 2.0' released - April, 1994 Draft for HTML 2.0 cleaned up and released - July, 1994 HTML 2.0 draft further refined with plans to release as an RFC - February, 1995 HTML 2.0 (RFC 1866) approved as a proposed standard - September, 1995 HTML 3.0 draft released (later expired) - March, 1995 HTML 3.2 draft released - May, 1996 HTML experimental DTD 'Cougar' released - July, 1996 W3C recommendation for HTML 3.2 (Wilbur) - January, 1997 HTML 4.0 draft (evolved from Cougar) released - July, 1997 HTML 4.0 becomes W3C proposed recommendation - November, 1997 HTML 4.0 becomes W3C recommendation - December, 1997 HTML 4.0 revised and certified W3C recommendation - April, 1998 Draft released for 'Reformulating HTML in XML' (codename Voyager) - December,

1998 XHTML 1.0 first working draft released - January, 1999 XHTML 1.0 becomes W3C Proposed Recommendation - August, December 1999 XHTML 1.1 first working draft released - September, 1999 XHTML 1.0 becomes W3C Recommendation - January, 2000 XHTML 1.1 becomes W3C Proposed Recommendation - April, 2001 XHTML 1.1 becomes W3C Recommendation - May, 2001

What HTML is todayThe standards for HTML are currently being developed by a worldwide industryconsortium known as the W3C. This work was carried out previously by the IETF. TheW3C places several requirements on HTML:

"The document format should be, as far as practical, backwards compatible withexisting HTML documents. It should support both paged and scrolling layout models...Asimple, scaleable document format that can be used for information exchange on virtuallyany platform."

The W3C goes on to list the proposed range of these platforms, which include:

Graphical User Interfaces, such as Windows, Macs and X11/Unix Text only systems, such as VT-100 terminals Text to Speech devices Rendering to Braille


The Success of HTMLIn hindsight, the following quote by Berners-Lee from the original CERN proposal showshow far things have progressed in less than a decade:

"In 10 years, there may be many commercial solutions to the problems above, whiletoday we need something to allow us to continue."

The WWW and HTML solutions that Berners-Lee created have evolved into that solution.HTML is now becoming the primary document format of choice not only on the Web,but also elsewhere in both personal and commercial uses. Despite its current limitations,HTML has become the most popular and widely used rich text format ever.

What’s new?HTML5 was created to make the coding process easier and more logical. You will see a bitlater that many syntaxes are now deprecated and soon to be kicked out through the backdoor. The unique and impressive features HTML5 comes with are in the multimediadepartment. Many of the features it comes with have been created with the considerationthat users should be able to run heavy content on low-powered devices. The syntacticfeatures include the new <video>, <audio> and <canvas> elements, but also integration ofvector graphics content (what we knew before as being the <object> tags). This meansthat multimedia and graphic content on the web will be handled and executed easier andfaster, without the need of plugins or APIs.

There are a bunchload of new syntaxes added, but below I will name and describe themost important. The rest of them can always be found in W3C’s HTML5 section.

<article> – this tag defines an article, a user comment or a post, so an independentitem of content

<aside> – the aside tag marks content aside from the page content, which for examplecould be a lateral sidebar

<header>, <footer> – you won’t need to manually name IDs for headers and footers,as now you have a pre-defined tag for them

<nav> – the navigation can now be placed in the markup in between the nav tags,which will automatically make your lists act like navigation

<section> – this is another important new syntax, as it can define any kind of sectionsin your document. It works pretty much like a div which separates different sections.

<audio>, <video> – these two obviously mark sound or video content, which will nowbe easier to run by devices.

<embed> – this new tag defines a container for interactive content (plugin) orexternal application

<canvas> – the canvas tag is quite exciting, as it allows drawing graphics via scripting(mostly JavaScript, but some others can be employed as well)


What is important to remember is that the new HTML5 tags do not always work as the onesbefore. For example, the header and footer tags will not only mark the start and the end ofa page, but also the start and the end of each section you have. This means that these twotags are likely to be used more than once in the whole page. In the illustration below canyou see what I mean.

The following tags from HTML 4.01 are now removed from HTML5, therefore browsersdo not offer support for them anymore. This means that it is a good idea to go back toyour HTML pages and check for them, as they might disrupt the design in the latestbrowsers.

<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike><tt>

Things to know about HTML5

It is crucial to remember that HTML5 is built on the success of its previous version,HTML 4.01, which is undoubtedly the best version ever. In order to be better at usingHTML5 you do not need to forget everything about the previous version. You are notlearning a totally new language here. Keep your beloved syntaxes and keep the way youused to format your code, only remember that now you need to build upon the codingskills you already have.

In case you have absolutely no knowledge of HTML and you want to start now, Iadvise you to start with HTML 4.01 and only when you master it move onto HTML5.Starting with the latest version is like learning to run before learning to walk – which isimpossible as far as I know. HTML 4.01 still contains the basics of HTML5, therefore inmy opinion you should have strong knowledge of former HTML versions in order to beable to master HTML5.

The upside of learning HTML5 now is that the new markup language works rightaway. You can basically do whatever you want with it today – and it is supported in allmajor browsers.

http://www.themangomedia.com/web-design.php


From video to geolocation, local storage and microdata annotations, HTML5 is somethingwe need to start using. If you are in the design business, sticking with HTML 4.01 is amistake, because everybody will move on while you will remain behind.

HTML5 is definitely here to stay. It is created to sustain today’s necessities andespecially because it is in continuous development, it will be able to sustain the changesthat will happen in the industry for quite some time. One of the reasons behind HTML5taking so much time to develop is because the W3C had to analyze lots of factors andthink of the future. They took their time and finally delivered something that can easilybe labelled as a high-quality product.

Best and Trendy HTML5 Website in 2014

Heart of the ArcticA 72,000px wide site where users go on an expedition through 4 detailed

environments and gather 56 animated collectables to restore balance to Arctic life.

http://www.themangomedia.com/small-business-web-design.php


http://heartofthearctic.ca/


Wanda PrintNested in the art network of WANDA-PRODUCTIONS, Our talents are creatively

driven to perform fresh and striking digital images. We integrates art buying support,production coordination, casting, location scouting, booking, to post production delivery.

Soyuz Coffee RoastingSoyuz Coffee truly believes that coffee is much more than a brewed beverage as we

know it, it’s a way of living! And exactly this coffee experience is something Skyboxcreated via the re-invented...

http://www.wandaprint.com/

http://www.soyuzcoffee.com/


Parrot - Flower PowerDiscover Parrot Flower Power, the first intelligent wireless sensor fitted with

Bluetooth Smart Technology which, through a dedicated application, helps you look afteryour plants.

STAINSBEAUPAYSSTAINSBEAUPAYS™ is an infinite interactive movie made by 15 year old teenagers

from Paris suburb. Jump on the wheel and enjoy the trip !

http://www.parrot.com/flowerpower

http://stainsbeaupays.fr/


Melanie FMelanie.F is a French brand that manufactures slippers for children. She introduces

you her new collection 2013/2014.

Suffolk's bold new tourism siteThe website, and its Take me to Suffolk campaign and Facebook app, tear up the rule

book for British tourism websites. Site visitors explore, play and discover the joy of abreak in this...

http://melanie-f.com/

http://www.visitsuffolk.com/


Love Carmen RoseLove Carmen Rose is a photography studio in Fort Worth, Texas

Merry ChristmallaxChristmas greeting one pager that takes you from wire-framing stage to polish as you

scroll down the page.

http://lovecarmenrose.com/

http://ihatetomatoes.net/merry-christmallax/


Alee Foroughi - PortfolioMy name is Alee Foroughi. I'm CEO & Designer at Swan Design Studio. I love design

and it shows in my works.

Mehdi Benyounes, CEO RscollabSite official de Mehdi Benyounes : CEO Rscollab / Lead developer / Web designer

http://www.aleeforoughi.com/

http://www.mehdi-benyounes.com/


10 Top HTML5 Resources

Want to learn HTML? Or hone your skills in the computer language? Then checkout these top resources.

The web is a wonderful thing, brimming with resources and tutorials for peoplewanting to learn HTML5. But, sometimes, too much choice can be confusing, so we'vepicked 10 top resources that will really help you get to grips with it.

01. HTML5 Rocks

HTML5 Rocks is an awesome resource for for developers looking to put HTML5 touse today, including information on specific features and when to use them in your apps.

http://www.html5rocks.com/en/


02. HTML5 & Friends

HTML5 & Friends on the Mozilla Developer Network offers a great selection ofinformation, demonstrations, tools and resources on the programming language. The webpage is clean and extremely easy to navigate, using symbols, lists and a simple grid to leadto you the desired information.


03. HTML5 Cheat Sheet

The guys over at Smashing Magazine released this handy, printable HTML5 cheatsheet, which lists all currently supported tags, their descriptions, attributes and theirsupport in HTML 4.

http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/


04. 55 amazing examples of HTML5

We couldn't make a list of awesome HTML5 resources without including thiscompliation we put together. If you want to see exactly what this programming languageis capable of, look no further.

http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547


05. Introduction to HTML5 from Mozilla

The Mozilla Developer Network is a fantastic resource for web developers. Organizedby topics, it provides documentation about extensions, themes, applications, frameworksand technologies - including an excellent in-depth section on HTML5. Not only does itdiscuss the fundamentals of HTML5, there's also a section which points you in thedirection of other online resources on the subject.


06. HTML5 Doctor

For everything HTML, head over to HTML5 Doctor where you will find articles oneverything you might need as well as an awesome 'Ask the Doctor' Q&A section, inwhich top advocates of the technology, including Bruce Lawson, Remy Sharp, and RickClark, answer on a regular basis. A brilliant resource.

http://html5doctor.com/


07. HTML5 for Web Designers

Web developer Jeremy Keith has taken the 900-page, hard-to-read HTML5 spec andcreated a much more user-friendly 85-page version with HTML5 for Web Designers.Among the pages, Keith cuts to the chase, explaining what accessible, content-focusedstandards-based web designers and front-end developers need to know clearly and witheasy to understand, practical examples. You have to pay for it, but the e-version is a stealat just $9.

http://www.abookapart.com/products/html5-for-web-designers

http://www.themangomedia.com/web-development.php



08. Dive into HTML5

Dive into HTML5 by Mark Pilgrim is a fantastic resource to help you really get togrips with the basics of HTML5. In depth and detailed, this online book will help you getto grips with the semantics of new elements, playing video without Flash, local storage,offline apps, manipulating browser history and much more.

http://diveintohtml5.info/


09. HTML5 Please

HTML5 Please is an awesome HTML5 tool, giving users the power to "use the new andshiny responsibly". This great resource helps you choose and look up features of HTML5 you canuse and provides advice in making decisions about how to implement the computer language intoyour projects.

http://html5please.com/


10. net

If you're looking for HTML5 news, advice and tips, our print and tablet publicationnet magazine is a fantastic place to start. Here you'll find articles written by experts in thefield as well as lots of awesome examples of HTML5 in action.

http://www.creativebloq.com/net-magazine