All About the Header Tag



HTMLUsually when we think of headers, we think of the single area of the webpage that contains the logo, the search form, menu or navigation. In HTML5, the header element allows all that and more. It can be used to introduce content to "sectioning content" and "sectioning roots" elements.


Currently, "sectioning content" are the following elements: article, aside, nav and section. "sectioning roots" elements are: blockquote, body, details, dialog, fieldset, figure and td. In essence, it can be used multiple times.

A sample would look like this:
<body>
    <header>
        <h1>Welcome to ABC Farm..</h1>
        Search site: <input type="text" name="searchname">
        <nav>
            <ul>
                <li><a href="/">Organic Seeds</a>
                <li><a href="/">Organic Vegetables</a>
                <li><a href="/">About</a>
            </ul>
        </nav>
    </header>
</body>


Please note that the header element cannot be nested and cannot be contained inside a footer or address element. Although header can be used in many places, it is important not to overuse it.


No comments :