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 –
<!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>
Related Posts
About The Author
GK
GK is the man behind Ecompark. I love to write on new technology, latest gadgets, deals, programming updates and gaming entertainment.
Everything is very open with a really clear explanation of the challenges.
It was truly informative. Your website is useful.
Many thanks for sharing!
thanks for the appreciation..:)