The purpose of this page is to serve as my quick reference sheet for all things HTML5. It will grow -- or, at least, change -- as I find the need for more or fewer articles. My goal is to keep the information short and basic.
You can't really talk about HTML5 without making quick and frequent associations to CSS3. The two languages are as intimately connected as two halves of a brain. The connection between HTML previous to version 5 and CSS has always been close, but HTML5 / CSS3 brings the relationship to a new level.
The first thing you'll always hear about APIs is that they're not technically part of HTML5 or CSS3, but doesn't that constant connection say a lot about it being exactly that. Screw definitions. If it's part of everything you'll be doing, noting any separation between the technologies will only help you on Jeopardy.
Here are the bits about APIs, however they're grouped:
First -- and breathe this in -- this is the HTML5 DOCTYPE.
<!DOCTYPE HTML5>
Is there a need for declaring additional DOCTYPEs? No. Will older browsers understand this comically simple DOCTYPE? Yes. That's it.
Second, it's likely you'll want your page to look good no matter what device you're viewing it on. Pop this code into the <head> and modify the parameters to specify which style sheet you want to use under which conditions:
<link href="phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width:0px) and (max-width:320px)" >
<link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)" >
<link href="main.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)" >
There are a number of other ways you can specify which style sheet is served up, such as device orientation, but this is the common setup.
Third -- and this is not optional -- pop this just before the </head> tag:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
This snippet, called the "HTML5 Shiv" will tell every brain-damaged version of IE before 9 not to get scared, that the code they're about to encounter is their friend. The remaining complications are cleared up in the fancy jazz you'll put at the top of your CSS file.
You'll be structuring your HTML5 documents in a much different way. You'll be using an outline something like this. Note all the new elements. Most should make sense just by looking at them:
<section>
<h1>Section header, an h1</h1>
<section>
<h1>First subsection header. Also h1</h1>
<p>The paragraph you've begun knows, without a </p>, that it's ended.
</section>
<section>
<h1>Whoa, another h1?</h1>
<p>Yes, headers should be considered semantically, in relation to their containing section or article or aside.
</section>
<aside>
<p>This is an <aside>. It's something that can add to a section or article, but could be left out without harming the integrity of said section or article.
</aside>
</section>
<footer>
<p>This has been a FANCY CRAP production.
</footer>
Note a couple things:
Again, all the complications are cleared up in the fancy jazz you'll put at the top of your CSS file.
Since CSS3 is so integrated with HTML5, it's a good practice to start your style sheet by resetting all the elements you're likely to use in a document.
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video {
margin: 0;
padding: 0;
border: 0;
}
And it's more than a good idea to include the next snippet in your style sheets. It is the wonderful magic code that tells older, dumber browsers what the heck to do with all the crazy new elements you're throwing at it:
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
display: block;
}
It's enough to know that there are linear and radial gradients, they're (oddly, imho) treated as aspects of the background-image attribute and that the closest thing to supported W3C standard code are:
For linear gradients
background-image: linear-gradient(left, #444444, #999999);
For radial gradients
background-image: radial-gradient(left center, circle cover, #444444 0%,#ff0000 100%);
HOWEVER...As of this writing, support is shaky enough that you're wise to head to click one of the links below and use the tools there to have the code for all the caveats written for you.
This wonderful CSS nugget (see this section headline above) is applied a bit differently from other features. In your css file, add this syntax:
@font-face {
font-family: 'NameYouGiveYourFont';
src: url('fonts/yourfontsactualname.eot');
src: url('fonts/helveticaneueltstd-cn-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/fonts/helveticaneueltstd-cn-webfont.woff') format('woff'),
url('fonts/helveticaneueltstd-cn-webfont.ttf') format('truetype'),
url('fonts/helveticaneueltstd-cn-webfont.svg#NameYouGiveYourFont') format('svg');
font-weight: normal;
font-style: normal;
}
What that's doing is making about any font face you desire available for use in your designs. Again, you have to add code to accommodate all the browsers. The first two src lines are comical. One instructs early versions of IE how to display the fonts and the other corrects the error caused by newer versions of IE when it perofrms that check. Thanks IE. So, in all, you must include four fonts types: eot, woff, ttf and svg.
And who, you ask, has all those versions of all -- hell, any -- of those fonts? No one. Right. That's where helpful services like www.fontsquirrel.com, a free, online font conversion service comes in. Upload any* font and fontsquirrel.com will convert it into all of those formats and wrap them up with helpful instructions, demos and even the css itself. All you have to do is place the fonts in a directory and change the paths in the css.
Alternate Method: Going Google
Google -- no surprise -- has made using alternate fonts pretty easy as well. Here, they show you how to pull off the bit below. BTW...two lines of code, and if you don't add the style inline, a css style:
Google Font API rocks!
*Keep in mind that the use of some fonts is limited by copyright. As far-fetched as it sounds that anybody
There are box and text shadows, each treated similarly code-wise; however, a box will shadow the border at its enclosing border rather than at the transparent image it encloses, like a logo.png.
Box shadow (shown on this section). Include proprietary prefixes. Then add horiz & vert offset, shadow spread & color:
-moz-box-shadow: 5px 5px 7px #888;
-webkit-box-shadow: 5px 5px 7px #888;
For the headline of this article, I stacked three comma delimited shadows. As with box shadows, you have horizontal and vertical offsets followed by shadow spread and shadow color. Shadows appear front to back in the order they're written in the code, so first we see the white solid line (code-wise, still considered a shadow):
text-shadow: -1px 1px 1px #FFF, 0px -11px 10px #C60, 0px -3px 9px #FF0;
To achieve multiple columns, you're about as well-off as you are with rounded corners. If you're okay with leaving the IE dinosaurs behind, just make sure their inability to see the columns doesn't damage the look or functionality of the site too much, add some vendor-specific code and you're off to the races. In most cases, multiple columns will only aid reading if you can see it, but it's leaves sites perfectly legible if in an old-school way, if you can't.
.multi {
-webkit-columns: 2 9em;
-moz-column-count: 2;
-moz-column-width: 9em;
columns: 2 9em;
-webkit-column-gap: 15px;
-moz-column-gap: 15px;
column-gap: 15px;
-webkit-column-rule: 1px solid #CCC;
-moz-column-rule: 1px solid #CCC;
column-rule: 1px solid #CCC;
}
You choose the number of columns, their minimum width (in ems, preferably to accommodate different font sizes) how far each of them should be separated and the presence and nature of the rule between the columns.
You can combine the properties for most parts, but note that Mozilla does require that column-count and column-width be on separate lines. You can also add column breaks and span mutliple columns (think table cells) but these are presently unpredictable and probably best left avoided.
Rounded corners are fairly well supported and free of the need of work-arounds so common to many of the newer, cool CSS features, but you should still add vendor-specific code for the time being. The following code should get you going in most cases.
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
This is the code used for this section. Note all of them are rounded but this one is twice as rounded.
However, when you combine borders with a border-radius in Safari, the background sort of shows through. If it matters to your design -- say you have a dark background and a light border, you get a corner that looks badly pixelated. Here's the solution from Mike Harding:
-webkit-background-clip: padding-box;
Cake. Yay.
Translation: moving an element horizontally &/or vertically
Scaling: making an element larger or smaller
Rotation: spinning an element
Skewing: ...skewing. Like porn: you know it when you see it.
The headline for this article has been tranlated, scaled up and rotated according the following code:
h1:hover span {
color: #484848;
-webkit-transform:rotate(10deg) translateX(40px) scale(1.5);
-moz-transform:rotate(10deg) translateX(40px) scale(1.5);
-ms-transform:rotate(10deg) translateX(40px) scale(1.5);
-o-transform:rotate(10deg) translateX(40px) scale(1.5);
transform:rotate(10deg) translateX(40px) scale(1.5);
}
Transition is the changing of a visual element over time. Hover over the headline. I defined letter-spacing and color to change over 1.2 seconds -- long enough to see that there's movement taking place.
To set transitions, you must define:
Here's the code:
h1 span {
letter-spacing:0px;
color:#362d1a;
transition: letter-spacing 1.2s, color 1.2s;
-moz-transition: letter-spacing 1.2s, color 2s, -moz-transform 2s;
-webkit-transition: width 1.2s, color 1.2s, -webkit-transform 2s;
-o-transition: letter-spacing 1.2s, color 1.2s,-o-transform 2s;
}
h1:hover span {
letter-spacing:4px;
color:#0F0;
}
The list of elements that can be affected by transition code is impressive: Background, border and box properties; and font-size and font-weight but not font-family. But, like with so much of CSS now, support is uneven, so don't make its application a necessary part of viewing the site, but an additive.
When placing video, like the one above, into an HTML5 page, technically you only need the following code:
<video src="example.webm"></video>
However, you'll need to add a bit more code:
<video width="400" height="236" controls preload="false">
<source src="video/110720_i_parkWalk400w.m4v" type="video/mp4" />
<source src="video/110720_i_parkWalk400w.ogv" type="video/ogg" />
</video>
You see the sizing and the Boolean for preload, but the bulk of the extra code is necessary because a] as of this writing, IE is retarded, only reading the first <source> in a series, and; b] different browsers suport different video formats for various reasons I won't go into. There's less reason now for inclusion of player code (like Flash) but it's still a good idea to include it as a backup.
Text description to come.