HTML5 Semantics Elements – HTML5 tutorial Part 2

In previous post, we came to know about html5 and its most powerful features that make html5 unique and future web apps development language. HTML5 video feature somewhere making flash dead (what u say about this..say in comments??).

HTML5 is not a markup language, its a mashup language. It brings together the  best of markup with the forward-thinking ambition of tomorrow’s semantic and interactive web. HTML5 provides a st of semantic elements – what does it mean semantic ? Semantic means meaningful .

Semantic elements make code more cleaner, understandable , org anise for both developer and browser.

Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <img> – Clearly defines its content.

As we remember, we used to have non-semantic elements with class name like header, nav, footer etc. 99% website used to have such layout structure. So, the semantic elements exactly came from here to make it more cleaner.

The HTML5 semantics are –

<header> , <nav> , <footer> , <aside>, <section>, <article> etc.

Read in detail about these semantic elements.

Now, instead of using <div class=”header”>, use <header>’s  to define header in the webpage and make layout more cleaner and understanding.

Basic code with html5 semantic elements –

HTML SEMANTIC WEBPAGE STRUCTURE

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
  <head>
	<title><!-- Your Title --></title>
  </head>
 <body>
    <header>
     <!-- ... -->
    </header>
    <nav>
     <!-- ... -->
    </nav>
    <div id="main">
     <article>
    <!-- write ur content-->
     </article>
     <aside>
<!-- it could be left or right sidebar -->
     </aside>
    </div>
    <footer>
     <!-- ... -->
    </footer>
 </body>
</html>

2 Comments

Leave a Reply to K Gaurav Cancel reply