HTML5 Tags 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 !

Playing with Zeen - I created an HTML5 magazine

Thu, 30 Aug 2012 03:38:28 +0000

[caption id=“attachment_490” align=“aligncenter” width=“757”] Latest issue of HTML5 Zine

I’ve been playing with the new webzine creation tool: Zeen. I’ve linked to several of my articles about HTML5 from About.com. I hope you enjoy my first issue.

What is ugly HTML?

Thu, 28 Jun 2012 00:02:11 +0000

Yesterday, someone asked me the question:

“What is ugly HTML?”

And I realized that this isn’t necessarily an obvious thing. HTML is often ugly simply because of how it looks, this mostly centers around readability for me:

All one line and/or minified This is very popular with minimalists and people who are very concerned with the speed of their pages. Minifying the code is a technique to remove all extraneous spaces, new lines, and characters to keep the HTML as small and streamlined as possible. Yes, this does speed up the pages, and I even recommend that you do it, but I really hate looking at it. It’s ugly.
Too little formatting (and too much) By formatting, I mean the tabs and new lines that make the HTML easier to read. This is similar to the first item in this list, but I think we should take this further and include too much formatting as well. I have seen pages where there are two or three nested tables, and every single table row and column is indented from the container. This can get insanely hard to read after a while. e.g.

<table> <tr> <td> <table> <tr> <td> <table> <tr> <td> …

All caps HTML Yes, this is valid in HTML5 (and HTML 4), but it’s ugly and hard to read. I think some people do it so that they can see the tags more quickly, but although you can see the tags, it’s hard to differentiate them at times. I recommend avoiding all caps for headlines because they are hard to read, and the same goes for HTML tags. If you need to edit the HTML later, it can be that much harder to find the problem if they are all in capital letters.
Invalid HTML This is the ugliest HTML of all because it can make a page show up incorrectly at the most inopportune times. It’s not a difficult thing to validate your HTML (I like the W3C validator, myself) and this can save you so much time in the future.

Then there is the ugly HTML because it’s using old-fashioned methods:

Too many DIVs It’s like when people learned CSS for layout they only learned to put the CSS on one tag – the DIV element. So every block of text, every image, everything on the page is surrounded by one or more DIVs. Yes, this is technically correct. Yes, it works. But man, it’s ugly. It provides no extra information about the content beyond that it’s a block that might have some styles applied to it. I particularly hate when they add the styles to a DIV that is surrounding another, perfectly functional block-level element like a UL element. Why not style the UL? Save yourself a few characters!
I hate it when people add spaces using Just like the above, it works, and it makes the page look like you want, but really, that’s what CSS is for. There is this wonderful property: margin, that you can use to set the margins around any element – and rather than relying on the space set by a paragraph tag, you can define it to exactly the size you want.
I hate it even more when people use tons of <BR> elements in a row

Yes, it shoves things down, but just like the above item, the margin property works better and takes up less download time.
Hiding content in strange places One site I visited once used the title attribute as a way to hide content. When you moused over certain sections of the page, the title content would show up. But the browser I was using showed the title content in a little yellow box as well, often covering the very content that the designer was trying to place. Use JavaScript and place the content in the page. HTML5 even offers a hidden attribute that you can toggle on and off if you want the content to appear and disappear.

What do you think makes ugly HTML? Or does the HTML not matter as long as the page looks good?

Comments:

Sofia Khatoon - Oct 5, 2012

Thanks for a wonderful book on this topic. Just noticed spelling “Reset Default Foont Size” in companion web site on Hour 6. Also wanted to ask if you can share samples of styles-320.css which makes the puzzle page appear in two column in the book.

Jennifer Kyrnin - Jan 5, 2013

I’ll look for these and get them up on the site. Thanks for the compliment.

Learn the New HTML5 Elements

Tue, 17 Apr 2012 17:57:12 +0000

One of the first things you want to learn when you start learning HTML5 are the new elements. There are several new HTML5 elements to add new features and functionality to HTML5.

