HTML5 Introduction – Features and Resources for HTML5

HTML5 Introduction – Features and
Resources for HTML5
What is HTML5?
HTML5 is the fifth revision and newest version of the HTML standard. It offers new
features that provide not only rich media support, but also enhance support for creating
web applications that can interact with the user, his/her local data, and servers, more
easily 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, and
by extension, Firefox, has very good initial support for HTML5, and work continues
toward supporting more of its features. Gecko began supporting some HTML5 features in
version 1.8.1. You can find a list of all of the HTML5 features that Gecko currently
supports on the main HTML5 page.
HTML5 is the successor of HTML 4.01, released for the first time in 1999. The internet
has changed significantly since 1999 and it seemed like the creation of HTML5 was
necessary. 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 HTML
In addition to this official work on HTML, the browsers have been making their own
additions to HTML. Some changes were eventually adopted into W3C HTML
Recommendations; others remain proprietary coding aspects that only the individual
browsers recognize. The browsers' versions of HTML changed, too, in a game of
marketing and programming one-upmanship, hoping to lock Web developers into using
one browser or the other exclusively.

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

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 today
The standards for HTML are currently being developed by a worldwide industry
consortium known as the W3C. This work was carried out previously by the IETF. The
W3C places several requirements on HTML:
"The document format should be, as far as practical, backwards compatible with
existing HTML documents. It should support both paged and scrolling layout models...A
simple, scaleable document format that can be used for information exchange on virtually
any 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 HTML
In hindsight, the following quote by Berners-Lee from the original CERN proposal shows
how far things have progressed in less than a decade:
"In 10 years, there may be many commercial solutions to the problems above, while
today 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 bit
later that many syntaxes are now deprecated and soon to be kicked out through the back
door. The unique and impressive features HTML5 comes with are in the multimedia
department. Many of the features it comes with have been created with the consideration
that users should be able to run heavy content on low-powered devices. The syntactic
features include the new <video>, <audio> and <canvas> elements, but also integration of
vector graphics content (what we knew before as being the <object> tags). This means
that multimedia and graphic content on the web will be handled and executed easier and
faster, without the need of plugins or APIs.
There are a bunchload of new syntaxes added, but below I will name and describe the
most 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 independent
item of content
<aside> – the aside tag marks content aside from the page content, which for example
could 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 sections
in 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 now
be easier to run by devices.
<embed> – this new tag defines a container for interactive content (plugin) or
external 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 ones

before. For example, the header and footer tags will not only mark the start and the end of
a page, but also the start and the end of each section you have. This means that these two
tags are likely to be used more than once in the whole page. In the illustration below can
you see what I mean.
The following tags from HTML 4.01 are now removed from HTML5, therefore browsers
do not offer support for them anymore. This means that it is a good idea to go back to
your HTML pages and check for them, as they might disrupt the design in the latest
browsers.
<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 using
HTML5 you do not need to forget everything about the previous version. You are not
learning a totally new language here. Keep your beloved syntaxes and keep the way you
used to format your code, only remember that now you need to build upon the coding
skills you already have.
In case you have absolutely no knowledge of HTML and you want to start now, I
advise 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 is
impossible as far as I know. HTML 4.01 still contains the basics of HTML5, therefore in
my opinion you should have strong knowledge of former HTML versions in order to be
able to master HTML5.
The upside of learning HTML5 now is that the new markup language works right
away. You can basically do whatever you want with it today – and it is supported in all
major browsers.


From video to geolocation, local storage and microdata annotations, HTML5 is something
we need to start using. If you are in the design business, sticking with HTML 4.01 is a
mistake, because everybody will move on while you will remain behind.
HTML5 is definitely here to stay. It is created to sustain today’s necessities and
especially because it is in continuous development, it will be able to sustain the changes
that will happen in the industry for quite some time. One of the reasons behind HTML5
taking so much time to develop is because the W3C had to analyze lots of factors and
think of the future. They took their time and finally delivered something that can easily
be labelled as a high-quality product.

Best and Trendy HTML5 Website in 2014


Heart of the Arctic

A 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.




Wanda Print

Nested 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 Roasting

Soyuz 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 Skybox
created via the re-invented...




Parrot - Flower Power

Discover Parrot Flower Power, the first intelligent wireless sensor fitted with
Bluetooth Smart Technology which, through a dedicated application, helps you look after
your plants.



STAINSBEAUPAYS

STAINSBEAUPAYS™ is an infinite interactive movie made by 15 year old teenagers
from Paris suburb. Jump on the wheel and enjoy the trip !




Melanie F

Melanie.F is a French brand that manufactures slippers for children. She introduces
you her new collection 2013/2014.



Suffolk's bold new tourism site

The 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 a
break in this...




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

 Merry Christmallax
Christmas greeting one pager that takes you from wire-framing stage to polish as you
scroll down the page.




Alee Foroughi - Portfolio

My name is Alee Foroughi. I'm CEO & Designer at Swan Design Studio. I love design
and it shows in my works.



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


10 Top HTML5 Resources
Want to learn HTML? Or hone your skills in the computer language? Then check
out these top resources.
The web is a wonderful thing, brimming with resources and tutorials for people
wanting to learn HTML5. But, sometimes, too much choice can be confusing, so we've
picked 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 to
use today, including information on specific features and when to use them in your apps.


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


03. HTML5 Cheat Sheet
The guys over at Smashing Magazine released this handy, printable HTML5 cheat
sheet, which lists all currently supported tags, their descriptions, attributes and their
support in HTML 4.


04. 55 amazing examples of HTML5
We couldn't make a list of awesome HTML5 resources without including this
compliation we put together. If you want to see exactly what this programming language
is capable of, look no further.


05. Introduction to HTML5 from Mozilla
The Mozilla Developer Network is a fantastic resource for web developers. Organized
by topics, it provides documentation about extensions, themes, applications, frameworks
and technologies - including an excellent in-depth section on HTML5. Not only does it
discuss the fundamentals of HTML5, there's also a section which points you in the
direction of other online resources on the subject.


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


07. HTML5 for Web Designers
Web developer Jeremy Keith has taken the 900-page, hard-to-read HTML5 spec and
created 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-focused
standards-based web designers and front-end developers need to know clearly and with
easy to understand, practical examples. You have to pay for it, but the e-version is a steal
at just $9.


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


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


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


HTML5 Introduction – Features and Resources for HTML5

Recommended

More Related Content

What's hot (11)

Viewers also liked (7)

Similar to HTML5 Introduction – Features and Resources for HTML5 (20)

More from Team Mango Media Private Limited (20)

Recently uploaded (20)

HTML5 Introduction – Features and Resources for HTML5