Dynamic Content in article

Let’s say I’m building a website that chronicles various, new web technologies. It consists of a bunch of pages on HTML5, CSS3, SVG, whatever. The general look of the page would be like so:


<article>
	<h1>HTML5 Rocks</h1>
	<section>
		<h2>Why It's Awesome</h2>
		<p> ... </p>
	</section>
	<section>
		<h2>Why It Isn't Ready</h2>
		<p> ... </p>
	</section>
</article>

Pretty straightforward. But what I’d like to do is use JavaScript to only display one section of the article at a time. This is kind of what it would look like after I’m done scripting:


<article>
	<h1>HTML5 Rocks</h1>
	<section>
		<h2>Why It's Awesome</h2>
		<p> ... </p>
	</section>
	<a href="*">But Why Isn't It Ready?</a>
</article>

My question is this: Would it still be considered an “article” if the content inside of it is changing? When I’m writing semantic html, should I be using elements based on their default, JavaScript-disabled content, or what I’m actually going to be doing with it?

yes it can be done this way!

I don’t believe this is going to interfere with semantics, it’s simply a little extra visual elements added to a single article. Of course, you will need to write some JS specifically for that article, but nothing too complicated. Simple jQuery show/hide’s should accomplish the effect, that is if I am understanding you correctly.

Even if you launch a URL with the fragment included, it’ll activate it. As long as the #fragment identifier is in the URL (refresh or not), the style will be active.

Ah ok, that explains what I was seeing in a few pages where I tried it: I also had various skip links and #void (testing) links. Now I see what happens.

Even if you launch a URL with the fragment included, it’ll activate it. As long as the #fragment identifier is in the URL (refresh or not), the style will be active.

If you visit my website you’ll see what I mean, I use it extensively to power the “page” visibility my one page design. :slight_smile:

So, so long as the link to the target is clicked once in a browser state (dunno the word, but I mean before refresh)?

I think it’s perfectly acceptable, Wikipedia do it with their content listings, plenty of businesses do it with single page sites (myself included) and I think it has genuine usability benefits in that rather than break content over multiple pages (which hurts the reading flow) you’re aiding the readability by categorising and making it available only when it’s needed. Which is a common best practice for readability (as long as it degrades gracefully). Just as an additional thing to consider, have you examined the CSS3 :target selector? It does exactly what you want without scripting - though IE doesn’t support it (so will need a bit of scripting)! :slight_smile:

It should do, I’ve never had to do anything with it like that but I’ve used other selectors alongside :target and it’s worked. :slight_smile:

PS: Target styles remain (and is triggered) as long as the matching fragment identifier exists in the URL, that’s precisely why it’s so good.

Does target work with adjacent selector? My destinations never contain the content itself. The only way I could think of getting it working was something like
#foo:target+div {
appear!
}

<a id=“foo” href=“#foo”> </a>
<div>
new stuff…
</div>
(or section or whatever).

Yes, that anchor is for Safari and other browsers who won’t bring keyboard focus down to the area in question.
And what if you want to focus on something inside the new content? I’m easily confused about how long :target styles remain. Sometimes it seems I can keep keyboarding through the page and the styles remain and other times they vanish.

I don’t see why not. Adding extra visual effects may not be the norm but they’re just that - effects. They do not change the fact that it is an article. It should work nicely.

I never heard of something like that happening before…wow!

Because it is just one article, and if JavaScript is disabled, if the person’s printing, when it shows up in search results, etc., I’d like it to be considered a single page. It’s for purely visual/aesthetic reasons that I want to swap out sections like this.

It sounds kinda complicated if you ask me. Why use javascript, when you can use .php and have power beyond imagination, in search engine indexing?