HTML и CSS / Семантические элементы в HTML5

<header> представляет заголовок раздела. Он не вводит новый раздел. Элемент <header> может содержать также навигационную секцию.

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

<nav> представляет раздел страницы, ссылки на другие страницы или частей в пределах страницы. Элемент nav предназначен для навигации секций.

<!-- 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> представляет общий раздел документа или приложения. <section> Элемент группы тематическое содержание. Он может быть использован вместе с h1 - h6, чтобы указать структуру документа.

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

<main> представляет основное содержание тела документа или приложения, которые непосредственно связаны с центральной темой документа или центральной функциональности приложения.

<article> представляет собой самостоятельную часть содержимого документа, такой как новости статьи, блоге, форуме сообщение или любой другой независимой единицы контента.

<!-- 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> представляет собой часть контента и могут быть использованы для тянуть котировки или боковых панелей, для рекламы, для групп навигационных элементов, а для другого контента, который считается отдельным от основного содержания страницы.

<!-- 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> представляет собой колонтитуле для раздела и может содержать информацию об авторе, информация об авторских правах и т.д.

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