HTML is the most powerful content presenting language of the WWW, an old but crucial technology of the Internet. HTML 5 is the latest version of HTML standard and it added a lot of new features compared to the previous HTML 4 for better experience on web page layouts and designs. With new HTML 5 get ready to experience a new web browsing in multimedia and graphics related content. Almost all major browsers have already started supporting most of its elements and attributes.
I have mentioned below a few new changes and additions of elements and attributes in HTML 5.
Doctype and Charest
In new HTML 5 you can write <! doctype html> instead of long doctype declaration in HTML 4, it’s because HTML 5 is now separated from SGML.
HTML 5 uses UTF-8 as character set which again can be defined in meta tag as <meta charset=”UTF-8″>
New structure defining Tags
With HTML 5 web pages can now be easily structured.
| <section> | This new tag defines a section in web pages. this can be considered as the any chapter of the book. Section may be footer, header any part of the document. |
| <nav> | Defines navigation from current pages, easy to handle other links on pages. |
| <header> | Not same as <head>, It defines the heading of documents or sections. |
| <footer> | You can easily guess as the name suggest, it defines the footer of the document or sections and generally contains the copyright or author name like information. |
| <article> | The main text content of the page, also the external text content from blogs and forums can be linked. |
| <aside> | To define some extra content apart from the main. It may represent content related to the main content in form of note, tip, pull quote, sidebar or remark. |
| <figure> | It can represent a block of images or video. This related to the document or the section. |
Inline elements
| <mark> | This is for highlighted text. Think of a highlighted text of a book. It is just like emphasized text but not exactly the same. |
| <time> | To define the content of the HTML as time or date. It defines a specific moments. |
| <meter> | Used to show a part of a numeric value, you can say a fraction of a value. |
| <progress> | To define the state of any outgoing process. It defines the progress of work. |
Media elements in HTML 5
| <video> | Allow adding video on your web page directly and in very simple way. |
| <audio> | Simply add audio stream on your web page. |
| <embed> | To embed plug-in like content. |
The exciting new <canvas> element
Now on your web pages you can directly add images or graphs in <canvas> tag using JavaScript.
It basically provides drawing space on your web pages using JavaScript
The New form elements in HTML 5
| <datalist> | Provide a list of option for input values. |
| <output> | This defines the output obtained from some different script. |
| <keygen> | To authenticate users directly from HTML code. |
Input type attribute’s values in HTML 5
| <input type=”tel”> | The ‘tel’ value of type attribute is for telephone number. |
| <input type=”search”> | This value defines input field as search field. |
| <input type=”url”> | This attribute value tells input value is an URL. |
| <input type=”email”> | The input value is an email. |
| <input type=”datetime”> | This attribute value defines input value is date or time. |
| <input type=”date”> | This value defines input value is a date. |
| <input type=”month”> | Input value is a month. |
| <input type=”week”> | Input value is a week. |
| <input type=”time”> | Input value is a time. |
| <input type=”number”> | Input value is of type number. |
| <input type=”range”> | Input value is a number in a defined range. |
| <input type=”color”> | Input value is color in hexadecimal notation |
| <input type=”datetime-local”> | Input value is local date or time. |
Some other new elements in HTML 5
| <command> | Defines a button, radio button or checkbox,used with <menu> tag |
| <details> | Defines the details of a document or a part of the document. We can use < legend> tag to summarize it further inside it if needed. |
| <wbr> | Word break. |
Note: [ There are many other new HTML5 elements which are introduced but not mentioned here. ]
Now I would like to tell about some HTML elements which have been removed in HTML 5 recently
<center>
<acronym>
<noframes>
<applet>
<big>
<dir>
<basefont>
<font>
<frame>
<frameset>
<s>
<strike>
<u>
<tt>
<xmp>
Get ready for new web experience
In near future all the major browser like Firefox, IE, Chrome, Safari, Opera will support these tags and we will get more interactive web pages over Internet which will change our web experience forever. Though some of the tags might be removed due to not being able to fulfill the actual purpose they were meant for, but these changes will give a new turn to the era of web page development and design. I would request the readers to write any of their feedbacks or comments on this topic.
nice information. this will help me. thanks.You can test your knowledge in html by attending HTML Quiz
Thanks for the quick reference.
Some articles in this topic:
http://blog.mostof.it/html5-page-structure/
http://blog.mostof.it/a-basic-css3-reset/