Road Map To Coding With HTML5: Tutorials and Guidelines
- July 2nd, 2012
- 4 Comments
This overview features a hand-picked and organized selection of the most useful and popular Smashing Magazine’s articles related to HTML5 and published here over all the years.
- Falling for HTML5: Finding Love in the Little Things1
- Why We Should Start Using CSS3 and HTML5 Today2
- Learning to Love HTML53
- HTML5: The Facts And The Myths4
- Coding A HTML 5 Layout From Scratch5
- HTML5 Semantics6
- Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip7
- HTML5 and The Future of the Web8
- HTML5 And The Document Outlining Algorithm9
- Syncing Content With HTML5 Video10
- Optimize Images With HTML5 Canvas11
- Zen Coding: A Speedy Way To Write HTML/CSS Code12
HTML has had a troubled past. It was never really designed for what we are now accomplishing with it. This is in part a testimony to its flexibility and adaptability, but there have been inevitable growing pains.
So what was it originally intended for? Well it’s there in the name: Hyper-Text Markup Language. Yes, text; hyper-text to be more exact. Not layout, or images, or video, or fonts, or menus — or any of the other frippery that it now incorporates.
For a while now, here on Smashing Magazine, we have taken notice of how many designers are reluctant to embrace the new technologies such as CSS3 or HTML5 because of the lack of full cross-browser support for these technologies. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work. Many are holding on to the notion that once this push is made, we will wake to a whole new Web — full of exciting opportunities just waiting on the other side. So they wait for this day. When in reality, they are effectively waiting for Godot.
Just like the elusive character from Beckett’s classic play, this day of complete cross-browser support is not ever truly going to find its dawn and deliver us this wonderful new Web where our work looks the same within the window of any and every Web browser. Which means that many of us in the online reaches, from clients to designers to developers and on, are going to need to adjust our thinking so that we can realistically approach the Web as it is now, and more than likely how it will be in the future.
It seems that new resources and articles for teaching and promoting HTML5 are popping up almost daily. We’ve been given HTML5 templates in the form of the HTML5 boilerplate20 and HTML5 Reset21 (although they both go beyond just HTML5 stuff). We’ve got a plethora of books22 to choose from that cover HTML5 and its related technologies. We’ve got shivs23, galleries24, and a physician25 to help heal your HTML5 maladies. And don’t forget the official spec26.
From my own vantage point — aside from a few disputes28 about what the term “HTML5″ should and shouldn’t mean — the web design and development community has for the most part embraced all the new technologies and semantics with a positive attitude.
While it’s certainly true that HTML5 has the potential to change the web for the better, the reality is that these kinds of major changes can be difficult to grasp and embrace. I’m personally in the process of gaining a better understanding of the subtleties of HTML5′s various new features, so I thought I would discuss some things associated with HTML5 that appear to be somewhat confusing.
Once upon a time, there was a lovely language called HTML, which was so simple that writing websites with it was very easy. So, everyone did, and the Web transformed from a linked collection of physics papers to what we know and love today. Most pages didn’t conform to the simple rules of the language (because their authors were rightly concerned more with the message than the medium), so every browser had to be forgiving with bad code and do its best to work out what its author wanted to display.
HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.
While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. After all, time’s proven that implementation of unfinished specifications35 does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play.
Much of the excitement we’ve seen so far about HTML5 has been for the new APIs: local storage, application cache, Web workers, 2-D drawing and the like. But let’s not overlook that HTML5 brings us 30 new elements to mark up documents and applications, boosting the total number of elements available to us to over 100.
To keep this article from turning into a book, we won’t look at each in depth. Instead, this is a taster menu: you can see what’s available, and there are links that I’ve vetted for when you want to learn more.
Since the official announcement of W3C to stop working on the development of XHTML 2 in the end of 2009 and increase resources on HTML 5 instead, there has been a lot of confusion and various debates about the “proper”markup language for modern and future web-development. With XHTML 1.0, XHTML 2, HTML 4, HTML 5 and XHTML 5 we have so many languages that it’s really getting hard to keep track!
Now that the development of XHTML 2 is discontinued, should we stick to XHTML 1.0 or move forward to HTML 5 or better prefer the old HTML 4? Let’s set things straight once and for all. In this post we are trying to clear up the confusion, explain what is what and describe what markup language you can use for your web-sites.
Some have embraced it45, some have discarded it46 as too far in the future, and some have abandoned a misused friend47 in favor of an old flame in preparation. Whatever side of the debate you’re on, you’ve most likely heard all the blogging chatter surrounding the "new hotness" that is HTML5. It’s everywhere, it’s coming, and you want to know everything you can before it’s old news.
Things like jQuery plugins, formatting techniques, and design trends change very quickly throughout the Web community. And for the most part we’ve all accepted that some of the things we learn today can be obsolete tomorrow, but that’s the nature of our industry.
When looking for some stability, we can usually turn to the code itself as it tends to stay unchanged for a long time (relatively speaking). So when something comes along and changes our code, it’s a big deal; and there are going to be some growing pains we’ll have to work through. Luckily, rumor has it, that we have once less change to worry about49.
In this article, I’m hoping to give you some tips and insight into HTML5 to help ease the inevitable pain that comes with transitioning to a slightly different syntax. Welcome to HTML5.
By now, we all know that we should be using HTML552 1 to build websites. The discussion now is moving on to how to use HTML5 correctly. One important part of HTML5 that is still not widely understood is sectioning content:
nav. To understand sectioning content, we need to grasp the document outlining algorithm.
Understanding the document outlining algorithm can be a challenge, but the rewards are well worth it. No longer will you agonize over whether to use a
div element?—?you will know straight away. Moreover, you will know why these elements are used, and this knowledge of semantics is the biggest benefit of learning how the algorithm works.
One of the main changes from HTML4 to HTML5 is that the new specification breaks a few of the boundaries that browsers have been confined to. Instead of restricting user interaction to text, links, images and forms, HTML5 promotes multimedia, from a generic
<object> element to a highly specified
Native multimedia capability has a few benefits. For instance, end users have full control over the multimedia. The native controls of browsers allow users to save videos locally or email them to friends. Also, HTML5 video and audio are keyboard-enabled by default, which is a great accessibility benefit.
Images have always been the heaviest component of websites. Even if high-speed Internet access gets cheaper and more widely available, websites will get heavier more quickly. If you really care about your visitors, then spend some time deciding between good-quality images that are bigger in size and poorer-quality images that download more quickly. And keep in mind that modern Web browsers have enough power to enhance images right on the user’s computer. In this article, I’ll demonstrate one possible solution.
In this post we present a new speedy way of writing HTML code using CSS-like selector syntax — a handy set of tools for high-speed HTML and CSS coding. It was developed by our author Sergey Chikuyonok and released for Smashing Magazine and its readers.
- 1 #a1
- 2 #a2
- 3 #a3
- 4 #a4
- 5 #a5
- 6 #a6
- 7 #a7
- 8 #a8
- 9 #a9
- 10 #b1
- 11 #b2
- 12 #b3
- 13 http://coding.smashingmagazine.com/2011/01/21/falling-for-html5-finding-love-in-the-little-things/
- 14 http://www.smashingmagazine.com/2011/01/21/falling-for-html5-finding-love-in-the-little-things/
- 15 http://coding.smashingmagazine.com/2011/01/21/falling-for-html5-finding-love-in-the-little-things//#more-82106
- 16 http://coding.smashingmagazine.com/2010/12/10/why-we-should-start-using-css3-and-html5-today/
- 17 http://www.smashingmagazine.com/2010/12/10/why-we-should-start-using-css3-and-html5-today/
- 18 http://coding.smashingmagazine.com/2010/12/10/why-we-should-start-using-css3-and-html5-today//#more-76011
- 19 http://coding.smashingmagazine.com/2010/11/10/learning-to-love-html5/
- 20 http://html5boilerplate.com/
- 21 http://html5reset.org/
- 22 http://www.webdesignerdepot.com/2010/05/html5-and-css3-books-to-watch-for-in-2010/
- 23 http://code.google.com/p/html5shiv/
- 24 http://html5gallery.com/
- 25 http://html5doctor.com/
- 26 http://dev.w3.org/html5/spec-author-view/spec.html
- 27 http://www.smashingmagazine.com/2010/11/10/learning-to-love-html5/
- 28 http://jeffcroft.com/blog/2010/aug/02/term-html5/
- 29 http://coding.smashingmagazine.com/2010/11/10/learning-to-love-html5//#more-67145
- 30 http://coding.smashingmagazine.com/2010/09/23/html5-the-facts-and-the-myths/
- 31 http://www.smashingmagazine.com/2010/09/23/html5-the-facts-and-the-myths/
- 32 http://coding.smashingmagazine.com/2010/09/23/html5-the-facts-and-the-myths//#more-64922
- 33 http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
- 34 http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
- 35 http://www.w3.org/TR/CSS2/
- 36 http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch//#more-9045
- 37 http://coding.smashingmagazine.com/2011/11/18/html5-semantics/
- 38 http://www.brucelawson.co.uk/2011/html5-and-hollow-demos/
- 39 http://coding.smashingmagazine.com/2011/11/18/html5-semantics/
- 40 http://coding.smashingmagazine.com/2011/11/18/html5-semantics/
- 41 http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/
- 42 http://www.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/
- 43 http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip//#more-9179
- 44 http://coding.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/
- 45 http://radar.oreilly.com/2009/05/google-bets-big-on-html-5.html
- 46 http://ishtml5readyyet.com/
- 47 http://mezzoblue.com/archives/2009/04/20/switched/
- 48 http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/
- 49 http://www.zeldman.com/2009/07/02/xhtml-wtf/
- 50 http://coding.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web//#more-8859
- 51 http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/
- 52 http://coding.smashingmagazine.com/2010/12/10/why-we-should-start-using-css3-and-html5-today/
- 53 http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/
- 54 http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/
- 55 http://coding.smashingmagazine.com/2011/03/11/syncing-content-with-html5-video/
- 56 http://www.smashingmagazine.com/2011/03/11/syncing-content-with-html5-video/
- 57 http://coding.smashingmagazine.com/2011/03/11/syncing-content-with-html5-video//#more-91888
- 58 http://coding.smashingmagazine.com/2011/08/30/optimize-images-with-html5-canvas/
- 59 http://coding.smashingmagazine.com/2011/08/30/optimize-images-with-html5-canvas/
- 60 http://coding.smashingmagazine.com/2011/08/30/optimize-images-with-html5-canvas/
- 61 http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/
- 62 http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/
- 63 http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code//#more-16072