HTML5: Multiple <header> on one page

This entry is part 8 of 34 in the series HTML5

We can have multiple headers and they do not have to be at the top of the page.

All the headers are nested under the article tags.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML 5</title>
</head>
<body>

<article>
    <header>
        <h1><a href="#">American Rock</a></h1>

        <p>17.05.2014</p>
    </header>
    <p>The end of the world as we know it.</p>
</article>

<article>
    <header>
        <h1><a href="#">British Pop</a></h1>

        <p>16.05.2014</p>
    </header>
    <p>Just can't get enough.</p>
</article>

<article>
    <header>
        <h1><a href="#">Heavy Metal</a></h1>

        <p>15.05.2014</p>
    </header>
    <p>Enter the sandman.</p>
</article>

</body>
</html>

Series Navigation<< HTML5: Putting site navigation <nav> links at <header>
HTML5: Using the new <article> element >>

Leave a comment

Leave a Reply