New HTML5 Elements

Document Metadata

meta charset
This is a new, shortened form of the character set meta data. It was added to the specification because web designers were writing the original character set meta tag incorrectly and browsers were supporting it.

Sections

section
A discrete section of the document.
nav
Navigation.
article
An article or page section that could be syndicated.
aside
A page section that is tangentially related to either the current page or the site as a whole.
hgroup
A group of headings.
header
The header information for a section or page.
footer
The footer information for a section or page.

Grouping Content

figure
Content that is self-contained and referenced as a single unit within the flow of the page.
figcaption
A caption for a figure.

Text-level Semantics

data
Contents that have a machine-readable format that is defined in the value attribute.
time
A date or time with a machine-readable format defined in the datetime attribute.
mark
A block of text that is highlighted for some purpose beyond the context of the current page.
ruby
Ruby annotation used in some double-byte languages.
rt
Ruby text.
rp
Ruby parenthesis.
bdi
A span of text separate from the page contents for bi-directional formatting.
wbr
A line break opportunity.

Embedded Content

embed
The insertion point for embedded content.
video
An embedded video with it’s associated source files and language tracks.
audio
An embedded audio file with it’s associated source files.
source
Source file for embedded video or audio.
track
Supplementary tracks for captioning or secondary audio tracks on videos.
canvas
A scriptable bitmap area for creating images and animations on a web page.

Forms

input type=search
A search box text field.
input type=tel
A telephone number input field.
input type=url
A URL input field.
input type=email
An email address input field.
input type=datetime
A date and time input field.
input type=date
A date input field.
input type=month
A month input field.
input type=week
A week of the year input field.
input type=time
A time input field.
input type=datetime-local
A local date and time input field.
input type=number
A number input field.
input type=range
An inexact number input field.
input type=color
A color input field.
datalist
A list of pre-defined options for an input field.
keygen
A key pair generator control.
output
Scripted form output.
progress
The completed progress of a task.
meter
A scalar value within a known range.

Interactive Elements

details
An element where the user can get additional information.
summary
A caption or legend explaining the parent details element.
command
A command that the user can invoke.
menu
A list of commands.
dialog
A part of an application that the user interacts with such as a dialog box.

Drag and Drop upload–the final step

Mon, 09 Apr 2012 13:00:45 +0000

Many tutorials on drag and drop with HTML5 do everything but the actual upload step. This is because that step requires server interaction and scripting–you can’t just use JavaScript. But the HTML5 Doctors have a way to use XHR2 (xmlHttpRequest) to get the upload done too! Drag and Drop and Automatically Send to Server

The TIME Element Has Been Removed in Favor of DATA

Thu, 03 Nov 2011 00:03:32 +0000

As of October 29th there is a new element in HTML5: DATA. The DATA element is for defining content that has both human- and computer-readable data. Some examples of this are:

Dates and times
Numbers
Colors
Money

Each of these can be written in a way that a human will understand, while a computer might not. For example, a date can be written December 16th, Dec 16, 12/16/11, 16 December, and many other ways. While it is possible to teach computers to know that all those things are dates and what they meant. So you can set the value of a date on a data element with a standard format that computers can read.

<data value=“2011-12-16”>December 16th</data>

With the DATA element and its required attribute value you can define data for microformats and microdata as well as for scripts on your web page. The content displays in a format that humans appreciate and the value attribute has the content in a format that computers can read and use.

The `DATA` Element Replaces the `TIME` Element

In the same revision to the HTML5 specification that brought us the DATA element, it also removed the TIME element from the specification. While you might be disappointed, this is really a good thing. The TIME element was limited only to date and time formats and as such had a limited scope. With the DATA element you can mark up all sorts of things that can be defined in both human- and computer-readable formats, you are not just limited to dates and times.

How This Affects the Book

I submitted my final revision of the book on October 25, 2011—four days before this change went into effect. The book covers the TIME element, but does not include the DATA element.

Using HTML5 Video and Audio

Fri, 21 Oct 2011 19:10:03 +0000

