This industry moves fast — really fast! If you’re not careful, you’ll be left in its dust. So, if you’re feeling a bit overwhelmed with the coming changes/updates in HTML5, use this as a primer of the things you must know.

1. New Doctype

Still using that pesky, impossible-to-memorize XHTML doctype?

view plaincopy to clipboardprint?

2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

If so, why? Switch to the new HTML5 doctype. You’ll live longer — as Douglas Quaid might say.

view plaincopy to clipboardprint?

1. >  

In fact, did you know that it truthfully isn’t even really necessary for HTML5? However, it’s used for current, and older browsers that require a specified doctype. Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype.

2. The Figure Element

Consider the following mark-up for an image:

view plaincopy to clipboardprint?

1. img src="path/to/image" alt="About image" />  
2. p>Image of Mars. p>  

Image of Mars.

There unfortunately isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the

element. When combined with the element, we can now semantically associate captions with their image counterparts.

view plaincopy to clipboardprint?

1. figure>  
2.     img src="path/to/image" alt="About image" />  
3.     figcaption>  
4.         p>This is an image of something interesting. p>  
5.     figcaption>  
6. figure>  

This is an image of something interesting.

3. Redefined

Not long ago, I utilized the element to create subheadings that are closely related to the logo. It’s a useful presentational element; however, now, that would be an incorrect usage. The small element has been redefined, more appropriately, to refer to small print. Imagine, a copyright statement in the footer of your site; according to the new HTML5 definition of this element; the would be the correct wrapper for this information.

The small element now refers to “small print.”

4. No More Types for Scripts and Links

You possibly still add the type attribute to your link and script tags.

view plaincopy to clipboardprint?

1. link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />  
2. script type="text/javascript" src="path/to/script.js">script>  

This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.

view plaincopy to clipboardprint?

1. link rel="stylesheet" href="path/to/stylesheet.css" />  
2. script src="path/to/script.js">script>  

5. To Quote or Not to Quote.

…That is the question. Remember, HTML5 is not XHTML. You don’t have to wrap your attributes in quotation marks if you don’t want to you. You don’t have to close your elements. With that said, there’s nothing wrong with doing so, if it makes you feel more comfortable. I find that this is true for myself.

view plaincopy to clipboardprint?

1. p class=myClass id=someId> Start the reactor.  

Start the reactor.

Make up your own mind on this one. If you prefer a more structured document, by all means, stick with the quotes.

6. Make your Content Editable

The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.

view plaincopy to clipboardprint?

1. >  
2.   
3. html lang="en">  
4. head>  
5.     meta charset="utf-8">  
6.     title>untitledtitle>  
7. head>  
8. body>  
9.     h2> To-Do List h2>  
10.      ul contenteditable="true">  
11.         li> Break mechanical cab driver. li>  
12.         li> Drive to abandoned factory  
13.         li> Watch video of self li>  
14.      ul>  
15. body>  
16. html>  

untitled


         To-Do List 
     
                 Break mechanical cab driver. 
                 Drive to abandoned factory
                 Watch video of self

Or, as we learned in the previous tip, we could write it as:

view plaincopy to clipboardprint?

1. ul contenteditable=true>  

7. Email Inputs

If we apply a type of “email” to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure. That’s right; built-in form validation will soon be here! We can’t 100% rely on this just yet, for obvious reasons. In older browsers that do not understand this “email” type, they’ll simply fall back to a regular textbox.

view plaincopy to clipboardprint?

1. >  
2.   
3. html lang="en">  
4. head>  
5.     meta charset="utf-8">  
6.     title>untitledtitle>  
7. head>  
8. body>  
9.     form action="" method="get">  
10.         label for="email">Email:label>  
11.         input id="email" name="email" type="email" />  
12.   
13.         button type="submit"> Submit Form button>  
14.     form>  
15. body>  
16. html>  

untitled

At this time, we cannot depend on browser validation. A server/client side solution must still be implemented.

It should also be noted that all the current browsers are a bit wonky when it comes to what elements and attributes they do and don’t support. For example, Opera seems to support email validation, just as long as the name attribute is specified. However, it does not support the placeholder attribute, which we’ll learn about in the next tip. Bottom line, don’t depend on this form of validation just yet…but you can still use it!

8. Placeholders

Before, we had to utilize a bit of JavaScript to create placeholders for textboxes. Sure, you can initially set the value attribute how you see fit, but, as soon as the user deletes that text and clicks away, the input will be left blank again. The placeholder attribute remedies this.

view plaincopy to clipboardprint?

1. input name="email" type="email" placeholder="doug@givethesepeopleair.com" />  

Again, support is shady at best across browsers, however, this will continue to improve with every new release. Besides, if the browser, like Firefox and Opera, don’t currently support the placeholder attribute, no harm done.

9. Local Storage

Thanks to local storage (not officially HTML5, but grouped in for convenience’s sake), we can make advanced browsers “remember” what we type, even after the browser is closed or is refreshed.

Subscribe to our YouTube page to watch all of the video tutorials!
Or, watch this video on Screenr.com.

“localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage.”
-QuirksBlog

While obviously not supported across all browsers, we can expect this method to work, most notably, in Internet Explorer 8, Safari 4, and Firefox 3.5. Note that, to compensate for older browsers that won’t recognize local storage, you should first test to determine whether window.localStorage exists.

via http://www.findmebyip.com/litmus/

10. The Semantic Header and Footer

Gone are the days of:

view plaincopy to clipboardprint?

1. div id="header">  
2.     ...  
3. div>  
4.   
5. div id="footer">  
6.     ...  
7. div>  

...

...

Divs, by nature, have no semantic structure — even after an id is applied. Now, with HTML5, we have access to the

and elements. The mark-up above can now be replaced with:

view plaincopy to clipboardprint?

1. header>  
2.     ...  
3. header>  
4.   
5. footer>  
6.     ...  
7. footer>  

... ...

It’s fully appropriate to have multiple headers and footers in your projects.

Try not to confuse these elements with the “header” and “footer” of your website. They simply refer to their container. As such, it makes sense to place, for example, meta information at the bottom of a blog post within the footer element. The same holds true for the header.

11. More HTML5 Form Features

Learn about more helpful HTML5 form features in this quick video tip.

Subscribe to our YouTube page to watch all of the video tutorials!

12. Internet Explorer and HTML5

Unfortunately, that dang Internet Explorer requires a bit of wrangling in order to understand the new HTML5 elements.

All elements, by default, have a display of inline.

In order to ensure that the new HTML5 elements render correctly as block level elements, it’s necessary at this time to style them as such.

view plaincopy to clipboardprint?

1. header, footer, article, section, nav, menu, hgroup {  
2.    display: block;  
3. }  

header, footer, article, section, nav, menu, hgroup {
   display: block;
}

Unfortunately, Internet Explorer will still ignore these stylings, because it has no clue what, as an example, the header element even is. Luckily, there is an easy fix:

view plaincopy to clipboardprint?

1. document.createElement("article");  
2. document.createElement("footer");  
3. document.createElement("header");  
4. document.createElement("hgroup");  
5. document.createElement("nav");  
6. document.createElement("menu");  

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

Strangely enough, this code seems to trigger Internet Explorer. To simply this process for each new application, Remy Sharp created a script, commonly referred to as the HTML5 shiv. This script also fixes some printing issues as well.

view plaincopy to clipboardprint?

1. >  
2. script src="http://html5shim.googlecode.com/svn/trunk/html5.js">script>  
3. >  

13. hgroup

Imagine that, in my site’s header, I had the name of my site, immediately followed by a subheading. While we can use an

and

tag, respectively, to create the mark-up, there still wasn’t, as of HTML4, an easy way to semantically illustrate the relationship between the two. Additionally, the use of an h2 tag presents more problems, in terms of hierarchy, when it comes to displaying other headings on the page. By using the hgroup element, we can group these headings together, without affecting the flow of the document’s outline.

view plaincopy to clipboardprint?

1. header>  
2.     hgroup>  
3.         h1> Recall Fan Page h1>  
4.         h2> Only for people who want the memory of a lifetime. h2>  
5.     hgroup>  
6. header>  

