HTML 5 Structural Tags and Attributes

HTML 5 Structural Tags and Attributes

HTML 5 Structural Tags and Attributes

  • by admin
  • 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:

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

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

Let start with the right HTML5 standard tags before we do some layouts.

<!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 the top of the layout there is a header. Body is first declared in initial HTML tags.

 

Header

The 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 the 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 the header and we separate 2 sections. Left section for the body of the blog post and a right section for right navigation.

<section id="main-section">

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

</section>

In right nav-section, we put a header with h1 and the same as the above top header is nav after the 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 the article. The article will be main page content that contains 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 the layout is a 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 please go to styling tutorial here.

Thanks.

Tags: HTML,HTML 5