Search This Blog

Thursday, February 24, 2011

HTML5 an Introduction


 
HTML5, it is the new and advance version of HTML . It introduces a bunch of new elements. Here we have some brand new elements in HTML5:

<article>
 It defines external content

<aside>
 It defines some content aside from the article it is placed in

<audio>
It defines sound, such as music or other audio streams

<canvas>
 It defines graphic, such as graphs or other images

<command>
 It defines a command button, like a radiobutton, a checkbox, or a button

<datagrid>
 It defines a list of selectable data. The datagrid is displayed as a tree-list

<datalist>
It defines a list of selectable data. Use this element together with the input element, to make a dropdown list for the input’s value

<datatemplate>
It defines a container for data template. This element must have child elements to define a template: <rule> elements

<details>
 It defines details of an element, which the user can see, and click to hide

<dialog>
 It defines a dialog, such as a conversation

<embed>
It defines embedded content, such as a plug-in

<event-source>
It defines a source for events sent by a server

<figure>
Used to group some elements

<footer>
 It defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information

<header>
It defines the header of a section or document

<mark>
 It defines marked text. Use the <mark> tag if you want to highlight parts of your text

<meter>
It defines a measurement. Used only for measurements with a known minimum and maximum value

<nav>
It defines a section of  navigation links

<nest>
It defines a nestingpoint in a datatemplate for child elements. Used together with the elements <datatemplate> and <rule>

<output>
 It defines different types of output, such as output written by a script

<progress>
It defines work-in-progress. Use the progress element to display the progress of a time consuming function in JavaScript

<rule>
 It defines the rules for updating a datatemplate. Used together with the elements <datatemplate> and <nest>

<section>
It defines sections in a document. Such as chapters, headers, footers, or any other sections of the document

<source>
 It defines media resources for media elements, such as <video> and <audio>

<time>
It defines a time or a date, or both
<video>
 It defines video, such as a movie clip or other video streams.



Getting started with HTML5 doctype

To start using HTML5 you’ll need to use the new HTML5 doctype , So simply place this on the first line of your HTML document and you’re ready to start using HTML5.
<!DOCTYPE html>


HTML Basic Structure
HTML 5 introduces a whole set of new elements that make it much easier to structure pages.The markup for that document could look like the following:

<!doctype html> 
<html> 
<head> 
    <title>Page title</title> 
</head> 
<body> 
    <header> 
        <h1>Page title</h1> 
    </header> 
    <nav> 
        <!-- Navigation --> 
    </nav> 
    <section id="mypage"> 
        <!—Introduction of mypage --> 
    </section> 
    <section> 
        <!-- Main content  --> 
    </section> 
    <aside> 
        <!-- Sidebar --> 
    </aside> 
    <footer> 
        <!-- Footer --> 
    </footer> 
 
</body> 
</html> 

Summary

HTML5 will be a lot easier to build websites, there are more HTML5 elements to get to grips with so I didn’t want to try and cover everything in one article. However, I hope that now you are more comfortable with HTML5.

No comments:

Post a Comment