HTML5, a 3 minute guide
secretGeek .:dot Nuts about dot Net:.
home .: about .: sign up .: sitemap .: secretGeek RSS

HTML5, a 3 minute guide

Mark Pilgrim (one of the internet's colourful characters) is writing a book on HTML5.

Chapter 3 is a great read but at forty pages it's too long for a busy and important person like you to follow along. So I'm gonna summarise (brutally), for your benefit.

Mark shows us before and after version of a document: it starts off using pre-existing HTML features, and he carefully simplifies the document (and expands it) with all the goodness that HTML5 provides.

The two following images show the resulting 'diff', as seen by SourceGear's DiffMerge tool.

before and after, first half
before and after, second half

Here's my very poor and half-baked summary of the diff:

  1. You don't need quotes around attributes (unless there's spaces in the attribute, and then you do) *
  2. You don't need closing tags in redundant situations (e.g. 'tr','p') *
  3. Less "DIV"itis due to new and meaningful elements:
    <header>
    ...where you might've said <div id='header'> previously
    <hgroup>
    ...to tie a bunch of headings together, where they don't create subsections
    <nav>
    ...where you might've said <div id='navigation'> previously
    <article>
    ...to denote standalone pieces that can be extracted and read on their own (perhaps the <div id='content'> of your document)
    <aside>
    ...to denote diversions from your text that aren't part of an article itself (for example, pull quotes)
    <time>
    ...for text that indicates a time, this has a machine readable attribute, e.g. "datetime='2009-10-29'"
    <footer>
    ...where you might've said <div id='footer'> previously

* So this is not XHTML, it's not even XML. You can write it as valid XML if you're that way inclined -- but you don't have to. It's HTML. It doesn't have to pretend to be something it's not. That's cool. That's the bit I like best.


Some other Mark Pilgrim links, in case you don't know of him:





'Omer van Kloeten' on Thu, 29 Oct 2009 10:42:05 GMT, sez:

Nice! Thank you :)



'tarnacious' on Thu, 29 Oct 2009 10:53:24 GMT, sez:

The <--[if IE]> doesn't get a mention?



'John' on Thu, 29 Oct 2009 16:54:13 GMT, sez:

Ugh! Allowing a document that's not valid XML to be valid HTML is a HUGE step backwards. And it makes life harder for everyone except the people that are too lazy to care anyway.



'lb' on Thu, 29 Oct 2009 20:46:00 GMT, sez:

@Tarn:
>The <--[if IE]> doesn't get a mention?

So the purpose of that is to allow new HTML5 tags to be styled correctly in browsers that don't know about HTML5.

It means that the unknown elements will be placed into the correct place in the DOM, and will respect the CSS that is applied to them.

(Mr Pilgrim covers it in great depth)



'Braden' on Thu, 29 Oct 2009 20:51:04 GMT, sez:

Agreed with John--although browsers should consume non-XML HTML, authors shouldn't produce it. It's trivially easy to make HTML valid XML, and it makes it much easier to consume if you don't have to know when a tag should be auto-closed.



'lb' on Thu, 29 Oct 2009 22:08:38 GMT, sez:

@John
>Allowing a document that's not valid XML
>to be valid HTML is a HUGE step backwards

C'mon. This isn't new to Html5, it's how Html has always been.






'klooog' on Fri, 30 Oct 2009 07:44:17 GMT, sez:

Making quotes aroud attributes optional is about worst thing they could come up with. It will introduce huge interoperability problems.



'ferael' on Fri, 30 Oct 2009 08:06:03 GMT, sez:

@John Welcome SGML, the _real_ HTML backend.



'googly' on Fri, 30 Oct 2009 19:58:15 GMT, sez:

Indeed. That's why this is HTML5 and not XHTML 2.0.



'rtpHarry' on Sat, 31 Oct 2009 18:00:45 GMT, sez:

Yeah this doesn't sound too great. it sounds like its going to make things really hard to process. continuation of browser inconsistencies anyone?



'Seoki' on Sat, 06 Nov 2010 03:25:56 GMT, sez:

Great! Thanks you so much!




name


website (optional)


enter the word:
 

comment (HTML not allowed)


All viewpoints welcome. Incivility is not tolerated, such comments are deleted.

 

