HTML5 Introduction – What is HTML5 Capable of, Features, and Resources


After analyzing our new focus here at 1WD, which basically is teaching new, young, designers about web design and helping them improve their skills and to start in the business, we realized that we really need to go as deep as possible into the basics. And while we covered many of these already, two basic things are still missing from the website, and these two are in-depth introductions and discussions about HTML5 and CSS. Therefore it is one of my assignments for the next period to teach you about these two technologies and, after this, to create several tutorials for you. So in the next two to three months, I will cover aspects of front-end web design, basic coding and tutorials about them. Buckle up and get ready to become better at coding!

What Is HTML5?

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 logo

The official logo of HTML5

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.

html5 code example

Example of how HTML5 code looks like

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.


In order to show you how far HTML5 actually got, I will showcase some websites and applications made with the new markup language, so you can see how much you can actually do with it.

1. Read is a HTML5 responsive theme made for WordPress. It is minimalistic, very simple to understand and use, loads faster than ever and it is not expensive at all.

html5 responsive theme

2. SmartStart is another incredibly simple to use HTML5 template.

html5 theme

3. BIZfolio is also made with HTML5, but it is not a simple template or a WordPress theme. BIZfolio is developed so that it works with Drupal.

drupal html5 theme

4. We start looking at applications by showcasing this simple Poker Blind Timer made with HTML5

blind timer

5. Coolendar is a great calendar application developed with HTML5, which can be both found for computer and portable devices (Android and iOS).


6. Scribd is built with HTML5 and allows users to have easy and quick access to different files and documents other users upload.


Besides websites and applications, developers created games based only on HTML5, instead of Flash as it was before. Here are some addictive HTML5 games out there. Check it out, some of the games are really entertaining.


Where to start?

HTML5 can’t be taught in a brief introduction. There are two ways to learn it as I see it. Either grab a good HTML5 book, or go out there and actually do it. I recommend both. I myself learned HTML and CSS from the internet, but there is some valuable information that you can get through reading a book and there is some valuable information that you can only get by practising  If you already have a solid understanding of HTML 4.01, it shouldn’t take more than a week or two to grab the necessary HTML5 skills from a book. And then the world is yours, you can go out there and practice.

html5 book

Jeremy Keith’s HTML5 book on several devices

To help you even more, I gathered a collection of good and respected books and tutorials you can start reading. I hope that by the time I will start posting tutorials, more of you will be able to code in HTML5 than in HTML 4.01. So this is where to start guys:


Guides and tutorials

1WD’s HTML5 Book


Check out our eBook now!

Up Next

After the CSS3 introduction article, which should be online soon, we will start together with some more complex HTML5/CSS3 tutorials, so stay tuned. We will create HTML5/CSS3 templates from scratch, menus, accordions, create signup forms, pricing tables and combined with jQuery, we will make some beautiful effects. We will do some great stuff together in the upcoming months!

