Force a Download with HTML5

HTML5 is the greatest version of HTML ever! (Well, at least until the next awesome version comes out). I just learned how trivially easy it is to force downloads with HTML5.

I was just trying to force a download of a PDF file because the customers need to sign it and send it back and it’s harder to do that online. I was going to use JavaScript, but decided that I’d do a quick search in case there was a better way.

Forcing Downloads is Easy—HTML5 to the Rescue!

Not only is there a better way, but it’s trivially easy to implement. I just add the keyword download to my anchor and BAM! the browser will pop a dialog box. I haven’t tested it in a lot of browsers (or devices), but it’s still huge! I mean, as a fallback I can attach a download function only to links that have the download keyword in them.

Now my download links look like this:

I’m practically crying, I love HTML5 so much!!!

A Busy Week

I spent the last week working on two projects: the “Learning HTML and CSS Livelessons” and editing the Sams Teach Yourself Bootstrap in 24 Hours book.

It was both one of the most fun weeks I’ve ever spent and also one of the scariest (at least at first). I have never been in front of a camera before, and I spent 6-8 hours a day on Monday through Wednesday right there. Luckily Pete and his dog Shorty were there to put me at ease. It ended up being a lot of fun.

Now, of course, I have a bunch more work to both catch up from being gone for several days and some update work to get the website ready for the videos. This LiveLessons series is intended to help people learn enough HTML and CSS to get a website up and running and looking good. I’m hoping that if this project does well, I can do another on something like CSS to go into more depth on how to use CSS and style really fancy pages.

Sams Teach Yourself Bootstrap in 24 Hours
Sams Teach Yourself Bootstrap in 24 Hours

And I also got the first 50% of the technical and copy edits for the Bootstrap book. And I got the second 50% right after I got back. I’m hoping the second half is fairly error free (as far as we have found) like the first half. And as always, any errors that make it into the final book are my fault not my copy editor or tech editor (thanks Jon!)

One of the biggest challenges of writing a book about Bootstrap is that I find myself wanting to convert every site I look at to Bootstrap. I finally upgraded this site to Bootstrap just this week. And I’ve converted a couple of other sites I manage as well. But let me tell you, even as the author of the book, my clients don’t all want to do a huge redesign just because Bootstrap rocks. Oh well, their loss.

What’s Next?

My next project is finishing up a book on web publishing. That should be fun, and hopefully pretty quick. After that, who knows? If you have any ideas, let me know!


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

HTML5 Allows Tables for Layout

If Someone Tells You That is Invalid, They are Incorrect

I’ve been writing HTML since 1995, and in that time various techniques and tools have come in and out of style. But one that has been especially troublesome is the idea of using tables for web page layout.

Back in the late 1990s, there weren’t a lot of ways to lay out your web designs. You could use the single-pixel GIF trick to add spaces, and you could ignore layout and hope the browser displayed your content in a legible way. So when tables became available in HTML, many designers (including myself) leapt upon them as a gift from the heavens. Finally there was a way to create layouts with fixed widths, specific placement of elements, and more. Web page editors made them really easy to create—even if you used tons of embedded tables to get exactly the look you wanted.

Soon, nearly every web page with any attempt at design was built with a <table>.

But HTML4 came out and said:

“Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.”

http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html

And nearly every web designer who used tables for layout let out a scream of frustration. While I believe that CSS isn’t terribly hard to learn, many people have found it very difficult. And layout is particularly challenging. But for several years, we struggled and strained to learn CSS for layout and stop using tables for that purpose.

HTML5 Changed the Rules

According to the HTML5 specification, while tables for layout is not recommended, it is a valid way to design web pages. You just have to make sure that you indicate that the table is a “presentation” table, not a data table. Specifically:

“If a table is to be used for layout it must be marked with the attribute role=”presentation” for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.”

http://www.w3.org/TR/html5/tabular-data.html#the-table-element

How to Use a Table for Layout in HTML5

In order to indicate that your tables are layout or presentation tables, rather than data tables, you can add one of two attributes:

  • role="presentation"This is the most compliant method, and is what the W3C recommends. But it requires that you change every web page you have written to include this attribute.
  • border="0"This attribute also indicates that the table is a presentation table, because most data tables include borders. Plus, most layout tables do not use borders, so you shouldn’t have to change anything on your pages.

There are other ways to indicate a presentation or data table:

