Learning HTML5 on HTML5 in 24 Hours

HTML5 Cheat Sheet

Fri, 14 Aug 2015 22:08:43 +0000

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

Comments:

jim - Apr 2, 2013

Awesome list! Thanks! One minor gripe, though: The section “Tags not in HTML5” is hard to read due to the dark gray background.

Jennifer Kyrnin - May 0, 2013

Thanks for the feedback. I’ll see if I can fix that.

Dorian Mattar - Nov 1, 2013

Thanks for the cheatSheet, but I have a few comments. 1. Although it’s a “pdf”, it’s not a searchable pdf as it’s an image and not a true pdf. Not so much an issue because it’s alpha and only one page, but still it could have been… 2. The resolution is also not optimum and when magnified for high-resolution monitors, it pixilates. A true pdf would also solve this issue. 3. There is no sample code for each tag, which would make this truly a great cheat sheet. Thanks, Dorian

Bill Waddy - Apr 3, 2014

Thanks for the cheat sheet.

Viraj Lathigara - Mar 4, 2016

Thank you very much for this cheat sheet ! It had been very helpful to me and my friends ! Its my humble request to you to provide one more thing, We want sample codes for each and every tag. Hope you will help us !

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

Mon, 11 May 2015 16:09:24 +0000

from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 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

Wed, 30 Jul 2014 00:22:18 +0000

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

Fri, 22 Jun 2012 04:40:22 +0000

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.

Welcome to my new blog about HTML5

Fri, 15 Apr 2011 06:11:34 +0000

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.