Hacker News new | past | comments | ask | show | jobs | submit login

Hi Mark

For accessibility your sidebar could be a <header> containing a <nav> with the links in that. This <header> can precede the <main> content. The title for the links should be in the <nav> so it outlines properly and the heading for the <header> or the <nav> doesn't need to be <h1>. <h1> is best kept just for the article, not anything else.

If the <header> containing the <nav> precedes the <main> you can style it to look like a sidebar. Why bother? Well, try it and then see how the page opens with Firefox Reader Mode. You should see the difference, the reader can jump past the header 'landmark' to the article.

If you want to go fully HTML5...

The newsletter signup could be in an <aside> rather than a <div>.

Then with the article, it is nice to see use of <figure>, I have no evidence but I believe Google likes that. You can also try breaking down the article into <section> sized chunks, with the <h2> headings at the top of each <section>. This should compartmentalise each 'section' into a way that search engines might prefer. Amongst the <section>s the <aside> for the newsletter can slot in, outlining nicely. Ideally the newsletter <aside> also has a heading.

Footnotes. If you change 'name' to 'id' then you will get top scores on validation. Nobody will ever notice or care, but you don't want validation errors do you?

Also check out this:

https://codepen.io/SitePoint/pen/QbMgvY

Really cool footnotes using CSS counters.

Why bother?

Well, you have taken HTML5 so far and not much is needed to go exemplary. In a world where everyone is up to speed on web technologies few get the actual HTML right. You might not know the latest funky web technology but it is always useful to point out how HTML5 could be done using the full vocabulary instead of just <div> mumblings.




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: