You must Sign In to post a response.
  • Category: HTML

    Question based on html5

    Briefly describe the correct usage of the following HTML5 semantic elements: <header>, <article>, <section>, <footer>.
    http://www.vayamtech.com/
  • #768355
    Let's look at a further example using a code snippet of Sectioning Elements in HTML. Example 1

    <div class="parent">
    <h2>Heading</h2>
    <p>Enter Some content...</p>
    <div class="child">
    <h2>Enter Another heading</h2>
    <p>Add More content...</p>
    </div>
    </div>

    Example 2
    <body>
    <header>
    <div id="logo"> Item1 </div>
    <nav>...</nav>
    </header>
    <main role="main">
    <h1>Guitars</h1>
    <p>Enter you massage. </p>

    <article>
    <h2> Item2</h2>
    <p>...</p>
    </article>

    <article>
    <h2> Item3 </h2>
    <p>...</p>
    </article>
    </main>
    </body>


    Useful Reference : http://blog.teamtreehouse.com/use-html5-sectioning-elements

  • #768358
    Header tag:
    As word suggest it is the head of the page contains links and text in BIG font. see below sample

    <header>
    < h1>first text</h1>
    < h3>secondary text</h3>
    < p>Some additional information here</p>
    < /header>

    footer:
    The < footer> tag defines a footer for a document or section. see below section

    < footer>
    < p>this text displayed in footer</p>
    < /footer>


    Section:
    The < section> tag defines sections in a document

    Article:
    The < article> tag specifies independent, self-contained content.

    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • #768360
    Hi,

    Header and Footer are similar just like in a document like we have Header and Footer for a page.
    So we can specify header and footer based on the area of webpage we need to specify


    <header>
    // Type any information you want to display in the header
    </header>

    <footer>
    // Type any information you want to display in the footer
    </footer>


    Article will give you summary effect of a paragraph. This Article tag might be used in home page of any website to explain about the company.


    <article>

    //Display articles or summary with bulletins.

    </article>


    Finally Section will make your summary or paragraph shows in the section format.
    Which is similar to the Index in any books. This is usually use Paragraph tag inside sections.


    <section>
    <h1>Section</h1>
    <p>I M Paragraph</p>
    </section>

    Thanks,
    Mani


  • Sign In to post your comments