HTML5 Features and Resources

HTML5_Wallpaper_1680x1050

What Is HTML5?

  • HTML 5 is an updated version of HTML. It’s much similar to HTML. But difference is HTML 5 contains much better support for media such as, an audio and video tag.
  • HTML 5 is a a language for structuring and presenting content for the World Wide Web, a core technology of the Internet where as HTML is a simple markup language.
  • HTML5 is a cooperation between the W3C and the Web Hypertext Application Technology Working Group (WHATWG). They are working with web forms and applications and W3C was working with XHTML 2.0. 

HTML5 Features and Resources

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:

Some rules for HTML5 were established:

  • New features should be based on HTML, CSS, DOM, and JavaScript
  • Reduce the need for external plugins (like Flash)
  • Better error handling
  • More markup to replace scripting
  • HTML5 should be device independent
  • The development process should be visible to the public

Some most interesting new features in HTML5:

  • 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, nav, section
  • New form controls, like calendar, date, time, email, url, search

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.

HTML5 is the fifth implementation of HTML and defines an HTML syntax that is compatible with HTML4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML4, such as processing instructions and shorthand markup as these are not supported by most user agents. Documents using the HTML syntax are almost always served with the text/html media type.

HTML5 does support for media like video and audio tags better.

HTML5 also defines detailed parsing rules (including “error handling”) for this syntax which are largely compatible with popular implementations. User agents must use these rules for resources that have the text/html media type. Here is an example document that conforms to the HTML syntax:

<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>

The other syntax that can be used for HTML5 is XML. This syntax is compatible with XHTML1 documents and implementations. Documents using this syntax need to be served with an XML media type and elements need to be put in the http://www.w3.org/1999/xhtml namespace following the rules set forth by the XML specifications. [XML]

Below is an example document that conforms to the XML syntax of HTML5. Note that XML documents must be served with an XML media type such as application/xhtml+xml or application/xml.

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>

What’s new?

HTML5_Logo_512

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 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.
  •  – 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)

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>

Where to start Learning HTML5?

No better way to learn about HTML5 than from the guys who created it, so there you go. Here you have the W3C HTML5 Introduction.

One thought on “HTML5 Features and Resources

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s