Road Map To Coding With HTML5: Tutorials and Guidelines
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
Start with a free demo —
Check the frontend report!
Take a break with a 3D game built on Netlify!
Sponsor OWD on GitHub
Click here to kickstart your project for free in a matter of minutes.
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.
Quick Overview
- Falling for HTML5: Finding Love in the Little Things
- Why We Should Start Using CSS3 and HTML5 Today
- Learning to Love HTML5
- HTML5: The Facts And The Myths
- Coding A HTML 5 Layout From Scratch
- HTML5 Semantics
- Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip
- HTML5 and The Future of the Web
- HTML5 And The Document Outlining Algorithm
- Syncing Content With HTML5 Video
- Optimize Images With HTML5 Canvas
- Zen Coding: A Speedy Way To Write HTML/CSS Code
Falling for HTML5: Finding Love in the Little Things
I’ve lost count of the number of posts that have been written about the big features of HTML5: amongst the most anticipated being rich media (video, audio, canvas) and JavaScript APIs. However, call me a woman of simple tastes, but this is not the sort of thing that gets me swooning. What does? The small additions to the spec that will make the world of difference to the way I code day-in, day-out. This is the stuff fairy tales are made of.
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.
Why We Should Start Using CSS3 and HTML5 Today
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.
Learning to Love HTML5
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 boilerplate and HTML5 Reset (although they both go beyond just HTML5 stuff). We’ve got a plethora of books to choose from that cover HTML5 and its related technologies. We’ve got shivs, galleries, and a physician to help heal your HTML5 maladies. And don’t forget the official spec.
From my own vantage point — aside from a few disputes 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.
HTML5: The Facts And The Myths
You can’t escape it. Everyone’s talking about HTML5. it’s perhaps the most hyped technology since people started putting rounded corners on everything and using unnecessary gradients. In fact, a lot of what people call HTML5 is actually just old-fashioned DHTML or AJAX. Mixed in with all the information is a lot of misinformation, so here, JavaScript expert Remy Sharp and Opera’s Bruce Lawson look at some of the myths and sort the truth from the common misconceptions.
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.
Coding A HTML 5 Layout From Scratch
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 specifications does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play.
HTML5 Semantics
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.
Sexy yet hollow demos 1 aside, even the most JavaScript-astic Web 2.0-alicious application will likely have textual content that needs to be marked up sensibly, so let’s look at some of the new elements to make sure that your next project is as semantic as it is interactive.
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.
Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip
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.
HTML5 and The Future of the Web
Some have embraced it, some have discarded it as too far in the future, and some have abandoned a misused friend 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 about.
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.
HTML5 And The Document Outlining Algorithm
By now, we all know that we should be using HTML5 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: section, article, aside and 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 section or 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.
Syncing Content With HTML5 Video
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 <video> and <audio> element, and with a rich API to access in pure JavaScript.
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.
Optimize Images With HTML5 Canvas
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.
Zen Coding: A Speedy Way To Write HTML/CSS Code
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.
