iandevlin / html5bones Goto Github PK
View Code? Open in Web Editor NEWThe HTML5 template that goes back to basics
Home Page: http://html5bones.com
License: MIT License
The HTML5 template that goes back to basics
Home Page: http://html5bones.com
License: MIT License
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
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!
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!
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.
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?
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>
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
.
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 hgroup
and 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.
Maybe remove ARIA Landmark Roles from header, main & Co.
See for example Jeremy Keith's comment and Steve Faulkner's linked article
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 ;)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.