HTML5: Using the <header> element for site header

This entry is part 6 of 34 in the series HTML5

The <header> element is usually the first thing on the body of a web page.

It can contain logo, website name or site navigation.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title></title>
</head>
<body>

<header>
    <hgroup>
        <h1>Learning HTML5 </h1>

        <h3>It's easy to learn HTML5 with Codecrawl!</h3>
    </hgroup>
</header>

</body>
</html>

The hgroup here is used to group the heading and the sub heading.

HTML5: Putting site navigation <nav> links at <header>

This entry is part 7 of 34 in the series HTML5

HTML5 also introduces site navigation element <nav>.

We can put <nav> at the header so that they are shown on the top of the page.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML 5</title>
    <style>
        nav li {
            display: inline;
        }
    </style>
</head>
<body>

<header>
    <hgroup>
        <h1>Great Music News</h1>

        <h3>Latest news on Rock, Metal and Pop music!</h3>
    </hgroup>
    <nav>
        <ul>
            <li><a href='#'>Home</a></li>
            <li><a href='#'>British Pop</a></li>
            <li><a href='#'>Rock</a></li>
            <li><a href='#'>Country</a></li>
            <li><a href='#'>About</a></li>
            <li><a href='#'>Contact</a></li>
        </ul>
    </nav>
</header>

</body>
</html>

Note that we have styled the navigation links to be inline using display: inline.

 

 

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>

HTML5: Using the new <article> element

This entry is part 9 of 34 in the series HTML5

The article element is used to define an independent block of content.

Some examples of the block of content are forum post, magazine or newspaper article, a blog entry etc.

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

<article>
    <header>
        <h1><a href='#'>Rod Stewart</a></h1>

        <p>17.05.2014</p>
    </header>
    <p>Roderick David 'Rod' Stewart, CBE is a British rock singer-songwriter. Born and raised in London, he is of
        Scottish and English ancestry. Stewart is one of the best-selling music artists of all time, having sold over
        100 million records worldwide.</p>
</article>

</body>
</html>

HTML5: Grouping content with <section> element

This entry is part 10 of 34 in the series HTML5

The section element is an area of content or an area of page.

It can be used to group a whole or a section of content.

A section can contain article elements, and article elements can have their content split into sections.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML 5</title>
    <style>
        section {
            clear: both;
            border: 2px solid #000;
            padding: 1%;
            width: 97%;
        }
    </style>
</head>
<body>
<section>
    <article>
        <header>
            <h1><a href='#'>Rod Stewart</a></h1>

            <p>17.05.2014</p>
        </header>
        <p>Roderick David 'Rod' Stewart, CBE is a British rock singer-songwriter. Born and raised in London, he is of
            Scottish and English ancestry. Stewart is one of the best-selling music artists of all time, having sold
            over
            100 million records worldwide.</p>
    </article>
</section>

</body>
</html>

Notice that with section as an element, I can put a border style to this section of the page.