Update, here it isCreate a Responsive Website Using HTML5 and CSS3 – Video Tutorial



  1. Mashfik

    Awesome article. Its very helpful for me. Because I am a newbie in this platform.

  2. Ree

    Fab article – as Tiffany said, it’s perfect for those who want to know the basics! I’ll be sure to bookmark this and forward it to my friends. Thank you! Ree

  3. Ree

    This is such a useful article – especially for beginners! A few of my friends tend to come to me for advice, so I intend on passing your article to them! Brilliant stuff – thank you!

  4. Migratsos

    Thank you for your great article. It is the clearest I’ve found and I am sure it’s going to help me in my effort to learn HTML5.
    I look forward to reading more from you.

  5. Narey

    Chris, this is a great article for anyone who is fresh out for HTML 5. I thought i could an observation on this beautiful article.

    W3Schools’ web links have been invariably used as references from W3C in this article. However i would like to bring it to your notice that W3Schools is not an affiliate of W3C. Citation here.

    It would be great if you could rephrase it. Coz, many new fresh web designers would get an impression that W3Schools is part of W3C, though they aren’t. In this beautiful world of web development, this message is already wrongly understood by quite a lot.

    Thanks again! You are doing a great job!!
    I am gonna check your hour long youtube tutorial on “Building Responsive Website using HTML5 and CSS3″ up next.

  6. I think it is hard to learn HTML5, but for sure we need to do. Here, you really have done a nice list with information that are not easy to find anywhere else in the web. Thank you so much!

  7. I am so interested to learn HTML5. I think your post encourage me to learn it. thank you for sharing is to 1stwebdesigner.

  8. The most important thing is the introduction of tags like header, nav, section, footer. These tag makes your website more SEO friendly and the world knows why a website should be SEO friendly. Removal of flash, ahh that was a real good move, Thanks to jQuery, CSS3 alongwith HTML5. My clients used to bug me all the time for those freaky flash banners at the top. Which are now replaced by jQuery. Thanks for sharing this post. I would like to see a post for Responsive Website in HTML5 CSS3.

  9. really this is very cool for web and gadget purpose by that performace of the web apps increases. Now i m use this and going to shift on the html 5 to make better performace of the web page.

  10. JoeFlash

    A correction is needed, the following statement in the article is incorrect:
    closed by at the end of the page

    The doctype is independent from the html tag and the two are not related.

  11. Patrick

    Ha my comment was half struck out? What the heck! :D I don’t know whether an admin did that or the site malfunctioned!

    I don’t think anything I said was off beat. Just logical.

  12. Nate

    Nice article. I am excited for the more more advanced tutorials (accordions, signup forms, pricing tables) you mentioned in the last paragraph. I’ll be waiting for these!

  13. MAC Design Inc.

    Thanks for the great post.. very advantageous and beneficial for the learners…This article has also helped me a lot.. :)

  14. maybe a little late reading this, kinda got to most of this the hard way, but anywho, thanks for taking the time to put this up for us lazies…

    • Christian

      We only posted it now because we are on our way to create some nice video tutorials, so I wanted to make sure people have knowledge about HTML5 and CSS3 before we jump into other, more advanced tutorials.

      • Patrick

        No, I perfectly understand. If any one is interested though, I have created a backwards compatibility style sheet to re-implement some of the removed features I found odd to remove.

        You are right though. This was a good article. I have a concern though. The ROOT element for HTML… you show in one instance the code not using it, but using the doctype, then in another it is being used separately. Was this an error or intended?

  15. Patrick

    Actually the list of removed features seems odd. I have been trying to keep up with it all. I can understand removing the element… it was a dual element for teletype and monospace… but that could be handled with css anyway… removing the element seems odd. I found it to be useful. I noticed they removed element… but not ? That seems odd too. I don’t get the reasoning for removing the one without the other; unless that wasn’t covered completely here? The element was deprecated in 4.01. Counter productive for them to even say they are removing it. CSS can achieve the same thing. The loss of the element… no big deal? I really forget there was an element for it. I always used the attribute for internationalization element features.

    All in all I think html 5 is going in the right direction, but people should really keep reading the on it to keep in the know. We are actually according to nightly builds at html 5.1. :)

    Also, for those saying xhtml is dead… its not. Its in there nightly build info ;) HTML 5 is still a form of xhtml. :) From what I understand anyway.

    BTW Dainis
    Thanks for the talk a couple months ago. Even though we discussed me doing web design coding since I was 18… you were right. College was a waste of time for it. I was teaching the teachers… Anyone thinking college is the way to go to learn web design and development… please reconsider. A CIW certification holds way more weight than the college degree in web design.

  16. rupak

    Actually I am very interested to learn HTML5. Your article will help a bit. it is good to learn these first as they are the basic building block and fundamentals still & Your article above is the clearest I’ve found and I look forward to reading more from you.

  17. Md.Emran

    it is really helpful for new user. i think you continue for all off new user who want learn!!!!!!!
    do you have any link where i learn it easily?

  18. It’s never too late for a solid round-up of features and resources. Nice work! Might be worth mentioning some of the forward-thinking frameworks like Foundation by Zurb, that take advantage of a lot HTML5’s goodness ;)

  19. Harish

    Thanks Christian for this great article! I had been working for the last few weeks on modifying a wordpress theme for my website (which doesn’t seem to use HTML5) but now I think I’ll have to redesign it from the basic by including the tags like , etc.
    One more thing, How to use the CSS with these new HTML5 tags? like HTML4 or is there some syntax change also?

    • no syntax needed for html5 but you need a fix for lower ie9 because they will not render the new tags, i sugest you use shiv(search shiv google api) and some style resets

  20. pete

    Very good information. Html5 will be the norm as so many of the bigger sites are moving toward html5. Responsive web design is the future

  21. Thanks for a great post Christian.
    I am on a course (well, for now, I maybe done with it soon) where I learned HTML4.01 and CSS2. As you sat in your article, it is good to learn these first as they are the basic building block and fundamentals still for HTML5 and CSS3. But having to juggle coursework and client/project work I have nearly no time to learn HTML5 and CSS3. I have a couple books (which were on your list too!) but have yet to read them, so I am looking forward to your articles & tutorials in the coming months.


  22. Divyam

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

    And after reading that when I scrolled down to post a comment, what did I see, “Tags allowed: a href=”” title=””, abbr title=””, acronym title=”” ……”

  23. Christian,
    I’ve only just started playing with HTML5 in terms of it’s use for structured (semantic) data.

    It’s a bit of a head spin, but the benefits from correctly marking up your content are exciting.

    However, I must say I found many of the articles explaining it so far both overwhelming and lacking in specific detail or examples of how to apply it.

    Your article above is the clearest I’ve found and I look forward to reading more from you.

    I’ve implemented some structured data on my site, and it’s working ok but it’s not perfect

    Still need to sort out a few things.

  24. Harinder Singh


    I want to learn basic thing about the jQuery. I am a website designer. But I always I have to find a person who can run jQuery on my websites. I also loose some couple of jobs because I was afraid of jQuery and JavaScript.

  25. Great post Christian. Actually I am very interested to learn HTML5. Your article will help a bit. The tags are mention on the post, if you describe more, then it is good. I mean, how to use, where to use. Well finally well written.

    Sandeep pattanaik

  26. Awais Raza

    Nice article, but you are very late in writing it. I think advance features of HTML5 must be discussed instead of basics. I have came across introduction many years ago like most of others.