{"id":418,"date":"2011-06-14T07:12:00","date_gmt":"2011-06-14T07:12:00","guid":{"rendered":"https:\/\/chayilyam.com\/stories\/?p=418"},"modified":"2011-06-14T07:12:00","modified_gmt":"2011-06-14T07:12:00","slug":"new-markup-elements-for-html5","status":"publish","type":"post","link":"https:\/\/chayilyam.com\/stories\/new-markup-elements-for-html5\/","title":{"rendered":"New Markup Elements for HTML5"},"content":{"rendered":"

New Markup Elements<\/h2>\n

New elements for better structure:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Tag<\/th>\nDescription<\/th>\n<\/tr>\n
\n
<\/td>\n
For external content, like text from a news-article, blog, forum, or any
other content from an external source<\/td>\n<\/tr>\n
\nFor content aside from the content it is placed in. The aside content should
be related to the surrounding content<\/td>\n<\/tr>\n
<\/td>\nA button, or a radiobutton, or a checkbox<\/td>\n<\/tr>\n
\n
<\/td>\n
For describing details about a document, or parts of a document<\/td>\n<\/tr>\n
\n<\/td>\nA caption, or summary, inside the details element<\/td>\n<\/tr>\n
\n
<\/td>\n
For grouping a section of
stand-alone content, could be a video<\/td>\n<\/tr>\n
<\/td>\n
The caption of the figure section<\/td>\n<\/tr>\n
\n
<\/td>\n
For a footer of a document or section, could include the name of the author, the
date of the document, contact information, or copyright information<\/td>\n<\/tr>\n
\n
<\/td>\n
For an introduction of a document or section, could include navigation<\/td>\n<\/tr>\n
\n
<\/td>\n
For a section of headings, using <\/p>\n

to <\/p>\n

, where the largest is the main
heading of the section, and the others are sub-headings<\/td>\n<\/tr>\n
<\/td>\nFor text that should be highlighted<\/td>\n<\/tr>\n
<\/td>\nFor a measurement, used only if the maximum and minimum values are known<\/td>\n<\/tr>\n
\nFor a section of navigation<\/td>\n<\/tr>\n
<\/td>\nThe state of a work in progress<\/td>\n<\/tr>\n
<\/td>\nFor ruby annotation (Chinese notes or characters)<\/td>\n<\/tr>\n
<\/td>\nFor explanation of the ruby annotation<\/td>\n<\/tr>\n
<\/td>\nWhat to show browsers that do not support the ruby element<\/td>\n<\/tr>\n
\n
<\/td>\n
For a section in a document. Such as chapters, headers, footers, or any
other sections of the document<\/td>\n<\/tr>\n
For defining a time or a date, or both<\/td>\n<\/tr>\n
<\/td>\nWord break. For defining a line-break opportunity.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/p>\n

New Media Elements<\/h2>\n

HTML5 provides a new standard for media content:<\/p>\n\n\n\n\n\n\n\n
Tag<\/th>\nDescription<\/th>\n<\/tr>\n
For multimedia content, sounds, music or other audio streams<\/td>\n<\/tr>\n
For video content, such as a movie clip or other video streams<\/td>\n<\/tr>\n
<\/td>\nFor media resources for media elements, defined inside video or audio
elements<\/td>\n<\/tr>\n
<\/td>\nFor embedded content, such as a plug-in<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/p>\n

The Canvas Element<\/h2>\n

The canvas element uses JavaScript to make drawings on a web page.<\/p>\n\n\n\n\n
Tag<\/th>\nDescription<\/th>\n<\/tr>\n
<\/td>\nFor making graphics with a script<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/p>\n

New Form Elements<\/h2>\n

HTML5 offers more form elements, with more functionality:<\/p>\n\n\n\n\n\n\n
Tag<\/th>\nDescription<\/th>\n<\/tr>\n
<\/td>\nA list of options for input values<\/td>\n<\/tr>\n
<\/td>\nGenerate keys to authenticate users<\/td>\n<\/tr>\n
<\/td>\nFor different types of output, such as output written by a script<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/p>\n

New Input Type Attribute Values<\/h2>\n

Also, the input element’s type attribute has many new values, for
better input control before sending it to the server:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Type<\/th>\nDescription<\/th>\n<\/tr>\n
tel<\/td>\nThe input value is of type telephone number<\/td>\n<\/tr>\n
search<\/td>\nThe input field is a search field<\/td>\n<\/tr>\n
url<\/td>\nThe input value is a URL<\/td>\n<\/tr>\n
email<\/td>\nThe input value is one or more email addresses<\/td>\n<\/tr>\n
datetime<\/td>\nThe input value is a date and\/or time<\/td>\n<\/tr>\n
date<\/td>\nThe input value is a date<\/td>\n<\/tr>\n
month<\/td>\nThe input value is a month<\/td>\n<\/tr>\n
week<\/td>\nThe input value is a week<\/td>\n<\/tr>\n
time<\/td>\nThe input value is of type time<\/td>\n<\/tr>\n
datetime-local<\/td>\nThe input value is a local date\/time<\/td>\n<\/tr>\n
number<\/td>\nThe input value is a number<\/td>\n<\/tr>\n
range<\/td>\nThe input value is a number in a given range<\/td>\n<\/tr>\n
color<\/td>\nThe input value is a hexadecimal color, like #FF8800<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

New Markup Elements New elements for better structure: Tag Description For external content, like text from a news-article, blog, forum, or any other content from an external source For content aside from the content it is placed in. The aside content should be related to the surrounding content A button, or a radiobutton, or a …<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[25,195,196,520],"tags":[],"class_list":["post-418","post","type-post","status-publish","format-standard","hentry","category-audio","category-html","category-html5","category-web-design"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_shortlink":"https:\/\/wp.me\/pfoK1S-6K","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts\/418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/comments?post=418"}],"version-history":[{"count":0,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts\/418\/revisions"}],"wp:attachment":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/media?parent=418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/categories?post=418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/tags?post=418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}