Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • HTML5 Page Structure

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 831
    Comment on it

    Hello readers!

    Here is demo of HTML5 page structure. In this structure we are using semantic elements, so its also called Semantic HTML5 Page Layout.

    Semantic Elements :- In many website we see html write like shown below-

    <div class="header"></div>
    <div id="nav"></div>
    <div id="footer"></div>
    

    But html5 offer some semantic elements for web pages.

    <header></header>
    <nav></nav>
    <footer></footer>
    
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Website Tital</title>
    </head>
    
    <body>
    <!-- Header -->
        <header>
            <nav>
                <ul>
                    <li>Navigation list</li>
                </ul>
            </nav>
        </header>
    <!-- /Header -->
    
    <!-- Main section -->
        <section>
            <article>
                <header>
                    <h2>Heading</h2>
                    <p>text in paragraph </p>
                </header>
                <p>(Text in paragraph) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            </article>
    
            <article>
                <header>
                    <h2>Heading</h2>
                    <p>text in paragraph </p>
                </header>
                <p>(Text in paragraph) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            </article>
        </section>
    <!-- /Main section -->
    
    <!-- aside colom -->
        <aside>
            <h2>Aside Section</h2>
            <p>(Text in paragraph) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </aside>
    <!-- /aside colom -->
    
    <!-- Footer -->
        <footer>
            <p>paragraph text in footer section (c)</p>
        </footer>
    <!-- /Footer -->
    
    </body>
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: