SitePoint Sponsor

User Tag List

Page 3 of 4 FirstFirst 1234 LastLast
Results 51 to 75 of 81

Thread: HTML5 examples

  1. #51
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drhowarddrfine View Post
    I give up. I started doing some serious markup work using HTML5. Using the new elements works fine, and styling sometimes does, too, but not well enough that I can start using it. I changed enough stuff around that I don't recall where I left off but here is what I tried:

    <section>
    <nav>
    <ul>
    <li><input type="image" .....></li>
    .
    .
    .
    </ul>
    </nav>
    </section>

    Every day sort of thing. But then I wanted to position the <ul>, contents of the <li>s and so on with floats or relative positioning and sizing but some things just wouldn't budge. Firebug doesn't seem to always know what is what so I had to outline the elements. The outlines and borders sometimes wound up in strange positions or disjointed in Firefox. IE hardly worked at all with any styling. I didn't get to look in any other browser but that was enough proof that this isn't ready for production.

    I can see why it might be hard to find something beyond developer blogs that use it. I was doing some more fancy stuff than you'd find in a blog. That doesn't mean you shouldn't try, though. I can see that simpler layouts could be made to work quite well. It's just not something I can use right now and I'm just too busy to experiment further.
    Correct. I tried to do the same on a more advanced layout and ran into the same issues. Probably the safest method thus far is to use html5 elements as naming conventions for classes.

    <div class="section">
    ...
    </div>

  2. #52
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    What should a browser do when it runs into an element it does not know or understand?

    The HTML specs are a bit bare in that. The only thing that appears to be close is "If a user agent encounters an element it does not recognize, it should try to render the element's content." Now does that mean it should ignore the element entirely and only display the content. Should it give it the required hooks in the DOM and CSS abilities? The spec is less then clear on that.

    http://www.w3.org/TR/html4/appendix/...s-invalid-docs
    * I'm using the HTML 4 specs because its running in an HTML 4 parser.

    Either way, HTML 5 elements in an HTML 4 parser are errors.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #53
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Firefox and Opera will apply CSS to randomly-named elements, even with an HTML doctype. E.g.:
    HTML Code:
    <p>I like <vegetable>broccoli</vegetable> soup</p>
    <hellothere>Hi!</hellothere>
    <hellothere>Hi again!</hellothere>
    Code CSS:
    vegetable {color:green}
    hellothere {display:block; border:1px solid red}
    That will work fine, and the VEGETABLE and HELLOTHERE elements would appear to be assumed to be like SPAN elements in the way they behave.

    I've also just tried to use getElementsByTagName and onclick events with VEGETABLE and it works too, so it looks like unrecognised elements are given the full DOM treatment too.

  4. #54
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drhowarddrfine View Post
    I give up. I started doing some serious markup work using HTML5. Using the new elements works fine, and styling sometimes does, too, but not well enough that I can start using it. I changed enough stuff around that I don't recall where I left off but here is what I tried:

    <section>
    <nav>
    <ul>
    <li><input type="image" .....></li>
    .
    .
    .
    </ul>
    </nav>
    </section>

    Every day sort of thing. But then I wanted to position the <ul>, contents of the <li>s and so on with floats or relative positioning and sizing but some things just wouldn't budge. Firebug doesn't seem to always know what is what so I had to outline the elements. The outlines and borders sometimes wound up in strange positions or disjointed in Firefox.
    Sounds like you didn't set display:block on the section and nav? (Unknown elements don't have any styles associated with them by default, and the initial value of 'display' is inline, so unknown elements are inline by default.)

    Either that or you were testing with Firefox 2 which has parsing issues with blocks in unknown elements.

    Quote Originally Posted by drhowarddrfine View Post
    IE hardly worked at all with any styling.
    IE needs a javascript hack to work nicely with unknown elements.
    Quote Originally Posted by drhowarddrfine View Post
    I didn't get to look in any other browser but that was enough proof that this isn't ready for production.
    I don't disagree that the new elements aren't ready for production -- no browser has implemented them yet! Using stuff before it's implemented is usually not a great idea. (Other parts of HTML5 have been widely implemented, though, canvas in particular.)
    Simon Pieters

  5. #55
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    Sounds like you didn't set display:block on the section and nav? (Unknown elements don't have any styles associated with them by default, and the initial value of 'display' is inline, so unknown elements are inline by default.)
    I knew that but, now that you bring it up, I don't think I applied it. I'll have to go back and look and try again if I didn't.
    Either that or you were testing with Firefox 2 which has parsing issues with blocks in unknown elements.
    Nope. FF3.0.5 and the current nightly build.
    IE needs a javascript hack to work nicely with unknown elements.
    Yes, I did that, and IE8 could display outlines on elements but nothing beyond that.

  6. #56
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hallelujah, brother!! Thanks, Simon! You were right. I did completely forget to set them to display:block. Renewed interest on my part and I'll have to tinker more and see where it goes. My simple test now works in FF3.0.5 and the nightly build. I'll check the other browsers and do more tinkering as I go along.

  7. #57
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drhowarddrfine View Post
    Yes, I did that, and IE8 could display outlines on elements but nothing beyond that.
    IE8 Beta 2? The hack doesn't work in that particular version, but they fixed it in RC1.
    Simon Pieters

  8. #58
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    IE8 Beta 2? The hack doesn't work in that particular version, but they fixed it in RC1.
    That was a different problem.

  9. #59
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  10. #60
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Well, I've found a non-technical site (it's a motorcycle site) which is using the HTML5 doctype, shortened charset declaration, and maybe one other thing. The HTML itself is a bit bloated and I don't see any special HTML elements. But I immediately thought it was cool that someone was using the doctype:

    http://luiemotorfiets.nl/

    I actually only looked at the source there because I thought I saw sliding doors at the top (it's actually not but oh well, same effect just more code).

    Strangely they have a 404 page in HTML2.0.

  11. #61
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html>
    That is what is showing for their "HTML5 DTD". Are you sure you got the right site?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #62
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Code:
    <!DOCTYPE html>
    That is what is showing for their "HTML5 DTD". Are you sure you got the right site?
    That's the correct doctype for HTML5.

  13. #63
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    But I immediately thought it was cool that someone was using the doctype:
    There are quite a number of blogs using the HTML5 doctype right now, mainly web developers. However, a couple of days ago, I saw that on a Google page which surprised me. Perhaps I shouldn't be surprised since a number of those same developers work at Google.

    Like I said above, my restaurant's online ordering uses HTML5 doctype. It's really no big deal since browsers only take it to mean "work in standards mode". It doesn't affect IE6 either or maybe I haven't noticed.

    I've continued my rewrite using HTML5 on that same online ordering site using the structural elements without issue.

  14. #64
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drhowarddrfine View Post
    That's the correct doctype for HTML5.
    Wow they actually wised up and made a DTD normal humans can actually remember . What little I know about the HTML5 draft is turning out to be good.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #65
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Well, I've found a non-technical site (it's a motorcycle site) which is using the HTML5 doctype, shortened charset declaration, and maybe one other thing. The HTML itself is a bit bloated and I don't see any special HTML elements. But I immediately thought it was cool that someone was using the doctype ..........
    Essentially the same thing is happening with XHTML+RDFa:

    XHTML+RDFa Doctype

    James
    Last edited by jamesicus; Feb 12, 2009 at 13:44. Reason: Revised info on linked document

  16. #66
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Yeah but James you're a nerd. You're supposed to be using exotic doctypes.
    But motorcycle riders... that's what was awesome about it.

    Now I'm waiting for a dog food site with HTML5 doctypes and prolly at least one rainbow Jesus site.

    What little I know about the HTML5 draft is turning out to be good.
    Some things are good. And then they go in and add elements with attributes like width="something" and color="something" and slider="width and height of slider" blah blah and it seems half the things that "do stuff" on the client (the browser has to do it) should still be done on the server side. Yeah, eventually starving Hatians will have cell phones capable of doing massive amounts of rendering calculations to run all this stuff, but right now I wouldn't ask user agents to do so much work, except the big bloaty ones out there (FF, Opera) running on actual computers.

    I mean, Javascript isn't even universal yet. When it stops draining batteries so fast and is available on every single user agent and reacts properly to the DOM in every one of them, then we can consider adding those capabilities to "the basics". Right now it still needs to remain "a very nice extra for a lot of visitors".

  17. #67
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Yeah but James you're a nerd. You're supposed to be using exotic doctypes.
    But motorcycle riders... that's what was awesome about it ..........
    Well, Stomme poes, I don't what the implications are -- or what it portends -- but now Whitehouse.gov uses RDFa (UK Government too) -- also RDFa in HTML5?.

    James
    Last edited by jamesicus; Feb 12, 2009 at 17:05. Reason: added info

  18. #68
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drhowarddrfine View Post
    I've continued my rewrite using HTML5 on that same online ordering site using the structural elements without issue.
    I've been working on two sites lately where I decided to go for the HTML5 doctype, HTML5-like class naming and WAI-ARIA landmark roles and form attributes.

    The latter won't validate yet, but as Bruce Lawson points out "accessibility trumps validation".

  19. #69
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Tyssen,
    I may have found another stumbling block in my case. I never looked at it in FF2 and apparently FF2 treats the new tags differently than FF3. I also read of another issue with the IEs. I haven't done any in depth look into it yet but I am concerned I'll get too far into it and create too much work to turn back.

  20. #70
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    drhowarddrfine, yes Firefox 2 closes unknown elements upon seeing a block element. If you have a basic and consistent structure then it's relatively easy to fix up the DOM with script for Firefox 2.

    e.g. let's say you have
    HTML Code:
    <body>
     <article>
      <h1>...</h1>
      ...
     </article>
     <nav>
      <ul>
       ...
      </ul>
     </nav>
    </body>
    Then to Firefox 2 it will be parsed as if it were
    HTML Code:
    <body>
     <article>
      </article><h1>...</h1>
      ...
     
     <nav>
      </nav><ul>
       ...
      </ul>
     
    </body>
    and this script would fix it up:
    Code:
    var current = document.getElementsByTagName('article')[0];
    if (current.childNodes.length <= 1) { // DOM is broken, so fix it up
      while (current.nextSibling) {
        if (current.nextSibling.tagName == 'NAV') {
          current = current.nextSibling;
          continue;
        }
        current.appendChild(current.nextSibling);
      }
    }
    Or one could continue to use divs until Firefox 2's market share is irrelevant (won't take too long I'd think).

    What were the IE issues?
    Simon Pieters

  21. #71
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Jon's page
    iii. The <nav> Element
    Bringing back <menu>, yay.

    Some of my (id's not classes) names are similar to HTML5 but others aren't. I mean, with classes and id's you can pander to your coworkers-- if they speak Dutch it's easier for them to deal with
    <div class="artikel"> or <div class="inhoud"> or <div class="gesprek">
    than
    <div class="article">

    for now. After certain elements get more accepted they will be understood regardless, but it's another reason I don't try too hard to match HTML5.

    Still, I was pretty bummed after hearing Anne's presentation. I liked the shorter things, the made-sense things, and then heard stuff and was like, you want the browser to do WHAT?

  22. #72
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Bringing back <menu>, yay.
    <menu> isn't for navigation menus, though, it's for context menus and toolbars.
    Simon Pieters

  23. #73
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    drhowarddrfine, yes Firefox 2 closes unknown elements upon seeing a block element. If you have a basic and consistent structure then it's relatively easy to fix up the DOM with script for Firefox 2.
    Thanks for that. That is how I understood it. I'll have to decide if I want to include more js to fix FF2 since I have to include js to make this work in IE.

    Eh. Maybe I will. Like I said, though, I don't want to go another month and find out I need more js to fix another thing.
    What were the IE issues?
    I tried looking around to find the issues I saw but I'm not sure of what I saw. My problem is I've got too many things going on and I'm not keeping good notes, so I'm forgetting things.

    I should ask this on the whatwg forum or mailing list. Why isn't HTML5 more generic and just stay with <section> instead of including <nav>, <header>, etc. I know members have been asked that before. I'm tempted to just enclose everything in <section> and forgetting the rest. Isn't <header> and <footer> presentation and not structure?

    I guess if a building can have a footer and a doorway a header then it makes sense. They don't call the footer a "block of cement". I guess I'm typing out loud right now.

  24. #74
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    ...<section> instead of including <nav>, <header>, etc. I know members have been asked that before. I'm tempted to just enclose everything in <section> and forgetting the rest. Isn't <header> and <footer> presentation and not structure?
    Or, we could ask.. what's the difference between nameless container <div> and nameless container <section>? Assuming you're using <div> in that way, as nameless containers and not <div id="heading">HEADER</div> type stuff...

  25. #75
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Or, we could ask.. what's the difference between nameless container <div> and nameless container <section>?
    A section is like a type of div which also has a specific meaning - it designates a section in the outline of a document. Any content and headers within one section is deemed to be part of a related topic within the document, and its relationship (before, after, within, containing) with other sections can be deemed to represent the document's overall structure in terms of chapters (or sections), subsections, etc as in a book or report. The nesting level of a section corresponds to the nesting level of a document outline, ie the fourth section element inside the third top-level section element could be section 3.4. This could correspond to chapter 3, subheading 4.

    Divs can be nested as deep as you like and it doesn't imply anything about the outline structure of the document, nor that the content inside a div is topically related. They are generic block level containers that can be used for any purpose - their only semantic purpose is to represent a block level element.

    You can use CSS or script to make sections and divs do the same things. The difference is only the semantic meaning. The meaning of sections could be used by a browser to give an outline summary of a document. The information about structure could also help search engines and other indexing services.

    A section element cannot be used for a navigation menu or a footer, because those parts of a page do not represent elements of a document's structure such as chapters and subheadings. For example, when generating an outline of the document a footer should not be regarded as a new chapter or subheading within a chapter of a document.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •