New Elements in HTML5: A Practical Guide

Below is a list of new elements in HTML5 and describe how to use them.

New syntax / structure elements in HTML5

HTML5 brings new elements to better text structure.

Card DescriptionDefine an article. Define content next to page content Separating a text item can be formatted differently from the rest

More detailed definition for users to view or hide

Definition dialog box or window Definition of description for element

Definition of self content containing Footer Definition for text (document) or text (section)Define title for text or text section Definition for main content of the text Definition for the highlighted / highlighted text Definition of scalar measurement for a known rangeDefinition for navigation path Representing work progress Definition for what will show up in the browser without supporting ruby notes. Definition to explain / pronounce characters (with East Asia) Definition for ruby notes (with the word East Asia) Definition for a part in the text. Definition for the visible header of the element

Definition for date / time Definition for possible line breaks

New form elements in HTML5

Card Description Define a list of predefined options for input data

Definition for calculation results

New input data types in HTML5

New input data typeAttribute type for new input data

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• URL
• week

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• cần thiết
• step

HTML5 - New attribute syntax

HTML5 allows 4 syntax types for attributes.The example below shows the syntax types used in the tag

TypeExample Empty disabled> Don't quote value = John> Double quote value = "John Doe"> Quote value value = 'John Doe'>

In HTML5, all 4 syntaxes can be used, depending on what the attribute needs.

Graphics in HTML5

Card Description Draw graphics quickly through scripts (typically JavaScript) Draw resizable vector graphics