We are using Grammarly to help us writing this article

HTML 5 Structural Tags and Attributes

by Didin J. on Dec 10, 2016 HTML 5 Structural Tags and Attributes

New features in HTML 5 that you should know for best and simple practice in web development.

Hi Everyone,

Today I will discover HTML 5 features that you should know for focusing your web development. In this topic I will show you some main tags especially for layouting your web page. They are:

<header>
<footer>
<nav>
<section>
<article>
<aside>
<meter>
<progress>

Let starting with the right HTML5 standard tags before we do some layouting.

<!DOCTYPE html> <html lang="en-US">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MyHTML5 Page</title>
  </head>
  <body>
  
  </body>
</html>

Here's the layout that we want to build.

We started from top of layout there is header. Body is first declared in initial html tags.

Header

First header is page header that contains web title inside page. We call our web page as "My First Blog".

<header id="page-header"> 
   <h1>My First Blog</h1>
</header>

We put <h1> tag inside header as large heading, also we put id for top first header "page-header" for future advancing style or just identification.

 

Nav

Inside top header and right section we have <nav> tags that will be our navigation menu later. For top header and side section nav put after <h1> tags.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="recent">Recent Post</a></li>
    <li><a href="popular">Popular Post</a></li>
    <li><a href="about">About Us</a></li> 
    <li><a href="contact">Contact Us</a></li>
  </ul> 
</nav>

 

Section

Section put below header and we separate 2 sections. Left section for body of blog post and right section for right navigation.

<section id="main-section">

</section>
<section id="rightnav-section">

</section>

In rightnav-section we put a header with h1 and same as above top header is nav after header.

<section id="rightnav-section">
  <header>
    <h1>Navigation</h1>
  </header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="recent">Recent Post</a></li>
      <li><a href="popular">Popular Post</a></li>
      <li><a href="about">About Us</a></li>
      <li><a href="contact">Contact Us</a></li>
    </ul>
  </nav>
</section>

 

Article

Inside main-section we have to insert article. Article will be main page content that contains of title heading, paragraph, aside contain a paragraph and also footer.

<article>
  <header>
    <h1>My First Blog Post</h1>
  </header>
  <p>
    Lorem ipsum dolor sit amet, albucius euripidis abhorreant eos in. Sit utroque torquatos in, qui dolor adipisci an. Debet utamur voluptatibus ut nec, solet accumsan mediocritatem ut his, vide labitur suavitate in vix. Mel congue volumus no.
  </p>
  <p>
    Eripuit nusquam antiopam ne has, at mel quidam possit, quot choro quando at nam. No mel nemore eruditi interpretaris. Nam dignissim forensibus ut. Per ex sale neglegentur. In case feugiat sea, his justo illum te, ea eos utamur officiis perpetua. Vero partiendo repudiandae eos no, error legendos id has, nam ut modo consequuntur.
  </p>
  <aside>
    <p>
      Lorem ipsum dolor sit amet, albucius euripidis abhorreant eos in. Sit utroque torquatos in, qui dolor adipisci an. Debet utamur voluptatibus ut nec, solet accumsan mediocritatem ut his, vide labitur suavitate in vix. Mel congue volumus no.
    </p>
  </aside>
  <footer>
    Reference: Djamware Blog
  </footer>
</article>

Footer

The last tag in layout is footer that will keep our copyright or footnote content.

<footer>
  Copyright 2016. Djamware.com
</footer>

 

And here is complete code for layout.

<!DOCTYPE html> <html lang="en-US">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MyHTML5 Page</title>
  </head>
  <body>
    <header id="page-header">
       <h1>My First Blog</h1>
    </header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="recent">Recent Post</a></li>
        <li><a href="popular">Popular Post</a></li>
        <li><a href="about">About Us</a></li>
        <li><a href="contact">Contact Us</a></li>
      </ul>
    </nav>
    <section id="main-section">
      <article>
        <header>
          <h1>My First Blog Post</h1>
        </header>
        <p>
          Lorem ipsum dolor sit amet, albucius euripidis abhorreant eos in. Sit utroque torquatos in, qui dolor adipisci an. Debet utamur voluptatibus ut nec, solet accumsan mediocritatem ut his, vide labitur suavitate in vix. Mel congue volumus no.
        </p>
        <p>
          Eripuit nusquam antiopam ne has, at mel quidam possit, quot choro quando at nam. No mel nemore eruditi interpretaris. Nam dignissim forensibus ut. Per ex sale neglegentur. In case feugiat sea, his justo illum te, ea eos utamur officiis perpetua. Vero partiendo repudiandae eos no, error legendos id has, nam ut modo consequuntur.
        </p>
        <aside>
          <p>
            Lorem ipsum dolor sit amet, albucius euripidis abhorreant eos in. Sit utroque torquatos in, qui dolor adipisci an. Debet utamur voluptatibus ut nec, solet accumsan mediocritatem ut his, vide labitur suavitate in vix. Mel congue volumus no.
          </p>
        </aside>
        <footer>
          Reference: Djamware Blog
        </footer>
      </article>
    </section>
    <section id="rightnav-section">
      <header>
        <h1>Navigation</h1>
      </header>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="recent">Recent Post</a></li>
          <li><a href="popular">Popular Post</a></li>
          <li><a href="about">About Us</a></li>
          <li><a href="contact">Contact Us</a></li>
        </ul>
      </nav>
    </section>
    <footer>
      Copyright 2016. Djamware.com
    </footer>
  </body>
</html>

This html is unstyle so this is not same as in layout mockup. For this plese go to styling tutorial here.

 

Thanks.

The following resources might be useful for you:

Loading…