digg

Facebook Connect Join Digg About

Coding A HTML 5 Layout From Scratch

smashingmagazine.com — In this tutorial we're going to experiment with CSS3 and HTML 5 and create a beautiful CSS-based layout from scratch.

Who dugg this? Made popular Aug 4, 2009

Digg DudeWhat is Digg?

Digg is a place for people to discover and share content from anywhere on the web. Digg surfaces the best stuff as submitted and voted on by the community. Take the Tour to learn more.

48 Comments

show profanity settings
expand all
  • chadsmith729, on 08/04/2009, -1/+60This is why I ***** hate Internet Explorer (along with every other developer):
    [CODE]
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js ...
    <!--[if lte IE 7]>
    <script src="js/IE8.js" type="text/javascript"></script><![endif]-->

    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
    [/CODE]

    Look at how many hacks you had to do? Great HTML5 is coming out, but it's still going going to be the same "design for FF, Safari, Opera hack for IE" *****.

    It's a good article though, well written and shows how to use and utilize HTML5. Smashing Magazine typically does a really nice job at explaining things. Good job guys.
  • mrwright613, on 08/04/2009, -5/+34*an HTML 5 layout
  • pkfx, on 08/04/2009, -0/+17HTML starts with an "a" sound, not an "h" sound.

    āch'tē-ĕm-ĕl'

    Therefore "an" is correct. It's the pronunciation that matters, not the spelling.
  • Loonacy, on 08/04/2009, -0/+13I always pronounce it phonetically. Hutamal.
  • leader80, on 08/04/2009, -2/+13
    impressive article!
  • phpchris, on 08/04/2009, -1/+10Beacuse you're supposed to?
  • 4sak3n0ne, on 08/04/2009, -1/+9Its people like you that make me fear the future. You seem to have a tolerance for mediocrity. Quietly accepting IE's flaws will only make them less likely to fix them.
  • chadsmith729, on 08/04/2009, -0/+8Proud member of the W3C for almost 2 years, thanks. You know the governing body that DOES come up with this stuff. It's Microsoft developers inability to adhere to such standards, which makes things complicated when attempting to really organize the web into something that is not just a feature rich medium to distribute porn but to also make communication and collaboration easier throughout the world. That being a interconnected website application, social networking, or just an e-mail to your grandma which you haven't talked to in months.

    It all comes down to standards, all the other browsers seem to have got it right. Except for one. I will not stop and just let it go because one ripple multiplied but a thousands ripples becomes a wave, and the wave becomes a bigger wave, and a bigger one until eventually with IE12.0.2.5 they will finally be compliant to standards. I am sorry I reject your notion that because you have had to put up with something for so long that you should just let it go because it will never change. Everything changes.
  • atomiku, on 08/04/2009, -0/+8The conditional comments made me feel a little uncomfortable, but I guess it's gotta be done sometimes I guess. I try to avoid using them, though. Good article!
  • 0tis, on 08/04/2009, -0/+7A in this situation has become colloquially acceptable, although it is indeed still technically incorrect.

    Not really reason enough to bury a perfectly good article, though, is it?
  • bluesatin, on 08/04/2009, -0/+7I would presume it's when a word starts with a vowel sound when you speak.

    You wouldn't write 'a x-ray' it's obviously 'an x-ray'.

    I could be wrong though, it's just what I'd presume!
  • 4AntiStupid, on 08/04/2009, -1/+7And in 5 or 6 years the browsers may be caught up enough to actually use it.
  • wtfheadexplody, on 08/05/2009, -0/+6What's getting more popular lately is "Design for FF, Safari, and Opera, ***** IE!"
  • disappointed, on 08/04/2009, -1/+7Because you're better off closing tags you don't need to than not closing those tags you should. You need to be serving a lot of traffic before shaving a couple of extra bytes off your page becomes worthwhile.
  • gavroche, on 08/04/2009, -0/+5Try 8 years old!
  • rnawky, on 08/04/2009, -3/+7Not really. There's no reason people should still be using IE 6. Some people argue that they are stuck with it at work, as they are unable to update it. Well guess what, you're at work, do some god damned work.

    They're using a browser that's over 5 years old? Time to upgrade....
  • phpchris, on 08/04/2009, -0/+4While I agree with you it seems a bit much, you don't have to use the new tags. Someone will find them useful though.
  • psychotron, on 08/04/2009, -1/+5Touché. See you when IE 12 comes around.
  • 0tis, on 08/04/2009, -0/+4Well, four out of five anyways...
  • NeilM, on 08/04/2009, -4/+7Neat.
  • phpchris, on 08/04/2009, -1/+4Just because Google does it doesn't mean you should. It's never a good idea to leave tags open even if closing tags aren't required.
  • robotbebop, on 08/04/2009, -0/+3It does in a sense. But sticking to a rigid set of tags makes it easier for search engines to index stuff, which is mostly the point I believe. Like if it finds a <nav>..</nav> tag it just enumerates all the links within and the search engine can say with some amount of authority than these links denote actual sections and sub sections of your website. The problem here is that uneducated developers will likely abuse it (like they abused tables and now write unnecessary amounts of nested <divs>,etc) and it will eff up their site's rankings, potentially.
  • bilbohicks, on 08/04/2009, -0/+3You're a idiot.
  • HelAom, on 08/04/2009, -1/+3sarcasm right?
  • 4AntiStupid, on 08/04/2009, -0/+2Grammar flamer == major loser.
  • WolfHook, on 08/04/2009, -0/+2As much as I enjoyed the article and as tempted as I am to code my portfolio site in HTML 5, I think I will leave it for a while yet.
  • Zoshchenko, on 08/04/2009, -0/+2THANK YOU! Sheesh!
  • gramophone, on 08/04/2009, -2/+3I get that making code more semantic is great and all that, but it seems like the number of new content type tags like <aside> is just a tad excessive...
  • shinkou, on 08/05/2009, -1/+2Dugg for being a very neat introduction. Why don't we just forget about IE however? It doesn't worth the time.
  • kaosethema, on 08/07/2009, -0/+1dugg
  • godsdead, on 08/05/2009, -0/+1Quickly Skimmed, IM so tempted to jump onto the HTML 5 bandwaggon, but want it to mature asap. :)
  • bsgeek, on 08/05/2009, -0/+1bookmarked , good stuff !!
  • jimmyn, on 08/04/2009, -0/+1Clients at larger corporations are often the ones stuck with it at work due to monolithic IT structures that prevent upgrading or dependency on applications authored for IE6 environments. It is difficult to avoid producing sites against IE6 constraints when those you are producing them for are using it to view and approve work.
  • shagmin, on 08/10/2009, -0/+1As it should be.
  • Mateo2, on 08/05/2009, -1/+1Didn't think it was a very good article. I don't care what you are supposed to put in an "aside" or a "footer". I care about how using these tags will affect the appearance of the website. They don't explain that at all. I have no idea what effect using an "aside" has on the page.
  • inactive, on 08/04/2009, -1/+1bookmarked!
  • stronglikedan, on 08/04/2009, -1/+1I thought that too, but I'm not so sure. Does "an" go before words that start with a vowel, or sound like they do. "An opposum" leads me to think the former, which would make me think "a HTML" would be correct.
  • ptFoe, on 08/04/2009, -4/+2meh it doesn't work with IE
  • rnawky, on 08/04/2009, -4/+2Not really, it's OPTIONAL meaning it will have NO EFFECT on how the page is rendered.
  • rnawky, on 08/04/2009, -4/+2It's not Google who made that rule, it's the HTML markup standard. You're just used to seeing XHTML, where every element either needs to be closed, or self closed with />
  • rnawky, on 08/04/2009, -5/+2http://code.google.com/speed/articles/optimizing-h ...
  • rnawky, on 08/04/2009, -6/+2Pro Tip, HTML 5 does NOT require you to close certain tags, BODY, HTML, HEAD, and LI being just a few.

    http://code.google.com/speed/articles/optimizing-h ...

    What's the point of making an HTML 5 page if you code it exactly like an XHTML page.
  • Helspawn, on 08/04/2009, -6/+1I never said to quietly accept it, but bitching about them every single day on digg isn't going to get them fixed.

    Most of the hacks that need to be applied are for IE6 and then more for IE7. Get over it, they will need to be applied until these browsers are out of the picture.
  • pillcounterd, on 08/04/2009, -7/+2The form "an" is always prescribed before words beginning with a silent h, such as "honorable", "heir", "hour", and, in American English, "herb". In HTML, the H is not silent.
  • psychotron, on 08/04/2009, -7/+1Can't anyone come up with an original and new (or at least new) thought by now concerning design and IE? It's been done to death, move on, change careers or become part of whatever body comes up with this stuff so you can change it. Just let it go. You'll be much happier in the end.
  • rnawky, on 08/04/2009, -15/+2Why the hell are they closing head, body, li and html tags....
  • Helspawn, on 08/04/2009, -14/+1Yes it sucks having to put the IE hacks, but you've been doing it for years now, get over it.

    Quit complaining and live with the fact that you'll probably always have to insert an IE hack. It's part of life of a web developer.
  • tetsuo29, on 08/04/2009, -14/+1Buried. Learn when to use "a" and when to use "an". Especially in your headline.

  • Add a Comment

    Login or register to comment!
    Or, sign-in super fast with your Facebook account ...


© Digg Inc. 2009 — Content created and posted by Digg users is dedicated to the public domain | Terms of Use Updated | Privacy Policy
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.