Table FeatureType of Table
<table role="presentation">Presentation
<table border="0">Presentation
<table cellpadding="0">Presentation
<table cellspacing="0">Presentation
Use of the CAPTION, THEAD, or TH elementsData
Use of the headers and scope attributes on the TH elementData
<table border="">Data
<table border="1">Data
Visible borders set with CSSData

I Don’t Recommend Tables for Layout

Tables cause problems for web pages. They can be slower to load. They can be difficult for search engines to parse. And they mix the content and design, which is more effective when it’s separated.

I would recommend using tables for layout for your older pages, but as you redesign and rework pages, you should consider converting to CSS layout.

What’s new in HTML5 from HTML4? Make the Switch!

One of the most common questions I get asked about HTML, and HTML5 in particular, is “Should I use HTML5 or not?” Find out why you should make the switch from HTML4 to HTML5.

My answer to the question “Should I use HTML5 or not?” is always “Yes!” HTML5 is the current standard for web page designs, and all modern web browsers and editors support it. In fact, even if you’re using an older editor like FrontPage, you can modify your designs to use HTML5 by changing the doctype.

What are the Advantages to Using HTML5?

HTML5 is the standard, having replaced HTML 4.01. And many modern devices like iPhones and iPads are optimized for HTML5. Some of the differences from HTML4 include:

  • new elements or tags
  • changes to a few existing tags
  • addition of a tag removed from in HTML 4
  • a new doctype

But the number one thing you should remember about HTML5 is: it’s backwards compatible. In fact, if all you do is add the <!doctype html> to the top of your HTML 4.01 document (removing any old <!doctype> tags), you’ll be fine. Your HTML will have been switched to HTML5. It’s that easy!

The New HTML5 Elements

There are a bunch of new elements (often called tags) in HTML5:

New HTML5 Attributes

Along with all the new elements there are a bunch of new attributes.

The HTML <input type="text" /> element has a bunch of new attributes to define different input types. I strongly recommend you start using these immediately.

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

There are now a bunch of global attributes that can be added to every element:

  • accesskey
  • aria-*
  • class
  • contenteditable
  • contextmenu
  • data-*
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • lang
  • onevent (these are various event handlers like onmouseover and onplay)
  • role
  • spellcheck
  • style
  • tabindex
  • title
  • translate

There are also a bunch of new attributes added to specific elements to make them more functional.

Element(s)New Attribute
<a>
<area>
download
ping
<area>hreflang
type
rel
<base>target
<meta>charset
<table>sortable
<th>sorted
<input>
<select>
<textarea>
<button>
autofocus
<input>
<textarea>
dirname
inputmode
placeholder
<input>
<output>
<select>
<textarea>
<button>
<label>
<object>
<fieldset>
required
<fieldset>disabled
<input>autocomplete
height
list
min
max
multiple
pattern
step
width
<textarea>maxlength
wrap
<form>novalidate
<input>
<button>
formaction
formenctype
formmethod
formnovalidate
formtarget
<menu>type
label
<button>menu
<style>scoped
<script>async
crossorigin
<html>manifest
<link>crossorigin
sizes
<ol>reversed
<iframe>sandbox
seamless
srcdoc
<object>typemustmatch
<img>crossorigin
srcset

Obsolete Elements

One new feature of HTML5 is when elements are no longer used, they are marked obsolete. That means that browser makers can continue to support any of these elements and web designers who use them don’t need to go through their code to remove them. But best practices recommend that you should stop using these obsolete elements as there are better choices available in HTML5.

Obsolete ElementReplaced By
<basefont>
<big>
<center>
<font>
<strike>
<tt>
CSS
<frame>
<frameset>
<noframes>
Nothing, they damage usability and accessibility. Use <iframe> if you must have frames.
<acronym><abbr>
<appet><object>
<isindex>form controls
<dir><ul>
<noscript>Only conforming in HTML5, not XHTML5

New APIs in HTML5

One of the best parts of HTML5 are the new application programming interfaces or APIs. These are commands and scripts that give you more control over your HTML5 documents and let them look and act like an application and not just a web page.

The new APIs are:

  • Media APIs for video and audio playback
  • Constraint validation
  • User commands
  • Offline web applications
  • Web application registration for media types
  • Contenteditable
  • Drag and drop
  • URL History and location
  • Base64 conversion
  • Timer-based callbacks
  • Prompts
  • Printing
  • Handling search providers
  • A defined Window object
  • Microdata
  • Bitmap graphics
  • Cross-document and channel messaging
  • Run scripts in the background
  • Client-side storage
  • Bidirectional client-server communication
  • Server-to-client data push

HTML5 is Better for Web Pages

As you can see, while there are a lot of exciting new features to HTML5, there are none that are required in order to use it. In fact, it’s easy to just get started today with the doctype and then add new features as you learn them and become more comfortable with them.

It’s a good idea to start using HTML5, if you haven’t already, because it gives you more features and controls for your web designs. Plus with more and more people using mobile devices that are optimized for HTML5, you can ensure you aren’t losing your audience.

Still Here, but Busy

Some people have wondered if I’m still around or maintaining this site (and the book) and I am, I’ve just been fairly busy. I hope to announce some exciting new things in the coming months, but in the meantime I can’t post as often.

If you want to learn HTML, my book is a great place to start, and you can also get help on my site at About.com: Web Design / HTML.

Latest Zeen issue is now live

Teach Yourself HTML5 Zeen - Issue #2
Teach Yourself HTML5 Zeen – Issue #2

I’ve posted the second issue of my HTML5 Zeen today. There are a few things that are wonky with the issue, most notably that Zeen says it’s “Issue #3” when it’s #2. But whatever.

In this issue I show you some ways to get started with HTML5 if you haven’t already. Including the cover image which shows you the basics for what you need to write to create an HTML5 document.

Writing HTML5 is Really Easy

All it takes is a DOCYTPE:

<!doctype html>

And you’ve got an HTML5 document. One thing that most people forget is that HTML5 is not a new language. It’s evolved from HTML 4.01 and HTML 3.2 and all the versions before. So if you’re writing HTML 4.01 today, you can start writing HTML5 by just changing one line of your HTML. Don’t worry about changing anything else.

The Zeen issue goes into more detail about dealing with older browsers like IE8 and using editors like Dreamweaver to write your HTML5, but at the end of the day, just putting up the new doctype is all it takes. Poof! You are using the most up-to-date specification. That didn’t hurt a bit!

8 Ways to Get Started with HTML5 Today

HTML5 has been around for a few years now, and yet there are still a lot of people who are resistant to using it. But there are a number of aspects of HTML5 that you can start using today without any worries about compatibility whatsoever:

  • The DOCTYPE
    <!doctype html>
    This is required in order to write HTML5, but it also won’t hurt your site even in older browsers. Browsers that don’t necessarily recognize the doctype will still display the page correctly — they’ll just use quirks mode.
  • The shortened meta character set
    <meta charset="utf-8">
    This was implemented in HTML5 because every browser out there defines the character set from this tag. And the browsers implemented it because web designers were doing it by mistake.
  • Remove the type from SCRIPT and STYLE elements
    <script src=""></script>
    <style></style>

    In HTML 4 it was required that you use the type attribute to define scripts and styles. But as long as your style sheets are using CSS and your scripts are using JavaScript (ECMAScript), you can leave off the type designation and they will work without any issues.
  • Sectioning elements
    <section>, <article>, <aside>, <header>, <footer>, <nav>, and so on
    You can add the sectioning elements into your existing HTML and they won’t change the way the page looks at all. Browsers that don’t recognize them will ignore them, and browsers that do will add that semantic information to the site.
  • Other semantic elements
    <mark> and <time>
    Like  sectioning elements, these add semantic information to the content, but browsers that don’t recognize these elements will simply ignore them.
  • Use the id attribute instead of name
    While both attributes are valid in certain situations, you can use the id attribute to create anchors within your text. This isn’t an HTML5 specific change, but all modern browsers support linking to an ID with the pound-sign (#), for example:
    <h1 id="headline1">
    <a href="#headline1">
  • Use placeholder links
    <a>placeholder link</a>
    A placeholder link is just a link that doesn’t have an href attribute. They are another item that most web designers have used at one time or another, and now with HTML5 they are valid.
  • Use the new INPUT types in your forms
    When you use an input type of email on your email input fields, browsers that support it will validate that the data looks like an email address. And browsers that don’t support it will simply ignore the type and treat it as a text box.

 

Blink and you missed it. TIME element back in the HTML5 spec

After a large uproar by designers and developers last week when they removed the HTML5 TIME element, the W3C recanted and put it back in the spec. So you don’t have to replace TIME with DATA, but you can if you want to.

This corrects last week’s errata post. The book still contains the TIME element, but does not contain the DATA element.

What’s really great is that this shows that the W3C is listening to us. So if there is some other problem with the HTML5 spec, don’t be shy—let them know. If enough agree, your change may happen!

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.