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

What is ugly HTML?

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&nbsp;
    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?

Learn the New HTML5 Elements

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

Many tutorials on drag and drop with HTML5 do everything but e 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

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

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?

HTML5 Drag and Drop PuzzleI’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

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.