The Value Of Structure

One of the major benefits of HTML is that it allows us to structure documents in a way that illustrates the meaning of the content. This is often referred to as semantics. And it's an important part of the web authoring process. Most of the time content in a web page fits within specific sections. You might have the company information up top in a heading. The site navigation and a section below that followed by the main content and perhaps, a sidebar with some related information below it. Below everything else, there might be a footer that contains contact information or other information related to the site.

Controlling Document Outlines

One of the first things to consider when structuring your pages is what type of document outline you want to generate. HTML uses semantic elements like headings and sectioning tags to describe the outline of a page's contents. In many ways, you can think of this like a table of contents. These outlines are used by devices to skim and search your files, navigate to specific sections. And things like determining how content actually relates to each other.

The NAV Element

The nav element it's one of the section elements that are brand new, introduced in HTML5. The nav element represents a section of a page that links to other pages or parts within the page, a section with navigation links.

The Article Element

The article element represents a complete self-contained composition in a document, page, application or site. And that is, in principle, independently distributable or reusable. These could be things like forum posts, magazine or newspaper articles, blog entries, user-submitted comments, interactive widgets, and much more.

The Section Element

The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

The Aside Element

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The Div Element

The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

Other Semantic Elements

The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids. The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

NAV Example Code

         <nav>
             <a href="/html/">HTML </a>
             <a href="/css/">CSS </a>
             <a href="/js/">JavaScript </a>
             <a href="/jquery/">jQuery </a>
         </nav>
        

Article Example Code

            <article>
                <h1>Google Chrome</h1>
                <p>
                Google Chrome is a free, open-source web browser developed by Google, released in 2008.
                </p>
            </article>
        

Section Example Code

            <section>
                <h1>WWF</h1>
                <p>
                The World Wide Fund for Nature (WWF) is....
                </p>
            </section>
        

Aside Example Code

            <aside>
                <h4>Epcot Center</h4>
                <p>
                The Epcot Center is a theme park in Disney World, Florida.
                </p>
            </aside>
        

DIV Example Code

            <div>
                <h3>This is a heading</h3>
                <p>
                This is a paragraph.
                </p>
            </div>
        

Header Example Code

            <article>
            <header>
                <h1>Most important heading here</h1>
                <h3>Less important heading here</h3>
                <p>Some additional information here</p>
            </header>
                <p>Lorem Ipsum dolor set amet....</p>
            </article>
        

Footer Example Code

            <footer>
                <p>Posted by: Hege Refsnes</p>
                <p>Contact information: <a href="mailto:someone@example.com">
                someone@example.com</a>.</p>
            </footer>