On my About.com site I wrote an 11-page article explaining how to add video using HTML5 with fallback options for Internet Explorer. I also have a similar (although a lot shorter) article on how to add sound with HTML5. And I get a lot of emails about them saying “I tried this in _____ browser and it didn’t work.” And I’m expecting to get the same type of feedback from chapter 12 when the book comes out.

Now, I admit, I am human. I make mistakes and things get munged in publishing and so on. I tested both the articles on About and the chapter code extensively, as did my technical editors. And I’m confident that it works in modern web browsers, even Internet Explorer.

Follow the Steps Precisely

The video article is especially tough because it’s so long. Who wants to wade through 11 pages of stuff just to post a video? Wouldn’t we all rather be shooting our films instead? But none of the pages are in there as fluff. If you want your video to work in modern HTML5 compliant browsers as well as Internet Explorer 8, then you need to read and do them all. And I can tell by my statistics that people aren’t doing that. In fact, while the first most popular page is page 1, the next most popular is page 5. Page 9 (where you make it compliant with IE) is only 1/2 as popular as page 5.

The thing is—this stuff is very picky. You have to follow the steps exactly, or it won’t work. In fact, it took me a long time and many trials and lots of errors before I could get it working well enough to write the articles and chapter. This means that it can be very frustrating.

In my opinion, the frustration is made up for by the benefits you get from using HTML5 for video and audio. You may disagree.

And if You Do Find an Error…

Please let me know. As I said above, I’m human, and I do make mistakes. But I can’t fix them if I don’t know about them, and since I tested it I think it works as I wrote it. So I don’t know about any errors. Please don’t hesitate to let me know about problems with the articles or the book when you find them. I’d really appreciate it and it might even help you get your video and audio working!

Do you want to solve an HTML5 puzzle?

Mon, 06 Jun 2011 01:59:58 +0000

I’ve been working on HTML5 drag and drop this week, and I’ve created a simple puzzle that you can play with in any HTML5 browser: HTML5 Drag and Drop Puzzle

Yes, it’s a pretty easy puzzle, but I do like this photo of my dogs. And it shows you how you can implement HTML5 drag and drop. The full instructions will be in Hour 16 of the book

HTML5 Speech Input Added to Chrome

Thu, 28 Apr 2011 01:51:07 +0000

The latest version of Chrome now adds support for speech input. This gives you the opportunity to let your readers actually talk to your applications and web pages, rather than be forced to type.

While this might not seem terribly useful, there are very useful applications, such as:

speak words to translate or get a definition
ask for directions of a map
hands-free browsing
zooming and panning with voice commands

I don’t know about you, but I have a vision of an HTML5 application where I could upload a photo, and then just say “zoom” and “enhance” and zoom in on the photo, like all those TV shows do.

And to do it, you just add a speech attribute to the <input> tag. For example:

<input type=text speech id=spoken-input>

Of course, to get it to work in Chrome you have to use the Webkit extension as well:

<input type=text x-webkit-speech=x-webkit-speech speech id="spoken-input>

I’ve got a simple working (if you’re on Chrome) example here.

HTML5 Tags on HTML5 in 24 Hours

HTML5 Cheat Sheet

HTML5 Cheat Sheet PDF

Comments:

Playing with Zeen - I created an HTML5 magazine

What is ugly HTML?

What do you think makes ugly HTML? Or does the HTML not matter as long as the page looks good?

Comments:

Learn the New HTML5 Elements

New HTML5 Elements

Document Metadata

Sections

Grouping Content

Text-level Semantics

Embedded Content

Forms

Interactive Elements

Drag and Drop upload–the final step

The TIME Element Has Been Removed in Favor of DATA

The DATA Element Replaces the TIME Element

How This Affects the Book

Using HTML5 Video and Audio

Follow the Steps Precisely

And if You Do Find an Error…

Do you want to solve an HTML5 puzzle?

HTML5 Speech Input Added to Chrome

The `DATA` Element Replaces the `TIME` Element