info@elabnody.net
(+20) 11 1120 1628
My Account

Are You Ready for HTML 5?

  1. Home
  2. web-design

Are You Ready for HTML 5?

By February 20, 2014

The internet, and the use of the internet, has changed a lot since 1999, when HTML 4.01 became a standard.

Today, several elements in HTML 4.01 are obsolete, never used, or not used the way they were intended. All those elements are removed or re-written in HTML5.

To better handle today’s internet needs, HTML5 has also included new elements for drawing graphics, displaying media content, for better page structure and better form handling, and several new APIs for drag and drop, for finding your geological location, for storing local data, and more.

Below is a list of the new HTML elements, introduced by HTML5, and a description of what they are used for.

HTML 5 New Doctype and Charset

The nice thing about HTML 5 is how easy it is to impelement. You use the HTML 5 doctype, which is very simple and streamlined:

<!doctype html>

Yes, that’s it. Just two words “doctype” and “html”. It can be this simple because HTML 5 is no longer part of SGML, but is instead a markup language all on its own.

The character set for HTML 5 is streamlined as well. It uses UTF-8 and you define it with just one meta tag:

<meta charset="UTF-8">

HTML 5 New Structure

HTML 5 recognizes that Web pages have a structure, just like books have a structure or other XML documents. In general, Web pages have navigation, body content, and sidebar content plus headers, footers, and other features. And HTML 5 has created tags to support those elements of the page.

  • <section> – to define sections of pages
  • <header> – defines the header of a page
  • <footer> – defines the footer of a page
  • <nav> – defines the navigation on a page
  • <article> – defines the article or primary content on a page
  • <aside> – defines extra content like a sidebar on a page
  • <figure> – defines images that annotate an article

HTML 5 New Inline Elements

These inline elements define some basic concepts and keep them semantically marked up, mostly to do with time:

  • <mark> – to indicate content that is marked in some fashion
  • <time> – to indicate content that is a time or date
  • <meter> – to indicate content that is a fraction of a known range – such as disk usage
  • <progress> – to indicate the progress of a task towards completion

HTML 5 New Dynamic Pages Support

HTML 5 was developed to help Web application developers, so there are a lot of new features to make it easy to create dynamic HTML pages:

  • Context menus – HTML 5 will support the creation and use of context menus within Web pages and applications
  • href is not required on a tag – this allows you to use the a tag with scripts and in Web applications without needing a place to send that anchor
  • async attribute – This is added to the script tag to tell the browser that the script should be loaded asynchronously so that it doesn’t slow down the load and display of the rest of the page.
  • <details> – provides details about an element. This would be like tooltips in non-Web applications.
  • <datagrid> – creates a table that is built from a database or other dynamic source
  • <menu> – an old tag brought back and given new life allowing you to create a menu system on your Web pages
  • <command> – defines actions that should happen when a dynamic element is activated

HTML 5 New Form Types

HTML 5 supports all the standard form input types, but it adds a few more:

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

HTML 5 New Elements

There are a few exciting new elements in HTML 5:

  • <canvas> – an element to give you a drawing space in JavaScript on your Web pages. It can let you add images or graphs to tool tips or just create dyanmic graphs on your Web pages, built on the fly.
  • <video> – add video to your Web pages with this simple tag.
  • <audio> – add sound to your Web pages with this simple tag.

HTML 5 Removes Some Elements

There are also some elements in HTML 4 that will no longer be supported by HTML 5. Most are already deprecated, and so shouldn’t be surprising, but a few might be difficult:

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript
  • s
  • strike
  • tt
  • u

References:

  1. W3Schools (2014), “HTML 5”, [Online] http://www.w3schools.com/html/html5_intro.asp , Retrieved Date: 20 Feb. 2013
  2. W3Schools (2014), “HTML Reference”, [Online] http://www.w3schools.com/tags/default.asp , Retrieved Date: 20 Feb. 2013

 

  • SOCIAL SHARE :
«
»