CODEWITHSUNDEEP
html
JochemQuery
JochemQuery

Reputation: 1567

HTML 5: #Header or <header>

I am a little confused now by html so i've a question about the semantic element:

Should i use like this?

<html>
<head>
    <title>Some page</title>
</head>
<body>
    <header class="main-header">
        <!-- menu and imaganary logo -->
        <nav>
            <ul>
                <li>Demo</li>
            </ul>
        </nav>
    </header>
</body>
</html>

Or this?

<html>
<head>
    <title>Some page</title>
</head>
<body>
    <div class="main-header">
        <!-- menu and imaganary logo -->
        <nav>
            <ul>
                <li>Demo</li>
            </ul>
        </nav>
    </header>
</body>
</html>

I read http://html5doctor.com/the-header-element/ about the header element. It tells that it usefull for the headings of a <article> It doesn't give me information about this situation.

Upvotes: 0

Views: 131

Answers (2)

Praveen Gowda I V
Praveen Gowda I V

Reputation: 9637

According to the HTML Specification

The <header> element is intended to usually contain the section's heading (an <h1>-<h6> element or an <hgroup> element), but this is not required. The element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

So, you should probably go with the first example, although the second one too can be used without a problem. Also you can directly use the header element in your CSS like below.

header {
    // style the header
}

Upvotes: 1

Yotam Omer
Yotam Omer

Reputation: 15376

<header> is also good for the page header or for a <section>'s header not just for articles. You can use both your examples without a problem. I recommend you use <header> for easier readability.

Upvotes: 2

Related Questions