Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

HTML 5 Advice

Discussion in 'Website Design Forum:' started by Jazajay, Oct 11, 2010.

  1. Jazajay

    Jazajay Active Member

    Hi peeps,
    Right I scrapped my last site idea just wasn't practical so going with an idea of one that is, and one that will help me in my career as well.

    So I've decided to do it all in HTML5.
    Now here's my logic and I don't care if there is an easier way to pull it off I will explain why I want to do it this way.

    What I want to do is to create two versions 1 (XHTML5) for IE9, Safari, Firefox, Opera and Chrome, another one (XHTML4) for IE7 and IE8 and serve them via a browser sniffer and a redirect to a version with ids and other mark-up, IE6 I going to forget about entirely.

    The reason I want to do it like this is simple, purity.
    IE9, Safari, Opera, Chrome, Firefox all/will support nth meaning I don't need Id's, border shadow, meaning no useless images, rounded corners again no useless images. In fact by reducing those I will save a minimum of 16 http requests and I should reduce my total http request down to around 5 or 6 in my current design meaning 1 fast site.

    IE7 and IE8 will get a XHTML 4 strict page served with ids etc... just for them.

    So here's my first crack at writing a solid XHTML 5 page, please note this is a XHTML 5 page and not a HTML 5 page, hence no doctype. I have followed the syntax I think to the letter off the W3C site but if I have misinterpreted it please can you let me know why I have.

    Here's what the foundation layer will look like:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Page title</title>
    <base href="" />
    <link type="text/css" media="screen" rel="stylesheet" href="" />
    <meta name="robots" content="noimageindex" />
    <meta name="author" content="James Johnson" />
    </head>
    <body>
    <header>
    <object src="logo.png" title="Logo text"></object>
    </header>

    <section>
    Page banner goes in here.
    </section>

    <nav>
    <ul>
    <li>Main navigation</li>
    </ul>
    </nav>

    <section>

    <header>
    <h1>Main heading</h1>
    </header>
    <p>
    Welcome text.
    </p>

    <hr />

    <article>
    <heading>
    <a href="">Article heading</a>
    </heading>
    <p>
    Article text
    </p>
    </article>

    <article>
    <heading>
    <a href="">Article heading</a>
    </heading>
    <p>
    Article text
    </p>
    </article>

    </section>

    <aside>
    <heading>
    <h2>Sub heading</h2>
    </heading>
    <ol>
    <li>list</li>
    <li>list</li>
    </ol>
    </aside>

    <footer>
    <heading>
    <h3>Footer heading</h3>
    </heading>
    <ul>
    <li>list</li>
    <li>list</li>
    </ul>
    <heading>
    <h3>Footer heading</h3>
    </heading>
    <ul>
    <li>list</li>
    <li>list</li>
    </ul>
    </footer>

    </body>
    </html>


    Please note the headings in the articles don't contain HTML headers but do contain the header tag around them. This is because in my eyes, and here's my interpretation of the W3C code example. They are not sub headings to that section so don't deserve the h2 tag, but they are still headings, article headings, so still need to be marked up as such. Hence the header tag. Whereas the headings in the header tags in the aside and footer are actual sub headings to the page so therefore contain actual headings as well. The logo I'm iffy about placing it in it's own header tag, but I have seen on-line examples using it as such, and I'm just not sure if it is because they have misinterpreted it for that meaning and it should be placed in the section tag instead? :confused:

    Question 2)
    I am going to be using microformats in the page, they have just reached 5 billion web pages which for a sad geek like me is great news. However when you use microformats you need to declare the definitions via the profile attribute on the head tag this has been dropped in HTML5 and their solution is to add it to all Microformat sections which in my eyes is not a proper solution as it can/will add massive unnecessary bloat to the page.

    So any one else got a decent one where I can add it once but not break HTML5 rules?

    Cheers for all contributions.
    Can we please keep this thread to talk about XHTML 5, not why I'm doing it, I'm spiteing myself what ever as I am only giving myself an hour a night 5 days a week to code it up, including my custom CMS, so any issues I want to get out of the way early.

    Cheers Jaz.

    O if someone on team DF could change the title to say HTML advice instead that would be great, what a dumbass. :lol:

    Key:
    Red - XHTML 5
     
  2. Harry

    Harry Senior Member

    I think even for you, styling by means of nth-of-type is a bit stupidly awkward Jaz, it's so unmaintainable, even more so than your love of id="a" etc.

    If you're gonna learn HTML5 then learn it, but please don't start creating ridiculous 'section+section:nth-of-type(4n-1):after{}' type code.

    You should always code like you're working in a team, even when you're not. You might be the cleverest web developer alive, but anyone looking at code like that will just think you're a wanker haha :(

    I did a blog post on the ridiculousness of all this, actually: Building sites without using IDs or classes &mdash; CSS Wizardry&mdash;CSS, Web Standards, Typography, and Grids by Harry Roberts

    Also, you should use the HTML5 DOCTYPE, it's the quickest way to trigger standards mode in all browsers.

    There is no heading element. There's header and hgroup but that's it.

    Pleeeeeeeease do this sensibly!!! ;)

    EDIT: Let it be noted that <section id="content"> coupled with #content{} is shorter (i.e. less bytes) than <section> section:nth-of-type(2){} and infinitely more maintainable and future proof.
     
  3. Jazajay

    Jazajay Active Member

    Anything but dude, its pure perfection to the nth degree. Okay sad I know but it had to be done. :D
    Doh! Now I'm going to have to wipe the dibble off my shoe, amazing peice of work fella, purly amazing. :)
    I know it is hard to beat my talants. :D
    Yes if I was coding to some sub standard format but if I'm going to do this I will do it properly, as you say and thats not doing it properly not to XHTML5 the strictest of the strict.

    Your right there is the header tag what does hgroup do anyway?
    But as it is it is semantically correct at the most basic layer if you get me?
    Taking out the header tag around the logo though that's just wrong in my eyes.

    But I will include one id at least namely on the body that way I can style my rules to a particular page:
    #one section+section:nth-of-type(4n-1):after{}
    #two section+section:nth-of-type(4n-1):after{}
    #three section+section:nth-of-type(4n-1):after{}

    If only I could marry code I tell you, perfection utterly. :cry:
     
  4. Sunburn

    Sunburn Active Member

    lol jay you really are odd :)
     
  5. Jazajay

    Jazajay Active Member

    Hay unique. :mad:
    Odd just doesn't cover all my aspects. :lol:
     
  6. but it does cover enough of your aspects Jaz LOL.
     
  7. Renniks

    Renniks Senior Member

    I think most of it's right (as far as the box model all goes)
    but I think there are issues with your footer

    Footer
    Header
    Content
    Header
    Content​



    Rather than
    Footer
    Header
    Content​
    Header
    Content​

    As they aren't self contained, not sure if I'm right though

    Oh and a hgroup wraps a set of headings (h1 / h2) so you can have subheadings, you haven't used this so needn't worry :p
     
  8. Harry

    Harry Senior Member

    This is beyond stupid.

    Anyway, hgroup is for grouping sibling headings.

    HTML:
    <hgroup>
    <h1>Nonsensical code</h1>
    <h2>A project by Jazajay</h2>
    </hgroup>
    
    And as for HTML5 not being strict, wtf?! HTML5 is an open syntax, so if you change an XHTML Strict page to using a HTML5 DOCTYPE it'll still be just as good quality code, but under the HTML5 DTD. The cleanliness of your code is down to you :S (irony x10000000000000000).

    <div id="content"> and <div id=content> and <img src="logo.jpg" alt="" /> and <img src="logo.jpg" alt=""> are all valid HTML5, it's what you make of it.

    Look at it this way, you have a structure like:

    HTML:
    <section>
    This is the main content area
    </section>
    
    <section>
    This is the sub-content area
    </section>
    
    Targeted by:

    Code:
    section { whatever }section + section { whatever }
    This'll work, sure. But what happens when you need to put a section in between there for whatever reason, you need to add a promo, or a twitter section:

    HTML:
    <section>
    This is the main content area
    </section>
    
    <section>
    This is the twitter area
    </section>
    
    <section>
    This is the sub-content area
    </section>
    
    This changes your markup, but now you're gonna have to update the way the CSS works. This is one specific example of an infinite amount of possibilities. Your backwards striving for 'perfection' is anything but.

    I seriously might have to add you to my ignore list if this goes ahead. It's beyond stupid :S

    Also, XHTML5?! They never even made it to XHTML2 :S
    You've used a totally fabricated nickname to cover your take on 'better' HTML5. You can write HTML5 to whatever levels of strictness you want, it's still HTML5!!!
     
  9. Jazajay

    Jazajay Active Member

    Hay soz been mega busy and had connection problems last night.
    @Chris
    95% is not all of them. :lol:

    @Renniks
    Are you sure?
    I can't see that. :)

    @Harry
    Cheers for the hgroup explanation, much appreciated. :up:

    Removing Id's when they are not needed is not stupid at all it is perfection. Just because I don't follow the crowd and code how everyone else does because it makes it easier for them, but write code for the machines, the only ones that actually need to be able to read it fast why is that such an issue?

    If people find it hard to read shortened code then well they need to improve not get worse at coding and add pointless bloat when it is not needed. Ever heard of beauocracy/however you spell it, lol, same thing in so many ways. if you want it to be as efficient as possible it needs to be written for the machines and I can read it and understand it so whats the issue?

    But if harder to read, but much more efficient code, makes me stupid then I agree and say the intelligent guy is I suppose.. :D
    No true I was wrong, learning after all and I haven't got a problem or letting my arrogance get in the way with saying that. :)
    But it is not needed so why add it if its for humans and not machines?

    My point exactly and this is clean, very clean. :D

    What you mean learn a much more efficient way of coding?
    O no wait thats my interpretation. :D

    Wo I honestly thought you had all ready TBH. :lol:
    But dude what are you 8, and Sunburn reckons I'm odd. :lol:
    If my machine efficient coding style, rather than me following the crowd offends you that much go for it dude no skin off my nose. :lol:

    Yeah my type-o soz for that.

    But Harry I'm sorry I made you so upset that was not my intention. :)

    But cheers for all constructive criticism, even Harry's, very much appreciated people.

    Jaz. :)
     
  10. Levi

    Levi Moderator Staff Member

    no you got to add freak in there to :p

    (for non Jaz readers - I have called him a fitness freak on many occasion and he knows it has no ill meaning etc)
     
  11. Jazajay

    Jazajay Active Member

    Err I wouldn't say that was an insult anyway I have been called far worse in my goth days with my ankle length black skirt on and black boots TBH, but I would say thats a fair comment still. :D
     
  12. Sunburn

    Sunburn Active Member

    @ jay - I think your odd in a nice way, but dont get any ideas of us marrying or having kids or anything! im not that type of guy! :) ------- all fun no commitment lol
     
  13. i'm looking forward to having kids.. done the wedding.. next is house and kids.
     
  14. Jazajay

    Jazajay Active Member

    @Sunburn
    Hay dude what!!!!!
    Don't get me wrong I didn't take offense but we can adopt, why so negative?
    My Mrs wont mind I'm sure. :lol:

    @Chris
    Wait until you have 3, it's the quickest way to an early grave I assure you. :D

    Right then gentlemen lets start some coding, Harry you may want to add me to that list now. :lol:
     
  15. Jazajay

    Jazajay Active Member

    Hi peeps,
    Right i ran into some errors when I went to validate it last night. I used 3 seperate experimental validators, I'm considering the word experimental might be my issue, for html5.

    The errors where along the lines of:
    Header tag can't be in the footer, article or section tags so I removed them and put them before the tags so:

    <header><hx>Header text</hx></header>
    <section/article>Section or article code</section/article>

    Not literally the last one either or.

    And removed them entirely from the footer.

    Then it came up with header can't be a child of body.
    So I'm like right what?????

    So is it instead meant to be coded up as:

    <header>
    Site banner/header goes here.
    <nav>Navigation</nav>
    </header>
    <section>Welcome text</section>
    <article>Article</article>
    <aside>Left or right menu</aside>
    <footer>Footer in here</footer>

    But that would not makes sense as the W3C says the headers for navigation aides so.....:confused:

    But why the error with not a child of body?
    The W3C has it like that in their examples and if I can't put it in the body then where?
    I take it that was the experimental problem, right?

    HELP PLEEEEEEEEASE, really confused....more than normal anyway. :D
     
  16. the wife and I just want 2 kids LOL we think thats enough!
     
  17. Renniks

    Renniks Senior Member

    Sounds like the experimental validator got it wrong, pretty sure html5doctor covers issues with this :0
     
  18. Jazajay

    Jazajay Active Member

    @Chris
    Yeah we said that at our first Chris. :D

    @Renniks
    Cheers Renniks I check out a link on their to a HTML 5 gallery site and all the ones I checked have done it like I have so I'm going with that and going with the fact the experimental validators still have a few bugs to fix.. :)
     
  19. tbwcf

    tbwcf Active Member

    Jazz what is your actual site URL? I don't think I've ever seen it?
     
  20. Jazajay

    Jazajay Active Member

    Well it's bedtimebliss as we where going to do a parents ecommerce site but we ditched that idea now as the whole selling products was taking up too much time and it was making a fair bit but not enough that it could justify one of us packing in work to concentrate on getting it to make more, mortgage and keeping a roof over the fam's head kinda gets in the way. So we decided to ditch it in favor of having a life.

    So just had it and never really done anything with it, except keep it for clients to see work in development, and we where about to get rid of the domain and hosting but I've decided to start my book. So there is just some crappy holding page up at the mo. :)

    Before that it was sexybunny.com nice adult site sextoy dropshipping site, but dropshipping is a lot of work for very little return and lost well lots so....

    When its live I will let people tear it to pieces but I have some ambitious ideas so may be a while with my current time to work on it.

    Right first findings to my ambitious plan.

    Sorry to say but browser support is not there yet to be able to do it.
    Firefox is a bit buggy with :nth-child which requires extra mark up to get round it. As far as I can see it also doesn't support backgrounds on section tags either,. haven't tried anything else as of yet on it. Operas support for that is also sketchy/border line none existent as well. Webkit spot on on all accounts so far.

    So unfortunately I am going to have to downgrade my code and have to add some more divs, no IDs though I reckon I can get round having to make it more crap, to get around the lack of support, and 3 ids for Firefox bugs.

    Luckily I can remove these at a later date when they get less buggy.

    It would be good if we could keep this thread going with html5 browser support for everyone. :)

    Mmm.....anything else I find out I will post/if anyone knows a work around that would be good to know. :)

    Cheers for all contributions.
     

Share This Page