Hacker News new | ask | show | jobs
by eksith 4666 days ago
Actually, you can have nav inside article and still get the important stuff.

  <html>
  	<head></head>
  	<body>
  		<article>
  			<nav></nav>
  			<form></form>
  			<main></main>
  			<aside></aside>
  			<footer></footer>
  		</article>
  	</body>
  </html>
You can additionally include a "skip to content" link up top.
1 comments
hpaavola 4666 days ago
But that is not was I was looking for. In your example navigation is the first thing in the markup, when content should be the first thing. Also, navigation does not belong to article, it belongs to site. And the same goes for footer.

And those skip to content -links just the kind of hack we should not have to do. There should not be anyhting before the content, markup-wise.

link
eksith 4666 days ago
Not necessarily. Nav inside article functions the same as the contents list in a Wikipedia article so if you don't want that, you can remove it from the article. If you want secondary links to other related content, those should go in a different nav in aside. If you want site-wide links, you can create a separate nav outside the article.

Also of note, footer can be for the article or the whole page. If you like, you can put footer outside the article and put the site-wide navigation there in addition to any forms.

Skip to content links aren't hacks, but are in fact part of standard procedure for web accessibility and do solve a problem with fewer steps. Try not to look at things that don't necessarily conform to arbitrary standards of elegance as hacks.

link
hpaavola 4666 days ago
In my example there was a site navigation, not article navigation. And with article navigation, the same problem exists. The article should be before the navigation. But it's not practical at all to implement.

And what comes to skip to content -links, those definetly are hacks. What they mean is "Dear user, we would have put the content first in the source, but since CSS is not a layout definition language, it was not possible, take this link instead."

link
jwdunne 4666 days ago
Actually, you can use absolute positioning to achieve what you want, in a fixed-width layout. You use CSS to add padding to the top of the content which is equal to the height of your navbar/header and give the navbar/header position absolute and top 0.

I haven't figured out how to do this with responsive layouts. It's never worked well for me but I will come up with a solution one day.

link