Learning Code

HTML5

HTML5 is an updated version of HTML where the element names are descriptive of the content. This is very helpful for clarity and organization of code.

Header

Header (not to be confused with head or headings) is the element that should contain the top section of your page or the top area of a portion of your page.
<body>
   <header> Page Title </header>
</body>

Nav

Short for navigation, nav, is the element that contains the menus on your page.
<body>
   <header> Page Title </header>
    <nav> Links go here... </nav>
</body>

Main

The main element is used to contain the main content of the page.

<body>
   <header> Page Title </header>
    <nav> Links go here... </nav>
    <main> Main content goes here... </main>
</body>

Section

The section element is used to contain smaller areas of content.

<body>
   <header> Page Title </header>
    <nav> Links go here... </nav>
    <main>
       <section> This is for a smaller area of content. </section>
       <section> This is also for a smaller area of content. </section>
    </main>
</body>

Article

An article should hold self-contained, complete information that could be displayed independently.

<body>
   <header> Page Title </header>
    <nav> Links go here... </nav>
    <main>
       <section> This is for a smaller area of content. </section>
       <article> A self-contained area of complete information. </article>
    </main>
</body>

Aside

An aside element should hold secondary information, intended to be displayed on the side.

<body>
   <header> Page Title </header>
    <nav> Links go here... </nav>
    <main>
       <section> This is for a smaller area of content. </section>
       <aside> Secondary information that displays on the side. </aside>
    </main>
</body>

Footer

A footer element is used at the bottom of the page, or the bottom of an area on the page.

<body>
   <header> Page Title </header>
    <nav> Links go here... </nav>
    <main>
       <section> This is for a smaller area of content. </section>
       <aside> Secondary information that displays on the side. </aside>
    </main>
<footer>This is the bottom of the page. </footer>
</body>

Can you use the Try-it Editor to try out these concepts?