Recall Fan Page

Only for people who want the memory of a lifetime.

14. Required Attribute

Forms allow for a new required attribute, which specifies, naturally, whether a particular input is required. Dependent upon your coding preference, you can declare this attribute in one of two ways:

view plaincopy to clipboardprint?

1. input type="text" name="someInput" required>  

Or, with a more structured approach.

view plaincopy to clipboardprint?

1. input type="text" name="someInput" required="required">  

Either method will do. With this code, and within browsers that support this attribute, a form cannot be submitted if that “someInput” input is blank. Here’s a quick example; we’ll also add the placeholder attribute as well, as there’s no reason not to.

view plaincopy to clipboardprint?

1. form method="post" action="">  
2.     label for="someInput"> Your Name: label>  
3.     input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>  
4.     button type="submit">Gobutton>  
5. form>  

If the input is left blank, and the form is submitted, the textbox will be highlighted.

15. Autofocus Attribute

Again, HTML5 removes the need for JavaScript solutions. If a particular input should be “selected,” or focused, by default, we can now utilize the autofocus attribute.

view plaincopy to clipboardprint?

1. input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>  

Interestingly enough, while I personally tend to prefer a more XHTML approach (using quotation marks, etc.), writing "autofocus=autofocus" feels odd. As such, we’ll stick with the single keyword approach.

16. Audio Support

No longer do we have to rely upon third party plugins in order to render audio. HTML5 now offers the element. Well, at least, ultimately, we won’t have to worry about these plugins. For the time being, only the most recent of browsers offer support for HTML5 audio. At this time, it’s still a good practice to offer some form of backward compatibility.

view plaincopy to clipboardprint?

1. audio autoplay="autoplay" controls="controls">  
2.     source src="file.ogg" />  
3.     source src="file.mp3" />  
4.     a href="file.mp3">Download this file.a>  
5. audio>  

Download this file.

Mozilla and Webkit don’t fully get along just yet, when it comes to the audio format. Firefox will want to see an .ogg file, while Webkit browsers will work just fine with the common .mp3 extension. This means that, at least for now, you should create two versions of the audio.

When Safari loads the page, it won’t recognize that .ogg format, and will skip it and move on to the mp3 version, accordingly. Please note that IE, per usual, doesn’t support this, and Opera 10 and lower can only work with .wav files.

17. Video Support

Much like the element, we also, of course, have HTML5 video as well in the new browsers! In fact, just recently, YouTube announced a new HTML5 video embed for their videos, for browsers which support it. Unfortunately, again, because the HTML5 spec doesn’t specify a specific codec for video, it’s left to the browsers to decide. While Safari, and Internet Explorer 9 can be expected to support video in the H.264 format (which Flash players can play), Firefox and Opera are sticking with the open source Theora and Vorbis formats. As such, when displaying HTML5 video, you must offer both formats.

view plaincopy to clipboardprint?

1. video controls preload>  
2.     source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />  
3.     source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />  
4.     p> Your browser is old. a href="cohagenPhoneCall.mp4">Download this video instead.a> p>  
5. video>  

Your browser is old. Download this video instead.

Chrome can correctly display video that is encoded in both the “ogg” and “mp4″ formats.

There are a few things worth noting here.

1. We aren’t technically required to set the type attribute; however, if we don’t, the browser has to figure out the type itself. Save some bandwidth, and declare it yourself.
2. Not all browsers understand HTML5 video. Below the source elements, we can either offer a download link, or embed a Flash version of the video instead. It’s up to you.
3. The controls and preload attributes will be discussed in the next two tips.

18. Preload Videos

The preload attribute does exactly what you’d guess. Though, with that said, you should first decide whether or not you want the browser to preload the video. Is it necessary? Perhaps, if the visitor accesses a page, which is specifically made to display a video, you should definitely preload the video, and save the visitor a bit of waiting time. Videos can be preloaded by setting preload="preload", or by simply adding preload. I prefer the latter solution; it’s a bit less redundant.

view plaincopy to clipboardprint?

1. video preload>  

19. Display Controls

