HTML5: The Basics (1 of 4)

Written by , Published On 19th October 2009.
Filed in HTML, Web Standards.

screenshot

The next iteration of HTML has been met with excitement by some, loathing by others and confusion/fear by everyone else. Love it or hate it, HTML 5 will soon define how you build websites. This is the first article in a four part series that will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition. Over the next week we’ll be focusing on three major areas:

1. New Elements
2. Semantic Changes
3. Getting it Working Today

This article will briefly introduce each of these topics to prepare you for the in-depth articles ahead.

APIs

Before we dive into the topics listed above, I want to take a minute to look at an extremely important feature that we won’t be covering in its own dedicated article: the new APIs. HTML5 includes several new APIs that are integrated with some of the new HTML5 elements (which we’ll be looking at later). Here’s the complete list straight from W3.org:

  • 2D drawing API which can be used with the new canvas element.
  • API for playing of video and audio which can be used with the new video and audio elements.
  • An API that enables offline Web applications.
  • An API that allows a Web application to register itself for certain protocols or media types.
  • Editing API in combination with a new global contenteditable attribute.
  • Drag & drop API in combination with a draggable attribute.
  • API that exposes the history and allows pages to add to it to prevent breaking the back button.
  • Cross-document messaging.

    • As you can see, the principal purpose of these APIs is to facilitate web application creation. Notice the third API enables offline web apps. This is excellent news for users and programmers alike because it enables the use of rich, internet-driven applications in an offline environment. You can expect to see many of your favorite applications follow Gmail in introducing offline access.

    New Elements in HTML5

    HTML5 introduces quite a few new elements. Article two in this series will look at a few of these in detail, but for now here’s the complete list with brief descriptions (source: w3schools):

  • <article> Defines external content

  • <aside> Defines some content aside from the article it is placed in

  • <audio> Defines sound, such as music or other audio streams

  • <canvas> Defines graphic, such as graphs or other images

  • <command> Defines a command button, like a radiobutton, a checkbox, or a button

  • <datagrid> Defines a list of selectable data. The datagrid is displayed as a tree-list

  • <datalist> Defines a list of selectable data. Use this element together with the input element, to make a dropdown list for the input’s value

  • <datatemplate> Defines a container for data template. This element must have child elements to define a template: <rule> elements

  • <details> Defines details of an element, which the user can see, and click to hide

  • <dialog> Defines a dialog, such as a conversation

  • <embed> Defines embedded content, such as a plug-in

  • <event-source> Defines a source for events sent by a server

  • <figure> Used to group some elements

  • <footer> Defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information

  • <header> Defines the header of a section or document

  • <mark> Defines marked text. Use the <mark> tag if you want to highlight parts of your text

  • <meter> Defines a measurement. Used only for measurements with a known minimum and maximum value

  • <nav> Defines a section of  navigation links

  • <nest> Defines a nestingpoint in a datatemplate for child elements. Used together with the elements <datatemplate> and <rule>

  • <output> Defines different types of output, such as output written by a script

  • <progress> Defines work-in-progress. Use the progress element to display the progress of a time consuming function in JavaScript

  • <rule> Defines the rules for updating a datatemplate. Used together with the elements <datatemplate> and <nest>

  • <section> Defines sections in a document. Such as chapters, headers, footers, or any other sections of the document

  • <source> Defines media resources for media elements, such as <video> and <audio>

  • <time> Defines a time or a date, or both

  • <video> Defines video, such as a movie clip or other video streams

    • Though we won’t have time to go over each of these in detail, we’ll be examining a few of the important ones such as <canvas> and <video>.

    Semantic Changes

    This is the part that should fundamentally change the way you structure your sites. Included in the list above are six new structural elements that will help bring consistency to the basic frame of sites all across the web. These six elements are:

    1. <nav>
    2. <section>
    3. <article>
    4. <header>
    5. <footer>
    6. <aside>

    Think of these as the replacement for many of the DIVs that you currently use to structure your site. So instead of “<div class=”header”>,” you’ll simply have “<header>.” Notice I included “div class” instead of “div id.” This is because these elements are repeatable throughout a page in the same way that classes are. We’ll investigate this more later this week in article three.

    Getting HTML5 Working Today

    Don’t get too excited by this headline. As any good web developer knows, all the major web browsers still differ (some are worse than others, you know who I’m talking about) on support for HTML4.01 and XHTML 1.0. Now imagine what that means for a change as big and new as HTML5. Though mega-developers like Google are pushing along the acceptance of HTML5, it won’t be supported across the board for some time. However, that doesn’t meant that you shouldn’t begin preparing for the big switch today, and it certainly doesn’t mean there aren’t clever tricks out there to enable you to start playing with HTML5 right away. In article four, we’ll take a look at how you can start your HTML5 journey sooner rather than later.

    Conclusion

    This article briefly introduced the new elements and APIs included in HTML5. We talked about how you should be excited for the changes HTML5 will bring to the web apps of tomorrow. We also got a taste of the semantic changes to come and the new structure our web pages should take in the future. Finally, we learned that even though HTML5 isn’t quite ready for the masses, we can still get our grubby developer fingers on it and start experimenting today. Check back here frequently in the next week for an in-depth look into each of these topics!

    Discussion

    1. Jake says:
      October 20, 2009 at 4:15 pm

      Thanks for this article. There are four more as your title tells me…will those be out this week or is going to be a weekly dose? Either way i’ll subscribe to the rss feed.

    2. Chris Pierre says:
      October 20, 2009 at 4:42 pm

      Thanks for the post, I can wait to begin practicing HTML 5.

    3. Joshua Johnson says:
      October 20, 2009 at 6:21 pm

      Jake: our second will be posted tomorrow so stay tuned!

    4. Robert says:
      October 20, 2009 at 10:29 pm

      Thanks for the article, I’m looking forward to the next posts, especially article 4!

    5. cssah says:
      October 21, 2009 at 9:40 pm

      Very excellent start article.Every web developer should start with HTML5 now.Wait for next posts.

    6. Satya Prakash says:
      October 22, 2009 at 11:37 am

      Good Insight of HTML5.

    7. Anon says:
      October 23, 2009 at 11:35 am

      ” Defines external content”

      Well. Frankly. That’s garbage. I would say that it is yet more evidence that W3Schools is just a collection of errors and unworthy of use as a reference — except the page linked to doesn’t say that.

    8. Chris Keeble says:
      November 5, 2009 at 11:02 pm

      Great article – thanks.

      Just one suggestion – please would you add links from this article to the follow on articles as you add them – it will save other readers hunting.

    9. Juegos says:
      February 12, 2010 at 11:56 pm

      Thanks for the article, I’m waiting more news and maybe some HTML5 examples, tutorials.

    10. Система это неограниченный ящик для чтения ваших электронных писем,хостинг ваших сайтов и серверов says:
      September 4, 2010 at 3:40 pm

      http://moiemail.ru/

    11. Riener says:
      September 17, 2010 at 4:15 am

      great article! moving.. cant wait to start with

    12. video html5 says:
      October 4, 2010 at 12:36 am

      HTML5 is going to be the future, it’s a very logical well organised syntax.

    13. Zeth Odderskov says:
      October 8, 2010 at 2:14 am

      Hallo

      How long do you think it would take all the browsers to be compatible with HTML5? Is there an estimated date?

      And is HTML5 as easy to learn as XHTML 1.0? It worries me a little bit.

      It’s like knowing that Australia will start speaking german sometime, but no one knows when. :-)

      Great blog, by the by.

    14. I'm a web designer says:
      October 27, 2010 at 2:41 am

      HTML5 is pretty easy to learn. In particualr becuase it’s such a logical language.

      The majority of browsers do support the basic functions already, although some older versions may not support html5, but if i was you i would not bother about this to much.

    15. sharief says:
      November 1, 2010 at 8:17 am

      Nice article on HTML 5.0 so long i was exited to know the HTML 5 features.

    16. Juegos says:
      November 10, 2010 at 4:29 pm

      Interesting post. Greetings Joshua

    17. Swamy says:
      January 13, 2011 at 8:40 pm

      It is very interesting and it is very helpfull for the HTML5 begineers

    18. Web design chesterfield says:
      January 22, 2011 at 8:43 am

      The datagrid feature within html5 is really useful. Furthermore, we’re seeing more and more web design and development clients asking us for html5 development services, which proves its really beginning to take off.

    19. sahi says:
      January 27, 2011 at 3:38 pm

      It covered the basic tags that are implemented in html5. thanks a lot…

    20. Karam says:
      February 8, 2011 at 3:44 pm

      cool….looking forward to learn

    21. nucreativa says:
      February 12, 2011 at 1:55 am

      thanks for the article :D

    22. Mustafa says:
      February 12, 2011 at 7:42 pm

      so useful thanks

    23. ravi says:
      February 15, 2011 at 6:38 am

      Nice techniques

    24. Glibiakit says:
      February 17, 2011 at 9:11 am

      [url=http://000site.ru/go.php?sid=9][img]http://classsex.ru/sex/138.jpg[/img][/url]
      [url=http://000site.ru/go.php?sid=9][img]http://opapizda.com/img/8/index.jpg[/img][/url]
      [url=http://000site.ru/go.php?sid=9][img]http://tdq.in/images/1/40.jpg[/img][/url]

      porno 2
      ñåêñ ïëàãèíû
      áåëîå ïîðíî
      ñåêñ âàðåç
      ïîðíî japan

      [url=http://www.ua.freetcp.com/filevideo-bdsm-seks.html]Bdsm ñåêñ[/url]
      [url=http://www.ua.freetcp.com/hot-732]Ñåìåéíûå ïàðû ëþáèòåëüñêîå ïîðíî – ãîëàÿ ïîðåâî ôèëüì[/url]
      [url=http://www.8.zyns.com/stkosg-dildotag6.html]Æåñòêîå ïîðíî áîëüøèå ñèñüêè[/url]
      [url=http://www.8.zyns.com/vysokie-porno-jk.html]Âûñîêèå ïîðíî ôîòî[/url]
      [url=http://www.8.zyns.com/scnzqtag2.html]Ìîíîëîãè âàãèíû òåêñò[/url]
      [url=http://www.8.zyns.com/248-netpage10.html]Æåñòîêîå ïîðíî ñåêñ[/url]
      [url=http://www.8.zyns.com/oiof-776tag2.html]Ïîçäíèé ñåêñ[/url]
      [url=http://www.8.zyns.com/333-jxoyepage3.html]Ñåêñ ðîëèêè ïðîñìîòð[/url]
      [url=http://www.9.zyns.com/leader-hlownapage10.html]Ïîðíî âèäåî çàãðóçêà[/url]
      [url=http://www.9.zyns.com/page3.html]Byterbrod com ïîðíóõà[/url]
      [url=http://www.9.zyns.com/yrezagruzki-video-seks.html]Çàãðóçêè âèäåî ñåêñ[/url]
      [url=http://www.9.zyns.com/thf-brunetochkifoto-pyshnye-popki.html]Ôîòî ïûøíûå ïîïêè[/url]
      [url=http://www.9.zyns.com/nojki]Ïîðíî ôîòî ó÷àñòíèêîâ äîì 2[/url]
      [url=http://www.9.zyns.com/btl-starporno-foto-jenskie-piski-krupno.html]Ïîðíî ôîòî æåíñêèå ïèñüêè êðóïíî[/url]
      [url=http://www.9.zyns.com/91-carrietag10.html]Íåæíûé ñåêñ[/url]
      [url=http://www.info-tube.zyns.com/dvd-761page10.html]Ðåòðî ôîòî áîëüøèõ ñèñåê[/url]
      [url=http://www.info-tube.zyns.com/page6.html]Ñåêñîì îáùåñòâåííûõ ìåñòàõ[/url]
      [url=http://www.info-tube.zyns.com/sgkqpage2.html]Ñåêñ ðîäû[/url]
      [url=http://www.info-tube.zyns.com/rus-743blog-dom2-realnyi.html]Äîì2 ðåàëüíûé ñåêñ[/url]
      [url=http://www.info-tube.zyns.com/jytdrambler-sex.html]Rambler sex[/url]
      [url=http://www.info-tube.zyns.com/foot-585blog-lesbian-sex.html]Lesbian sex forum asp[/url]
      [url=http://www.info-tube.zyns.com/have-brotherwarcraft-porno.html]Warcraft porno[/url]
      [url=http://www.kachestvennoe.zyns.com/clip-kylsovetskoe-porno.html]Ñîâåòñêîå ïîðíî[/url]
      [url=http://www.kachestvennoe.zyns.com/]Http best porno biz – ãîëàÿ æåíùèíà âèäåîôèëüì[/url]
      [url=http://www.kachestvennoe.zyns.com/91-bypvideo-erotika-1024.html]Ýðîòèêà 1024[/url]
      [url=http://www.kachestvennoe.zyns.com/seriousginekolog-porno-c.html]Ãèíåêîëîã ïîðíî âèäåî[/url]
      [url=http://www.kachestvennoe.zyns.com/think-fspytqpopka-goda-red.html]Ïîïêà ãîäà[/url]
      [url=http://www.kachestvennoe.zyns.com/love-mp4page5.html]Äåðåâåíñêàÿ ýðîòèêà[/url]
      [url=http://www.kachestvennoe.zyns.com/uav-bbpage5.html]Ïðåäîñìîòð ñåêñ[/url]
      [url=http://www.laskavaya.zyns.com/398-tftjavideo-mis-vagina.html]Ìèñ âàãèíà[/url]
      [url=http://www.laskavaya.zyns.com/porno-telki.html]Ïîðíî òåëêè[/url]
      [url=http://www.laskavaya.zyns.com/hot-hardcoreblog-lichnaya-sila.html]Ëè÷íàÿ ñèëà ñåêñ[/url]
      [url=http://www.laskavaya.zyns.com/best-homeporno-fotografii-incesta.html]Ïîðíî ôîòîãðàôèè èíöåñòà[/url]
      [url=http://www.laskavaya.zyns.com/bvcpiseks-narod-z.html]Ñåêñ narod[/url]
      [url=http://www.laskavaya.zyns.com/qekn-296page9.html]Ñòðèïòèç ïðîñìîòð âèäåî[/url]
      [url=http://www.laskavaya.zyns.com/dhlmwl-680foto-seks-more.html]Ôîòî ñåêñ ìîðå[/url]

      ñåêñè äåâêè
      sex t
      ïîïêè äåâî÷åê 13 15 ëåò
      ñåêñ ÷åðåç âýá êàìåðó
      ôîòî ñåêñà òðàíñâèñòèòîâ
      ññûëêè ñåêñ äï
      âèðòóàëüíûé ñåêñ êàìåðà
      àíåêäîòû ïðî ñåêñ ëþáîâü
      ñòðàñòíûé ñåêñ
      ïèçäó ñàñ¸ò
      êðóïíûå òåëêè
      ñåêñ 30 ëåòíèå ôîòî
      ïîðíî mail
      áîëüøèå ñèñüêè çíàìåíèòîñòåé
      yuahoo info ero
      ñåêñ çíàêîìñòâà ïàðàìè
      ïîðíîâèäåî èíòåðíåòå
      ñåêñ íàòàëüÿ ôîòî
      ãîñïîæà ñåêñ ìîñêâà
      ñèñüêè òðÿñóòñÿ âèäåî
      ïîðíî âèäåî teen
      ðóññêèå ñåêñ âå÷åðèíêè
      êðàñèâîå ïîðíî êðàñèâûå äåâóøêè

    25. SRIKAR says:
      April 19, 2011 at 12:48 pm

      Nice Article…………,

    26. Rafael says:
      May 20, 2011 at 11:04 am

      First of all… great job!

      Glibiakit ¿are u a spider, or a cocroach?, people (or software) like u should’t have an Inernet connection…

      We hate spammers like u Glibiakit, u should work more than u spam, spammer… :S

    27. geoge says:
      July 28, 2011 at 3:05 pm

      QFbjff http://fnYwlOpd2n9t4Vx6A3lbk.com

    28. Om says:
      August 20, 2011 at 7:17 am

      Lol its over now………

    29. Achint Verma says:
      September 16, 2011 at 7:34 am

      nice article..Vry helpful… for more stuff related to it check out this..
      http://www.facebook.com/html5apps

    30. Website Design says:
      October 27, 2011 at 2:17 pm

      Great article. Thanks for sharing

    31. korting says:
      November 1, 2011 at 11:03 pm

      Great article! Very informative…

    32. Troy says:
      January 29, 2012 at 6:19 pm

      Thanks for the simple overview.

    33. khael says:
      January 30, 2012 at 2:11 am

      nice article, simple yet very informative, cant wait to practice html5..thanks!…

    Leave Your Reply