<article> <h1>Features</h1> <a href="#s-one">One</a> | <a href="#s-two">Two</a> | <a href="#s-three">Three</a> | <a href="#s-four">Four</a> <div> <section id="s-one"> <h1>Section One</h1>

<p>Lorem ipsum dolor set amet.</p> </section> <section id="s-two"> <h1>Section Two</h1> <p>Lorem ipsum dolor set amet.</p> </section> <section id="s-three"> <h1>Section Three</h1> <p>Lorem ipsum dolor set amet.</p> </section> <section id="s-four"> <h1>Section Four</h1> <p>Lorem ipsum dolor set amet.</p> </section> </div> </article> Weve wrapped our tabbed area in an <article> and then included the navigation links. This is followed by a <div> (for styling) and several <section>s, each with a unique ID that each of the anchors will link to. Note that weve not used the <nav> tag or placed our navigation items in a list, for reasons that will be explained shortly.

Well now apply some basic styles to the article, div, and sections to position them absolutely and act as tabbed content areas. article, div { section { display:block; position:absolute; top:10px; left:0; background:#333; color:#fff; width:100%; min-height:400px; } The next step is to activate the :target pseudo-class. We want to apply it to each section, and well change the z-index property to make that section appear above the others. Remember, we apply