Previously, we were using div tag in the following format.
<div id="Menu">
<div id="Header">
We are using these "id" for our own purpose to identyfying.Unfortunately this doesnot help browser with this markup.
With HTML5 W3C introduces new rich set of elements , through which developer can convey his meaning.
Few Elements of HTML5:
- Article
- Aside
- Figure
- Figurecaption
- Header
- Hgroup
- Mark
- Nav
- Section
- Time
Using these elements , developer can easily guess what the most elements do.
In above daigram , you can see that Header and Footer.
By, seeing itself user can understand , that these contain information related to header and footer.
Example:
<BODY><HEADER><hgroup><h1> HTML5 ARTICLE 2 </h1><h3> HTMLL5 DEMO DEMO</h3></hgroup></HEADER></BODY>
So, above example illustrates us how to use header element.
"hgroup" used to group all related things.
Lets us how to use Section and Article tags.
"Section" - To expain in simple terms , consider a document which is divided into
different sections. Each section has its own meaning and purpose.
Similary , we can divide our webpage into different sections , using "Section" tag.
Example:
<BODY><SECTION><H1> NEWS </H1></SECTION><SECTION><H1> RSS FEEDS</H1></SECTION></BODY>
ARTICLE TAG: The name itelf is self expanatory, which indicates that we can write some content in
that tag. You will get a clear picture in the below example, how to use this tag.
Example:
<BODY><SECTION><H1> NEWS </H1><ARTICLE>place your news content here!this article is related to news section.</ARTICLE></SECTION><SECTION><H1> RSS FEEDS</H1><ARTICLE>place your RSS FEEDS here!this article is related to RSS section.</ARTICLE></SECTION></BODY>
NAV Tag: We can use this tag for placing Links or Hyperlinks or Menus.
So by seeing this Tag , u can identity that this tag contains Navigation Items.
Example:
<Body><Nav><ul><li><a href="#">HOME</a></li><li><a href="#">MICROSOFT DOWNLOADS</a></li><li><a href="#">MICROSOFT HYDERABAD</a></li><li><a href="#">MICROSOFT REDMOND</a></li></ul></Nav></Body>
Aside Tag: By seeing the diagram-001 , which clearly says us , that all the elements which we
want to place in sidebar , can be put inside Aside Tag.
Example:
<Body>
<Aside>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MICROSOFT DOWNLOADS</a></li>
<li><a href="#">MICROSOFT HYDERABAD</a></li>
<li><a href="#">MICROSOFT REDMOND</a></li>
</ul>
<Aside>
</Body>
Figure & Figurecaption: These tags are used when we want to place any images.
Example:
<figure><img src="Images/demo.jpg" height="100" width="100"/><figcaption>PHOTO</figcaption></figure>
Finally , Combining all, I have designed something below, with some dirty CSS Styles.
You can use CSS for better designing.
No comments:
Post a Comment