demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter.

featured articles

popular favourites

HTML5 Shortcuts

is somewhat looser in its requirements for markup compared to , allowing a number of shortcuts:

  • Tags can be written uppercase, lowercase, or in mIxEd case.

  • You can drop a lot of closing tags: </li>, </dt>, </dd>, </tr>, </th>, </td>, </thead>, </tfoot>, </tbody>, </option>, </optgroup>, </p> (in most cases), </head>, </body> and </html> not required.

  • Attribute values only need to be quoted if they contain spaces or some non-alphanumeric characters (such as a question mark). So <div id=wrapper> is legitimate, as is <img src=assets/images/falls.jpg …> but <img alt=Angel Falls …> is not.

  • No type attribute is required on scripts or stylesheets: a link to a file can be written as <link rel=stylesheet href=styles.css>

  • You can eliminate http: at the start of links. <a href="http://www.example.com/index.html"> becomes <a href=//example.com> (This is not specific to HTML5, but it is fun all the same, so long as you keep in mind the limitation that Barney points out in the comments below).

You will see these shortcuts used in some code examples on this blog in order to save space. If is new to you I strongly suggest that you stick to the basic rules for writing HTML code. (Your web page will continue to work fine, and the code will likely be easier for you to read). Once you’re familiar with HTML, you can start to introduce exceptions. You’ll also find that many text editors and IDEs, such as will fight any attempts at shortcuts, automatically closing tags unless you change their preference settings.

You must be signed up in order to leave comments.

>> You can eliminate http: at the start of links.

Not true. If the page in question is on an http page and the link destination is http, that's fine. If you're on https and seeking https, the same is true. Ditto for pages with link on the local filesystem. Basically if the link is to a resource on the same protocol, you're fine. But if the link is from a secure site, like Gmail, Facebook or Twitter, and attempts to link to your blog with href="//demosthenes.info/blog/, then it will assume https and fail to resolve.

This is the same logic that's often used with local links, like the search form on this site: action="/search.php". The beginning slash indicates that the host should remain the same, but the rest change. However if I put that same code on my site it would resolve to mydomain.com/search.php. The point is it's context sensitive.

posted by barney

Dudley StoreyQuite true, and a well-made point, Barney: thank you. My assumption is that most developers reading this blog will not be dealing with building https:// sites, but I should have noted that potential quirk.

posted by Dudley Storey

web developer guide

featured comment

by Aisling Brock in New Business Card Design

what i'm reading

A Feast for Crows: A Song of Ice and Fire: Book Four
A Feast for Crows: A Song of Ice and Fire: Book Four

what i'm watching

Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]
Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]

what i'm playing

Borderlands
Borderlands

what i'm hearing

Planets
Planets

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.