CLOSE

HTML Sections

HTML Sections are used to divide up the page in an organized way. Below are several tags used to build a page with sections. Some of these tags are new to HTML5.

<!DOCTYPE html>
<html>
    <head>
        <title>My Sectioned Page</title>
    </head>
    
    <body>
        <header>
            <nav>
                <ul>
                    <li>
                        <a href="#">Link 1</a>
                    </li>
                    <li>
                        <a href="#">Link 2</a>
                    </li>
                    <li>
                        <a href="#">Link 3</a>
                    </li>
                </ul>
            </nav>
        </header>
        
        <article>
            <header>
                <h2>My Artlce Heading</h2>
            </header>
            
            <section>
                <p>
                    Some content for this article.
                </p>
            </section>
            
            <footer>
                <p>Some article conclusion / closing suff</p>
            </footer>
        </article>
        
        
        <footer>
            <p>Copyright 2016 My Web Page. All Rights Reserved.</p>
        </footer>
    </body>
</html>
Expand

The above code will create a nice page structure. If you look at this in your browser, it will not seem like much. That is because it needs some styling with CSS, which we will get to in later tutorials.

Share This Tutorial

Link To This Tutorial

Tutorial URL
https://stepbystephtml.com/tutorial/16/html-advanced-tutorial

HTML Link

Help Us to Help You

This website and it's tutorials are only made possible with your support. Support money goes towards keeping our servers online.

Amount

Link to Us

Spread the word! Let people know about our tutorials by placing links on blogs, websites, forums and other places.

HTML Link

Copyright 2019 Step By Step HTML. All Rights reserved.