HTML5 Cheat Sheet

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!

HTML5 Cheat Sheet PDF

HTML for RWD—Learn the HTML You Need in a Free Chapter

Sams Teach Yourself Responsive Web Design in 24 Hours
Sams Teach Yourself Responsive Web Design in 24 Hours

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.

In chapter 5, you will learn:

  • How to write HTML for RWD
  • How to build a basic web page with HTML5
  • What semantic elements are and how to use them
  • Why valid HTML is important

And this chapter is available for free on the Informit 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).

HTML5 Learning Lab Available

HTML5 Learning Lab
HTML5 Mobile Application Development in 24 Hours Learning Lab

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.

I worked hard on these videos and on the quizzes as well as writing the entire body of text, so I hope that you enjoy the HTML5 Learning Lab.

 

8 Ways to Get Started with HTML5 Today

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>
    <style></style>

    In HTML 4 it was required that you use the type attribute to define scripts and styles. But as long as your style sheets are using CSS and your scripts are using JavaScript (ECMAScript), you can leave off the type designation and they will work without any issues.
  • 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">
    <a href="#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.

 

Are you interested in learning HTML5?

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.

What about you? Why are you interested in HTML5?