I'm the co-author of TimeSnapper, a life analysis system that stores and plays-back your computer use. It makes timesheet recording a breeze, helps you recover lost work and shows you how to sharpen your act.

 

NimbleText - FREE text manipulation and data extraction

NimbleText is a Powerful FREE Tool

I wrote this, and use it every day for:

  • extracting data from text
  • manipulating text
  • generating code

It makes you look awesome. You should use NimbleText, you handsome devil!

 

Articles

The Canine Pyramid The Canine Pyramid
Humans: A Tragedy. Humans: A Tragedy.
ACK! ACK!
OfficeQuest... Gamification for the Office Suite OfficeQuest... Gamification for the Office Suite
New product launch: NimbleSET New product launch: NimbleSET
Programming The Robot from Diary of a Wimpy Kid Programming The Robot from Diary of a Wimpy Kid
Happy new year 2014 Happy new year 2014
Downtime as a service Downtime as a service
The Shape of Your Irrationality The Shape of Your Irrationality
This is why I don't go to nice restaurants any more. This is why I don't go to nice restaurants any more.
A flowchart of what programmers do at work all day A flowchart of what programmers do at work all day
The Telepresent Man. The Telepresent Man.
Interview with an Ex-Microsoftie. Interview with an Ex-Microsoftie.
CRUMBS! Commandline navigation tool for Powershell CRUMBS! Commandline navigation tool for Powershell
Little tool for making Amazon affiliate links Little tool for making Amazon affiliate links
Extracting a Trello board as markdown Extracting a Trello board as markdown
hgs: Manage Lots of Mercurial Projects Simultaneously hgs: Manage Lots of Mercurial Projects Simultaneously
You Must Get It! You Must Get It!
AddDays: A Very Simple Date Calculator AddDays: A Very Simple Date Calculator
Google caught in a lie. Google caught in a lie.
NimbleText 2.0: More Than Twice The Price! NimbleText 2.0: More Than Twice The Price!
A Computer Simulation of Creative Work, or 'How To Get Nothing Done' A Computer Simulation of Creative Work, or 'How To Get Nothing Done'
NimbleText 1.9 -- BoomTown! NimbleText 1.9 -- BoomTown!
Line Endings. Line Endings.
**This** is how you pivot **This** is how you pivot
Art of the command-line helper Art of the command-line helper
Go and read a book. Go and read a book.
Slurp up mega-traffic by writing scalable, timeless search-bait Slurp up mega-traffic by writing scalable, timeless search-bait
Do *NOT* try this Hacking Script at home Do *NOT* try this Hacking Script at home
The 'Should I automate it?' Calculator The 'Should I automate it?' Calculator

Archives Complete secretGeek Archives

TimeSnapper -- Automated Screenshot Journal TimeSnapper: automatic screenshot journal

25 steps for building a Micro-ISV 25 steps for building a Micro-ISV
3 minute guides -- babysteps in new technologies: powershell, JSON, watir, F# 3 Minute Guide Series
Universal Troubleshooting checklist Universal Troubleshooting Checklist
Top 10 SecretGeek articles Top 10 SecretGeek articles
ShinyPower (help with Powershell) ShinyPower
Now at CodePlex

Realtime CSS Editor, in a browser RealTime Online CSS Editor
Gradient Maker -- a tool for making background images that blend from one colour to another. Forget photoshop, this is the bomb. Gradient Maker



[powered by Google] 

How to be depressed How to be depressed
You are not inadequate.



Recommended Reading


the little schemer


The Best Software Writing I
The Business Of Software (Eric Sink)

Recommended blogs

Jeff Atwood
Joseph Cooney
Phil Haack
Scott Hanselman
Julia Lerman
Rhys Parry
Joel Pobar
OJ Reeves
Eric Sink

InfoText - amazing search for SharePoint
LogEnvy - event logs made sexy
Computer, Unlocked. A rapid computer customization resource
Aussie Bushwalking
BrisParks :: best parks for kids in brisbane
PhysioTec, Brisbane Specialist Physiotherapy & Pilates
 
home .: about .: sign up .: sitemap .: secretGeek RSS .: © Leon Bambrick 2006 .: privacy

home .: about .: sign up .: sitemap .: RSS .: © Leon Bambrick 2006 .: privacy