<article> for self-contained content

The article element marks a self-contained content. An article could be a blog entry.

 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
article {border: thin black solid; padding: 10px; margin-bottom: 5px} 
article > footer {padding:5px; margin: 5px; text-align: center} 
article > footer > nav > a {color: white} 

</style> 
</head> 
<body> 
    <article> 
        <header> 
            <hgroup> 
                <h1>H1</h1> 
                <h2>H2</h2> 
            </hgroup> 
        </header> 
        <p>text text text text text text text text text </p>
        <section> 
            <h1>H1</h1> 
            <p>text </p>
            <section> 
                <h1>H1</h1> 
                <p>text </p>
            </section> 
        </section> 
        <footer>
            <nav> 
                <p>text</p>
                <a href="">a link</a> 
            </nav> 
        </footer> 
    </article> 
    <article> 
        <header> 
            <hgroup> 
                <h1>H1</h1> 
                <h2>H2</h2> 
            </hgroup> 
        </header> 
        <p>text text text text text text text text text </p>
        <section> 
            <h1>H1</h1> 
            <p>text </p>
            <section> 
                <h1>H1</h1> 
                <p>text </p>
            </section> 
        </section> 
        <footer>
            <nav> 
                <p>text</p>
                <a href="">a link</a> 
            </nav> 
        </footer> 
    </article> 
    <footer id="mainFooter"> 
        <p>footer</p>
    </footer> 
</body> 
</html>
Click to view this demo.
Home 
  HTML CSS Book 
    HTML  

Related: