History of HTML
There never was an HTML 1. The first version was HTML 2 in November 1995. HTML 3.2 in January 1997, HTML 4 in December 1997, HTML 4.2 in December 1999. XHTML 1.0 in January 2000, XHTML 1.1 was problematic because it must be served as mime-type: application/xml in May 2001. XHTML 2.0 never happened (it was going to deprecate the img element at one point), because there was a disparity between reality and what W3C wanted the web to be. Internet Explorer 9 to feature support for XHTML 1.1, “that’s so cute.” Plucky rebels from WHAT-WG put forward proposal to use existing XTHML with new features, W3C disagreed. WHAT-WG initially worked on Web Applications 1.0 & Web Forms 2.0, eventually the two merged into HTML5, the lack of space between HTML and number 5 is intentional, this is not a new version of HTML. In October 2006, Tim Berners-Lee finally realized HTML5 was the way of the future, got W3C HTML Working Group to agree. WHAT-WG still exists and specifications are slightly different, occasionally they are ported to W3C. January 2008, HTML 5. Timeline: HTML5 Candidate Recommendation in 2012.
The web standards process is a lot like sausages, they taste good, but you don’t want to see how they’re made. -Jeremy Keith
The dates are only of interest to the standards body. We don’t wait until a spec is complete to start using it. We use it when browsers support it.
HTML5 design principles value users over authors (us) over implementors over specifiers over theoretical purity. Pave the cowpaths based on what people want and what people need & evolution not revolution (backward compatibility). Standards and working groups will often pay more attention when they see working code with theory behind it.
Doctype & Character Encoding for HTML5
Doctype for HTML5 (authors first) - <!DOCTYPE html> - *applause* - doctype is only needed/intended for document validation. This will trigger standards mode, if you’re using quirks mode, don’t use this.
Character encoding for HTML5 - <meta charset=”utf-8″>
HTML5 must be served using the text/html MIME type.
Syntax, you don’t have to close li, img and certain other tags *yikes*. Attributes don’t need quotation marks *nooo!*. We need a lint tool for HTML5.
Error handling, HTML5 is the first time this has been approached in specifications. Currently browsers reverse engineer from expected behavior & copy each other. This is one of the most ambitious parts of HTML5, all of the browser makers want it, but it’s not something authors (we) need to worry about.
HTML5 Introduces Rich Media Elements
Audio <audio src=”song.mp3″ controls preload><!– fallback content–></audio>
Fallback content isn’t the same as accessibility content. In the example above, you could have a Flash fallback, a fallback linking to mp3 on page. Control elements can’t be styled, however you can use buttons & JavaScript to style.
Video <video controls width=”200″ height=”200″><source type=”video/ogg” src=”movie.ogg”><source type=”video/mp4″ src=”movie.mp4″><!– fallback content –></video>
“Patents are the root of a lot of pain in the ass.” -Jeremy Keith
Different browsers support different file-types. Firefox doesn’t currently support MP3, but does support Flash. Browser will interpret the first one it supports, list your preferred format first. Important to note, these are HTML elements and can be styled using CSS. Example: HTML video player.
Canvas <canvas> and JavaScript for drawing on the screen. Example: Canvas & jQuery.
Forms
“For accessibility, a native control will almost always be better than a scripted, emulated control.” -Jeremy Keith
New input types – input type=”…”
tel, email, url, datetime, date, month, week, time, number, range, color, datalist, placeholder, autofocus, required
Styling – can be styled as other input elements, but date picker and browswer native styles cannot be styled. Browsers will display differently, in the future browsers may compete for best looking native styles.
“Chrome is a pile of shit when it comes to accessibility” -Jeremy Keith
Semantics in HTML5
Deprecated is deprecated. Items have now been “removed” from HTML5.
Removed from HTML5
- Presentational elements: font, big, center, etc.
- Presentational attributes: border, bgcolor, etc.
- frame, frameset, noframes, acronym, axis, summary (tbd)
Changed in HTML5
- a may be wrapped around entire paragraphs, lists, tables, entire sections as long as no interactive content within.
- b changed to a span of text to be stylistically offset from normal prose without conveying extra importance.
- i changed to span of text to be stylistically offset without conveying extra importance.
- hr a paragraph-level semantic break.
- small for small print
Extensibility
Semantics in HTML5 – A List Apart, John Allsop
Structure in HTML5
New elements
mark, time, nav, article, section, aside, header, hgroup, footer, details, figure
- List and definition of new HTML5 elements – W3C Working Group
- List of HTML elements – w3schools.com
With sections, you’re creating mini-documents. Even if you’re not ready to use elements, begin using semantics (class names) to transition new elements now. At the very least, you can also change your doctype and use ARIA roles, change doctype, class names and ARIA roles or if you’re feeling really brave doctype, new elements and ARIA roles.
Creating an outline
…
Sectioning roots
…
Scoping styles
…
ARIA roles
…