{"id":877,"date":"2011-05-10T11:04:42","date_gmt":"2011-05-10T18:04:42","guid":{"rendered":"http:\/\/truelogic.org\/wordpress\/?p=877"},"modified":"2011-05-10T11:04:42","modified_gmt":"2011-05-10T18:04:42","slug":"changes-in-html-5-0","status":"publish","type":"post","link":"https:\/\/truelogic.org\/wordpress\/2011\/05\/10\/changes-in-html-5-0\/","title":{"rendered":"Changes in HTML 5.0"},"content":{"rendered":"

HTML is the most powerful content presenting language of the WWW, an old but crucial technology\u00a0of 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\u00a0better 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.\u00a0Almost all major browsers have already\u00a0started supporting most of its elements and attributes.<\/p>\n

I have mentioned below a few new changes and additions of elements and attributes in\u00a0HTML 5.<\/p>\n

 <\/p>\n

Doctype and Charest<\/span><\/p>\n

In new HTML 5 you can write <! doctype html> <\/strong> instead of long doctype declaration in HTML 4, it\u2019s because HTML 5 is now separated from SGML.<\/p>\n

HTML 5 uses UTF-8 as character set which again can be defined in meta tag as\u00a0<meta charset=”UTF-8″> <\/strong><\/p>\n

 <\/p>\n

New structure defining Tags<\/span><\/p>\n

With HTML 5 web pages can now be easily structured.<\/p>\n\n\n\n\n\n\n\n\n\n
<section><\/strong><\/td>\nThis 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.<\/td>\n<\/tr>\n
<nav><\/strong><\/td>\nDefines navigation from current pages, easy to handle other links on pages.<\/td>\n<\/tr>\n
<header><\/strong><\/td>\nNot same as <head>, It defines the heading of documents or sections.<\/td>\n<\/tr>\n
<footer><\/strong><\/td>\nYou can easily guess as the name suggest, it defines the footer of the\u00a0document or sections and generally contains the copyright or author name like information.<\/td>\n<\/tr>\n
<article><\/strong><\/td>\nThe main text content of the page, also the external text content from blogs\u00a0and forums can be linked.<\/td>\n<\/tr>\n
<aside><\/strong><\/td>\nTo 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.<\/td>\n<\/tr>\n
<figure><\/strong><\/td>\nIt can represent a block of images or video. This related to the document or the section.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\nInline elements <\/span><\/p>\n\n\n\n\n\n\n
<mark><\/strong><\/td>\nThis is for highlighted text. Think of a highlighted text of a book. It is just like emphasized text but not exactly the same.<\/td>\n<\/tr>\n
<time><\/strong><\/td>\nTo define the content of the HTML as time or date. It defines a specific moments.<\/td>\n<\/tr>\n
<meter><\/strong><\/td>\nUsed to show a part of a numeric value, you can say a fraction of a value.<\/td>\n<\/tr>\n
<progress><\/strong><\/td>\nTo define the state of any outgoing process. It defines the progress of work.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

Media elements in HTML 5 <\/span><\/p>\n\n\n\n\n\n
<video><\/strong><\/td>\nAllow adding video on your web page directly and in very simple way.<\/td>\n<\/tr>\n
<audio><\/strong><\/td>\nSimply add audio stream on your web page.<\/td>\n<\/tr>\n
<embed><\/strong><\/td>\nTo embed plug-in like content.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

The exciting new <canvas> element <\/span><\/p>\n

Now on your web pages you can directly add images or graphs in <canvas> tag using JavaScript.
\nIt basically provides drawing space on your web pages using JavaScript<\/p>\n

 <\/p>\n

The New form elements in HTML 5 <\/span><\/p>\n\n\n\n\n\n
<datalist> <\/strong><\/td>\nProvide a list of option for input values.<\/td>\n<\/tr>\n
<output> <\/strong><\/td>\nThis defines the output obtained from some different script.<\/td>\n<\/tr>\n
<keygen> <\/strong><\/td>\nTo authenticate users directly from HTML code.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

Input type attribute\u2019s values in HTML 5 <\/span><\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
<input type=\u201dtel\u201d> <\/strong><\/td>\nThe \u2018tel\u2019 value of type attribute is for telephone number.<\/td>\n<\/tr>\n
<input type=\u201dsearch\u201d> <\/strong><\/td>\nThis value defines input field as search field.<\/td>\n<\/tr>\n
<input type=\u201durl\u201d> <\/strong><\/td>\nThis attribute value tells input value is an URL.<\/td>\n<\/tr>\n
<input type=\u201demail\u201d><\/strong><\/td>\nThe input value is an email.<\/td>\n<\/tr>\n
<input type=\u201ddatetime\u201d><\/strong><\/td>\nThis attribute value defines input value is date or time.<\/td>\n<\/tr>\n
<input type=\u201ddate\u201d><\/strong><\/td>\nThis value defines input value is a date.<\/td>\n<\/tr>\n
<input type=\u201dmonth\u201d><\/strong><\/td>\nInput value is a month.<\/td>\n<\/tr>\n
<input type=\u201dweek\u201d><\/strong><\/td>\nInput value is a week.<\/td>\n<\/tr>\n
<input type=\u201dtime\u201d><\/strong><\/td>\nInput value is a time.<\/td>\n<\/tr>\n
<input type=\u201dnumber\u201d><\/strong><\/td>\nInput value is of type number.<\/td>\n<\/tr>\n
<input type=\u201drange\u201d><\/strong><\/td>\nInput value is a number in a defined range.<\/td>\n<\/tr>\n
<input type=\u201dcolor\u201d><\/strong><\/td>\nInput value is color in hexadecimal notation<\/td>\n<\/tr>\n
<input type=\u201ddatetime-local\u201d> <\/strong><\/td>\nInput value is local date or time.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

Some other new elements in HTML 5<\/span><\/p>\n\n\n\n\n\n
<command><\/strong><\/td>\nDefines a button, radio button or checkbox,used with <menu> tag<\/td>\n<\/tr>\n
<details><\/strong><\/td>\nDefines the details of a document or a part of the document. We can use\u00a0< legend> tag to summarize\u00a0it further inside it if needed.<\/td>\n<\/tr>\n
<wbr><\/strong><\/td>\nWord break.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Note:<\/strong> [ There are many other new HTML5 elements which are introduced but not mentioned here. ] <\/span><\/p>\n

 <\/p>\n

Now I would like to tell about some HTML elements which have been removed in HTML 5 recently <\/span><\/p>\n

\"\"<\/a><\/p>\n

<center>
\n<acronym>
\n<noframes>
\n<applet>
\n<big>
\n<dir>
\n<basefont>
\n<font>
\n<frame>
\n<frameset>
\n<s>
\n<strike>
\n<u>
\n<tt>
\n<xmp><\/p>\n


\nGet ready for new web experience<\/span><\/p>\n

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\u00a0 \u00a0the 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.<\/p>\n","protected":false},"excerpt":{"rendered":"

HTML is the most powerful content presenting language of the WWW, an old but crucial technology\u00a0of the Internet. HTML 5 is the latest version of […]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":1929,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,14,16],"tags":[27,62,303,187,227,246,257],"class_list":["post-877","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-web-designing","category-www-stuff","tag-27","tag-changes","tag-html","tag-new","tag-sanjay","tag-tags","tag-truelogic"],"_links":{"self":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/877","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/comments?post=877"}],"version-history":[{"count":0,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/877\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media\/1929"}],"wp:attachment":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media?parent=877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/categories?post=877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/tags?post=877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}