SEMANTIC LAYOUTS

Semantic Elements

A semantic element clearly describes its meaning to both the browser and the developer.

<header>…</header>:

Specifies the webpage header

<nav>…</nav>:

Navigation links for the user in a webpage.

<main>…<main/>:

Marks the main content of the webpage.

<section>…</section>:

Specifies a particular section in the webpage.

<article>…</article>:

Denotes an article.

<aside>…</aside>:

Denotes content displayed in a sidebar of the webpage.

<footer>…</footer>:

Specifies the webpage footer.

Example :

<header>This is header part</header>
    <nav>This is nav part</nav>
    <main>
        <h4>This is main part</h4>
        <section>This is section part
            <article>This is first article</article>
            <article>This is second article </article>
        </section>
        <aside>
            This is aside part
        </aside>
    </main>
    <footer>
        This is footer section
    </footer>