HTML5 is the newest hyper text markup language for
websites from the World Wide Web Consortium (W3C). The first draft
was made public in 2008, but not much happened until 2011. In 2011,
HTML5 was released and people started writing about it and using it,
but the support in different browsers was still poor. Today all major
browsers (Chrome, Safari, Firefox, Opera, IE) offer HTML5 support,
therefore the newest HTML technology can be used at its best today.
HTML5 works with CSS3 and is still in development.
W3C plans to release a stable version next year, but it still looks
like this is a long shot. Since its release, HTML5 has been in
continuous development, with the W3C adding more and more impressive
features, therefore it seems quite unlikely that HTML5′s
development will end soon, which is not necessarily a bad thing.
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.
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.
Oh yes, and the DOCTYPE declaration finally makes
some sense. Or, at least, this time it is much simpler than before
and it is very easy for us to remember and we won’t have to search
for it on the web or copy it from site to site. <!DOCTYPE
html> closed by </html> at the end of the page
is something we waited for for a long time to come and now it finally
is here.
Moreover, complex XHTML declarations many of us
used before can now be replaced with <html lang=”en”>
and long encoding declarations can simply be written in this
way: <meta charset=”utf-8″>. Can it
get simpler than that? It most definitely can’t.
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.
Why is it so good?
- HTML5 is an open standard. Everybody can build on it. No licenses.
- HTML5 is the key to build an stronger web, capable to serve complex web apps, games or awesome multimedia and interactive websites
- HTML5 (as in old HTML, CSS and JS) sites or apps source code is always available so the web is and enormous set of examples you can hack from.
- HTML5 allows our sites to be more open so they can be indexed better and can comunicate with other websites via APIs
Main changes of HTML5
Changes in the markupSemantic elements, Powerful forms
Changes in the style
New selectors, Rich fonts, columns, grid, lots of visual enhancements
Better media support
Audio and Video support, Canvas, webGL, SVG.
Interactivity
Geolocation API, Local storage, Websockets, SVG, Hardware access
