iandevlin/html5bones

The HTML5 template that goes back to basics

html5bones's Issues

It's 2013...

In index.html there's one occurence of "2012" left in the footer's comment (line 114):

The <time> element is used here to indicate that the '2012' is a date

That should be 2013 ;)

License Type?

One <nav> outside of <header>

Hi Ian,
as mentioned on Twitter a while ago I am using HTML5 Bones as an example for the introduction of the new semantic elements in my new book, and it works just fine for that purpose.

I have however one suggestion:
Currently there are two nav-elements on the page and both are inside a header. A newbie could get the impression that it has to be that way.

How about moving the first nav below the <header role="banner">? Or above. Doesn't matter. This way it would be clear that nav does not have to be inside header.

If that nav is moved it would leave a lone h1 in the header and you'd need some extra content. I'd suggest the subtitle "Back to Basics", just like on the website.

On the website you have marked it up as hgroupand h1 and h2 (which I quite like). But since hgroup is in danger of being excluded it could also be marked up just with an h1 and <p class="subtitle"> or something like that.

Proper <section> placement?

This looks like a great project. One thing that seem off to me -- and I may be wrong and opening myself up to getting schooled -- is the placement of the section block.

In it's current location, div.wrap seems unnecessary, and its styles could simply be transfered to section.main. I don't see what duty the div serves that the section could not handle on its own.

However, it also seems odd to have the header inside the section element and the footer outside of it. That section should be used to wrap the article and aside elements, since that is the "main section" of the document, and the items that repeat from page to page, the header and footer, should reside outside the section element. With that in place, the div.wrap would then be necessary to keep the three sections together, but this means the it's closing div tag would be moved below the footer.

h tag choices?

Hi, I just came across this and it's really fantastic -- thank you!
Could you explain your rationale behind using the h1/h2/h3 tags in the way that you do?

My understanding is that one should either use <h1> for the page name (never the site heading/logo, because it doesn't differ from page-to-page and hence offers little semantic meaning and even less SEO benefit), then <h2> for "section headings" (for lack of a better word), and h3 etc... for sub-headings
OR
use the new html5 "document outline" style where you have an <h1> as the first heading of each <section> or <article>.

The usage of h tags in html5bones appears to utilize <h1> for the site name, <h2> for what the <h1> is commonly used for, and <h3> for what <h2> is commonly used for (whereby "common" I mean "the code I personally happen to commonly come across" :).

Curious to hear your thoughts. Thanks!

Design and Font

The homepage doesn't look good due to improper layout and writing format. And the button with GitHub Source in which GitHub source is not visible properly.

Bower install fails

Using bower to download this package fails with:
"TypeError: Invalid Version: 1.6.3.beta"

System info:
Bower version: 1.3.12
Node version: 0.10.31
OS: Windows_NT 6.1.7601 x64

Article element

Hey!

I was just wondering how come there are 2 article elements in the example?

Instead it could be:

<article id="cool-id">

<section id="introduction">....</section>

<section id="instructions">....</section>

</article>

Maybe remove ARIA Landmark Roles

Maybe remove ARIA Landmark Roles from header, main & Co.

See for example Jeremy Keith's comment and Steve Faulkner's linked article

It's that time of the year ...

• update sample footer copyright date to 2016
• normalize.css is still at v3.0.2 I think, and therefore does not need an update ;-)

redundant shiv'ing

Hey Ian!

The print-shiv file does everything the shiv file does (plus more). So if Bones aims to fix the print issues by default too, you can leave out the html5shiv.js file.

Because this wasn't terribly obvious, i just updated the shiv docs: https://github.com/aFarkas/html5shiv/blob/master/readme.md Sorry about that!

Google Flash Player?

I like the addition of the video template but maybe you could mention in the readme where the 'google flash player' your using comes from so people can better decide if that is what they'd like as a fallback?