I built an HTML5 cheat sheet for myself, so that I could make sure that my tag libraries were up-to-date and so on. And then when I finished, I realized that this might be something you would like too.
It is a PDF file listing all the HTML5 elements, what they are and whether they are new, changed, the same as HTML 4 or gone from the specification (and what you should use instead). I hope you like it!
While responsive web design uses CSS to adjust web designs to respond to the devices viewing the page, you need to start with good HTML. Chapter 5 of my latest book Sams Teach Yourself Responsive Web Design in 24 Hours helps you learn the basics of HTML so that you’re ready to create a responsive website.
Note that if you’re a complete novice to HTML, this chapter will only be a starting place. It’s intended as an introduction to the minimum HTML you might need to do RWD. If you need to learn HTML, you should check out my first Sams book: Sams Teach Yourself HTML5 in 24 Hours (get a copy).
I’m pleased to announce that the latest version of my book Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours is available in a Learning Lab format from Pearson.
The Learning Lab takes the entire book and adds interactive quizzes, videos, step-by-step lessons, and live code editing right in the book. If you’ve wanted to do more practice while learning HTML5, this is an excellent version of the book to get.
Three Free Chapters
The first three chapters are available online for free for you to try out and see if this version will work for you.
HTML5 has been around for a few years now, and yet there are still a lot of people who are resistant to using it. But there are a number of aspects of HTML5 that you can start using today without any worries about compatibility whatsoever:
The DOCTYPE <!doctype html>
This is required in order to write HTML5, but it also won’t hurt your site even in older browsers. Browsers that don’t necessarily recognize the doctype will still display the page correctly — they’ll just use quirks mode.
The shortened meta character set <meta charset="utf-8">
This was implemented in HTML5 because every browser out there defines the character set from this tag. And the browsers implemented it because web designers were doing it by mistake.
Remove the type from SCRIPT and STYLE elements <script src=""></script>
Sectioning elements <section>, <article>, <aside>, <header>, <footer>, <nav>, and so on
You can add the sectioning elements into your existing HTML and they won’t change the way the page looks at all. Browsers that don’t recognize them will ignore them, and browsers that do will add that semantic information to the site.
Other semantic elements <mark> and <time>
Like sectioning elements, these add semantic information to the content, but browsers that don’t recognize these elements will simply ignore them.
Use the id attribute instead of name
While both attributes are valid in certain situations, you can use the id attribute to create anchors within your text. This isn’t an HTML5 specific change, but all modern browsers support linking to an ID with the pound-sign (#), for example: <h1 id="headline1">
Use placeholder links <a>placeholder link</a>
A placeholder link is just a link that doesn’t have an href attribute. They are another item that most web designers have used at one time or another, and now with HTML5 they are valid.
Use the new INPUT types in your forms
When you use an input type of email on your email input fields, browsers that support it will validate that the data looks like an email address. And browsers that don’t support it will simply ignore the type and treat it as a text box.
I am personally very interested in HTML5, but that’s just me. Lot’s of people think I’m a little crazy for focusing on a version of the language that is only really supported by IE 9 and the “other” browsers. After all, who really browses with Firefox and Safari (and don’t forget Chrome and Opera…)?
Well, I run on a Mac, so IE is difficult to run for me (I have it on my VM, but that’s another story). So I don’t really care about IE (Did I say that out loud?). I test with it, but otherwise, I avoid it.
But that’s not where my passion for HTML5 comes from. After all, I could use HTML4 and have great pages that work on Safari (and Firefox, etc.) without needing a new version of HTML.
No, my passion comes from my iPad. I love the fact that I can create an application in HTML5 that runs on my iPad as though it were a standalone application. There are even tools out there for me to convert my HTML5 applications into “real” applications for iOS. I’ve not tried them yet, but I will. Plus, along with the iPad, my HTML5 apps can run on the Xoom Android tablet and other Android phones as well.
I am excited to start working on this blog about HTML5. In it I’ll provide sample sites written in HTML5, links to tutorials on other sites, references that I use to learn HTML5 and lots more. I hope you enjoy learning about HTML5 as much as I enjoy writing about it.