Section in HTML5

How to divide the web page into sections in HTML5?

Before HTML 5, we used to use <div> element to divide the content into sections but in HTML5 we can use <section> tag to divide the document. <section> is primarily used to logically divide the different sections of the web page.

<body>
    <section id="Header">
        Top menu <a href="/" title="Home">Home</a>
    </section>
    <section id="Content">
        Content area, write content
    </section>
    <section id="Footer">
        Footer (C) IT Funda
    </section>
</body>

In the above code snippet, we have three sections (Header, Content and Footer). Please note that <section> tag doesn't have any User interface effect, it is just used to loggically divide the page. So that its easy for developer and search engines to find a particular section of the page.

Each section is displayed as block (the way <div> tag is rendered)

OUTPUT