If you’re working along with each of these tips and techniques, you might have noticed that, with the code above, the video above appears to be only an image, without any controls. To render these play controls, we must specify the controls attribute within the video element.

view plaincopy to clipboardprint?

1. video preload controls>  

Please note that each browser renders its player differently from one another.

20. Regular Expressions

How often have you found yourself writing some quickie regular expression to verify a particular textbox. Thanks to the new pattern attribute, we can insert a regular expression directly into our markup.

view plaincopy to clipboardprint?

1. form action="" method="post">  
2.     label for="username">Create a Username: label>  
3.     input type="text"  
4.        name="username"  
5.        id="username"  
6.        placeholder="4  10"  
7.        pattern="[A-Za-z]{4,10}"  
8.        autofocus  
9.        

Sign in to Ninite Pro.

Pick your software

No sign up required — Works on Win7, Vista, or XP

NEW: Ninite Pro now has an offline mode! Click here to learn more.

Apps marked will install in English only. Thanks for your patience.

Fun with QR codes and email

April 9th, 2010 | by Ben

Two things we noticed all over this year’s SXSW were: 1) Unicorns, and 2) QR codes.

For those of you who don’t know, QR codes are like UPC codes, but on steroids (learn more). 

Google has been experimenting with QR codes by linking them to Google Maps listings, and you’ll notice people posting their QR codes on their Yelp listings lately too. Supposedly, Facebook is even tinkering with giving people QR codes for their profiles.

Reading this TC article about Google’s QR codes got us thinking about how a store owner could use them to get mobile-savvy customers (pretty much everyone now?) to subscribe to their email marketing lists.

Here’s one way you could use them, but I’m sure you can think of more…

 

1) Go to your MailChimp account, and find the URL for your signup form. For example, the URL for my own signup form is here.

2) Now I’ll take that URL, and generate a QR code. There are lots of free services out there that’ll generate the code.

My lazy Googling took me to kaywa:

Next, you just plug in your signup form’s URL, hit “generate,” and you’ve got your QR code image.

3) Now, you can print your image, and hang it on your door.

I actually took mine and sprinkled some monkey on it (obviously):

before posting to our door:

I figure putting it way down in the corner will make it more noticeable, since we’re all sick of ads pointed directly at our face.

You might customize your sign with details about the list. “Sign up for weekly e-coupons” or “get our monthly-ish newsletter” or “get event updates.”

Now what?

Anyone with an iPhone, Android or whatever smart phone with a QR scanner app can now subscribe to my email list.

On my iPhone, I’ve downloaded an app called Quickmark:

 

Yes, I realize all my other apps are kids games. Leave me alone.

When I scan that code, it recognizes that it’s a URL:

 

which is clickable, and takes me to my email signup form:

 

Now that you have an idea of how this can work, you can do unique stuff, like:

• Setup a special list, just for people who subscribed via QR code. You know they’re probably early adopters (for now), so maybe you should customize your list’s welcome email to include something very unique to them. Maybe even another QR code?
• Maybe you want to just subscribe people to your master list, but track the fact that they subscribed via QR code. If you have a “how’d you hear about us?” field, maybe you can use this tutorial to pre-fill that field with “cool sticker on door”
• You could subscribe people to a fun autoresponder sequence, where they get some random trivia about your business, or tips/advice from your employees, every couple weeks. Advice: if you’re going to automate emails, make sure you tell people on the print out. Like, “Get our secret weekly specials”
• Add a giant QR code to the last slide of your powerpoint presentations (you’ll get some subscribers, but more importantly, look super nerdy-cool)

Note that the kaywa site has other options you can play with. For example, you don’t have to make the QR code point to a URL or signup form. You can make it output text, too (up to 250 chars). Maybe you can come up with a secret passphrase that gives people a discount at the register?

 

QR codes aren’t totally mainstream yet, so they’re kinda secret and exclusive. After I posted our little door sign, I got to work writing this blog post. A few minutes into it, one of my co-workers knocked on my door, iPhone in hand, talking about how cool it was. Take advantage of this mystery while it lasts! I’m sure you can come up with more creative plays on QR codes than me. If so, be nice and share in the comments below!