Semantic Tabs

by Greg Bowler

HTML

<nav>
    <ul>
        <li><a href="#tab1">Introduction</a></li>
        <li><a href="#tab2">How it works</a></li>
        <li><a href="#tab3">A cat</a></li>
    </ul>
</nav>

<div class="container">    
    <section id="tab1">
        <h1><a name="tab1">Introduction</a></h1>
        <p>
            This tab strip does not use any
            JavaScript or advanced CSS.
        </p>
        <p>
            However, some nice transitions can be 
            added to enhance the usability.
            These enhancements would be left out of 
            older browsers, but would still
            be 100% usable.
        </p>
    </section>
    
    <section id="tab2">
        <h1><a name="tab2">How it works</a></h1>
        <p>
            The navigation is full of anchors, 
            linking to named anchors in the document.
        </p>
        <p>
            The named anchors are inside each section's 
            h1 tag.
        </p>
        <p>
            The sections are the size of the container, 
            and the container's overflow is
            set to hidden, so only one section can be visible
            at once.
        </p>
        <p>
            Esentially, we have a small window in which we 
            are viewing a regular page.
        </p>
    </section>
    
    <section id="tab3">
        <h1><a name="tab3">
            Here is a cat for your enjoyment.
        </a></h1>
        <img src="http://cache2.artprintimages.com/p/LRG/18/1847/M5G8D00Z/art-print/curious-cat.jpg">
    </section>
</div>

CSS

div.container {
    width: 320px;
    height: 240px;
    border: 3px solid #000;
    overflow: hidden;
}

nav {
    background: #000;
    width: 320px;
    border: 3px solid #000;
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 0 8px;
}
nav ul li a:hover {
    text-decoration: underline;
}

section {
    display: block;
    height: 100%;
    padding: 8px;
}
h1 {
    font-size: 150%;
}
p {
    padding-bottom: 8px;
}
img {
    height: 180px;
}

JavaScript

// Javascript *could* be used, but isn't necessary to
// the workings of this demo.

// HTML for data (the text)
// CSS for presentation (the layout)
// JavaScript for added eye-candy (none here)