What is HTML5 ?
HTML5 is a updated Version of HTML.
There are no more difference in between html and html5, In HTML5 we can find some new tag and some old tags are removed.
HTML5 syntax is compatible with both HTML4 and XHTML1
HTML5 doctype is much simpler:
New way:
<!doctype html>
Old ways:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Meta charset tag is much simpler:
New way:
<meta charset="UTF-8">
Old way:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
In HTML5 we preferred to use DIV instead of Tables, Because its easy to find and format each pixel of a page using DIV.
Main Structural Elements You'll Use Most Often in HTML5
1- <header> Enter your Header part here </header>
Note: represents a group of introductory or navigational aids. (Things you'd usually wrap in a H1, H2, Hx, etc)
E.g. :
<header>
<h1><a href="#">Enter your Title here</a></h1>
<h2>A tag line might go here</h2>
</header>
2- <nav> </nav>
NOTE : represents a section of the document intended for navigation. (Like a menu)
e.g. :
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
3. <article> </article>
Note: independent piece of content of a document, such as a blog entry or newspaper article. (Independent is the key word here. If the piece of content could make sense plucked out of this document and placed somewhere else, it's probably an article)
e.g.
<article>
<h3><a href="#">First Article Title</a></h3>
<img src="images/flower.jpg" alt="flower">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </p>
</article>
4. <section> </section>
Note: represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure. (Just a logical grouping such as a content section)
e.g. :
<section>
<article>
<h3><a href="#">First Article Title</a></h3>
<img src="images/flower.jpg" alt="flower">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </p>
</article>
<article>
<h3><a href="#">Second Article Title</a></h3>
<img src="images/tree.jpg" alt="tree">
<p>Praesent libero. Sed cursus ante dapibus diam.</p>
</article>
</section>
5. <aside> </aside>
Note: represents a piece of content that is only slightly related to the rest of the page. (Usually a sidebar, but could be another type of content that isn't directly related to the main content)
E.g. :
<aside>
<h4>Connect With Us</h4>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</aside>
6. <footer> </footer>
Note: represents a footer for a section and can contain information about the author, copyright information, et cetera. (You know, like... a footer).
E.g. ;
<footer>
<p>All rights reserved.</p>
</footer>
No comments:
Post a Comment