Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
<head>
<title>An Introduction to the Structural Elements in HTML5 DEMO</title>
<style type="text/css">
header, footer, section, article, nav, aside {
    display:block;
    border:1px solid #000000;
    padding:5px;
    margin:10px;
}
span {
    color:#ff3333;
}
</style>
<!--[if lt IE 9]>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<header>
    <span>This is a &lt;header&gt; element.</span>
    <h1>Breaking News</h1>
    <div>Catch up on all the latest news stories.</div>
    <p><span><em>This page demonstrates the techniques outlined in the tutorial: An Introduction to the Structural Elements in HTML5.</em></span></p>
</header>
<nav>
    <span>This is a &lt;nav&gt; element.</span>
    <ul>
        <li><a href="#">Technology</a></li>
        <li><a href="#">Business</a></li>
        <li><a href="#">Entertainment</a></li>
    </ul>
</nav>
<section id="top_story">
    <span>This is a &lt;section&gt; element.</span>
    <h2>Top Story</h2>
    <article>
        <span>This is an &lt;article&gt; element with &lt;section&gt; elements inside it.</span>
        <section class="intro">
            <p>This &lt;section&gt; element is the top news story article introduction, with an ID attribute of "intro". This can have other elements within it such as &lt;p&gt; and &lt;div&gt; as well as media items. This &lt;section&gt; is inside an &lt;article&gt;, which is in turn inside another &lt;section&gt;. The page content as a whole is divided into &lt;section&gt; elements, which can also divide the sections of an article as in this case.</p>
        </section>
        <section class="story">
            <p>This &lt;section&gt; element is the main content of the article, with an ID attribute of "story".</p>
        </section>
        <section class="conclusion">
            <p>This &lt;section&gt; element is the conclusion or summary of the article, with an ID attribute of "conclusion".</p>
        </section>
        <aside>
            <span>This is an &lt;aside&gt; element.</span>
            <p>Were you there? Send us an email... </p>
        </aside>
    </article>
</section>
<section id="other_news">
    <span>This is a &lt;section&gt; element with &lt;article&gt; elements inside it.</span>
    <h2>Other News</h2>
    <article>
        <h3>Article Heading</h3>
        <div class="article_content">
            Here is some article content. 
        </div>
    </article>
    <article>
        <h3>Article Heading</h3>
        <div class="article_content">
            Here is some article content.
        </div>
    </article>
    <article>
        <h3>Article Heading</h3>
        <div class="article_content">
            Here is some article content.
        </div>
    </article>
</section>
<section id="popular_stories">
    <span>This is a &lt;section&gt; element.</span>
    <h2>Popular Stories</h2>
    <ul>
        <li><a href="#">Story</a></li>
        <li><a href="#">Story</a></li>
        <li><a href="#">Story</a></li>
    </ul>
</section>
<section id="multimedia_items">
    <span>This is a &lt;section&gt; element.</span>
    <h2>Audio and Video News</h2>
    <ul>
        <li><a href="#">Audio Video</a></li>
        <li><a href="#">Audio Video</a></li>
        <li><a href="#">Audio Video</a></li>
    </ul>
    <aside>
        <span>This is an &lt;aside&gt; element.</span>
        <p>Please send us your videos... </p>
    </aside>
</section>
<footer>
    <span>This is a &lt;footer&gt; element.</span>
    <p>This site is produced by Great Sites Ltd.</p>
</footer>
</body>
</html>
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers