The semantic elements in HTML5

How to use some of the new structural HTML5 elements

17.09.2015

The last revision of the HTML standard – HTML5, was released 2014. New page structure elements - <main>, <section>, <article>, <header>, <footer>, <aside>, <nav> are designed to enrich the semantic content of documents.

The new HTML5 elements make much easier the structure of the website's pages. Each of the new elements replaces the use of <div> elements.

Let's see how will look a typical homepage.

 

  <header> represents the header of a section. It doesn't introduce a new section. The <header> element can contain also a navigation section.

<header>
            <h1>Website Name</h1>
</header>

 

<nav> represents a section of the page that links to other pages or to parts within the page. The nav element is intended for navigation sections.

<!-- Main Navigation -->
        <nav>
            <ul>

                <li><a href="/">Home</a></li>
                <li><a href="/services">Services</a></li>
                <li><a href="/portfolio">Portfolio</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>

 

<section> represents a generic section of a document or application. The <section> element groups thematic content. It can be used together with h1 – h6 to indicate the document structure.

<section>
            <h1>Some big title</h1>
            <p>Some text about the website</p>
</section>

 

<main> represents the main content of the body of the document or application, that is directly related to the central topic of a document or central functionality of an application.

AND

<article> represents an independent piece of content of a document, such as a news article, blog post, forum post or any other independent item of content.

<!-- List of articles -->        
        <main>   
                <article>
                    <header>
                        <h1>
Article title</h1>
                    </header>
                    <p>First paragraph</p>
                    <p>Second paragraph</p>
                </article>   
                <article>
                    <header>
                        <h1>
Article title</h1>
                    </header>
                    <p>First paragraph</p>
                    <p>Second paragraph</p>
                </article>    
        </main>

 

<aside> represents a piece of content and can be used for pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

<!-- Second Navigation can be in aside tag -->
        <aside>
            <nav>
                <ul>
                    <li><a
href="/sub1"></a>Subcategory 1</li>
                    <li><a href="/sub2"></a>Subcategory 2</li>
                    <li><a href="/sub3"></a>Subcategory 3</li>
                    <li><a href="/sub4"></a>Subcategory 4</li>
                </ul>
            </nav> 
            <section>
            <h1>
Most popular</h1>
            <ul>
                <li><a href="/popular-1"></a>Popular 1</li>
                <li><a href="/popular-2"></a>Popular 2</li>
                <li><a href="/popular-3"></a>Popular 3</li>
            </ul>
            </section>
        </aside>

 

<footer> represents a footer for a section and can contain information about the author, copyright information, etc.

<footer>
            <p>Copyright © 2015</p>

</footer>

 

Semantic tags cannot fully replace the <div> tag, but our code will look cleaner and intelligible when we use the new structure tags. One more advantage. Google likes soo much HTML5, so the use of the new HTML5 tags will boost our chances for better ranking.

 

Tags:
webdesign, SEO, HTML5

Request a free quote

Let’s talk about what we can get done

Contact Us