HTML5 Bones: The template that goes back to basics

Re:HTML5 Bones: The template that goes back to basics by simonsarris on Thursday December 20, 2012 @01:06PM (#4949018)

Edit: I've made my first ever pull request on Github. I hope I'm doing it right:

https://github.com/iandevlin/html5bones/pull/2

---------

Looking at all the stuff that index.html includes I think the name is misleading. Google Analytics? I know HTML5 Boilerplate has it, but HTML5 BP is maintained by Google people.

Actually, HTML5 BP has an index page that's smaller than HTML5 Bones: https://github.com/h5bp/html5-boilerplate/blob/master/index....

I think that the index page HTML5 Bones has is rather bloated in comparison: https://github.com/iandevlin/html5bones/blob/master/index.ht...

And it seems like a bad template to start from, since I'd be erasing most of it, like the <aside role="complementary"> and abbr tags. In fact, most of that page is just explaining the page, which really doesn't belong in a template.

The project does, however, showcase how to properly use a lot of the new HTML5 tags, and I think that's commendable in its own right. I just don't think it makes the template as useful as it might otherwise be, especially if its purporting to be (bare) bones.

I'm probably just being way too harsh though.

---------

For the record, since I might as well be the first to pedantry, this is the smallest validating HTML5 page:

    <!DOCTYPE html>
    <meta charset="utf-8" />
    <title></title>

And this is what I expected the project to look like, given the name:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title></title>
    </head>
    <body>

    </body>
    </html>

[ Parent | on HN ]

Re:HTML5 Bones: The template that goes back to basics by weareconvo on Thursday December 20, 2012 @09:25PM (#4951184)

I'm not sure why people feel the need to capitalize DOCTYPE - the spec allows <!doctype html>. (Here's the exact text from the spec: '1. A string that is an ASCII case-insensitive match for the string "<!DOCTYPE"....')

While we're on the subject of pedantry:

1) Given the unclear use of "smallest", !doctype is smaller, because lowercase letters are smaller than uppercase letters.

2) Your newlines unnecessarily add two extra characters to the page (arguably three if you count the newline after the title string)

3) It's unclear what you mean by "html5 page". Assuming you mean "html document which conforms to the syntax of the most recent html5 draft published by the W3C", you're not actually allowed to leave out the html element.

...of course, I'm not actually sure what you mean by "validating" either, but you shouldn't use any particular validator on the internet, as it introduces a layer of indirection. Just use the syntax given by the spec itself: http://www.w3.org/TR/html5/syntax.html#syntax

As a sidenote, you could also use the syntax given by the WHATWG's living spec, but the shortest conforming html document turns out to be the same regardless. WHATWG syntax: http://www.whatwg.org/specs/web-apps/current-work/multipage/...

And finally, since I despise people who criticize without offering alternatives, here's my attempt at the shortest conforming HTML document: "<!doctype html><html><title></title><body></body></html>"

As a sidenote: I'm not sure, but it might be conforming to re-write empty tags as <tagname /> instead of <tagname></tagname>, in which case the smallest conforming document would be: "<!doctype html><html><title /><body /></html>"

[ Parent | on HN ]

Re:HTML5 Bones: The template that goes back to basics by RyanZAG on Thursday December 20, 2012 @01:55PM (#4949256)

Probably way too harsh - BP gives the minimum that you can try and plug your own code into.

html5bones is clearly taking a different route, by making everything and every tag as clear as possible. Everything is commented to give someone starting out a good explanation of why all this stuff is there.

eg. in HTML5 BP:

  <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>

Newbies are now completely lost. What's going on here?

html5bones:

  <!-- An <aside> is used to enclose content that is additional to the 
  main content but not essential. If it were removed, the meaning of 
  the main content should not be lost, but the content of the <aside> 
  also retains its meaning. -->
  <!-- ARIA: the landmark role "complementary" is added here as it 
  contains supprting information for the main content that remains 
  meaningful even when separated from it -->
  <aside role="complementary">

I heavily applaud this idea - too much of HTML best practices is completely arcane to most of the people using it. The more people understanding what this stuff actually does the better for everyone.

[ Parent | on HN ]

Re:HTML5 Bones: The template that goes back to basics by iandevlin on Thursday December 20, 2012 @02:15PM (#4949377)

Hi, I wrote HTML5 Bones and to be fair Simon has a good idea (detailed in the GitHub pull request) in that there should be two versions, a file with all the comments and one without - and so catering for both types of users.

I definitely don't want to remove the comments as they are integral to what I want the "template" to help people do.

Thanks for your comments so far!

[ Parent | on HN ]

Re:HTML5 Bones: The template that goes back to basics by yannis on Thursday December 20, 2012 @02:29PM (#4949456)

Since you adding ARIA related info a small example for a table can be useful. Thanks for publishing it.

[ Parent | on HN ]

Re:HTML5 Bones: The template that goes back to basics by jgraham on Thursday December 20, 2012 @02:53PM (#4949573)

For the record, the smallest validating document is actually: <!doctype html><title></title>

Although I can't right now see the part of the spec that allows an empty title element, which is either a bug in my reading, a validator bug or a spec bug.

Of course, declaring a charset is generally a good thing to do (arguably more useful than a <title> if you expect the document will be in an <iframe> for example) but even if that were required you could get rid of the entirely optional trailing " /" and save two characters. And strip the quotes around the attribute value for two more characters.

[ Parent | on HN ]

Re:HTML5 Bones: The template that goes back to basics by suyash on Thursday December 20, 2012 @01:46PM (#4949219)

that is correct, this is the real html5 bones

[ Parent | on HN ]

Re:HTML5 Bones: The template that goes back to basics by camus on Thursday December 20, 2012 @01:32PM (#4949158)

web devs dont give a "beep" about tags, if they did , they would have supported XHMLT... they give even less "beep" about validation... And they are so lazy they cant even take the time to write their own CSS files...

[ Parent | on HN ]