HTML5 is the most dramatic leap in WEB development standards over the past decade. HTML5 is not just for web content, it brings the Web into a mature application platform, where video, audio, images, animations, and interactions with computers are standardized on the HTML5 platform.
Some interesting new features in HTML5:
- Canvas Elements for painting
- Video and audio elements for media playback
- Better support for local off-line storage
- New special content elements such as article, footer, header, nav, section
- New form controls, such as Calendar, date, time, email, url, search
HTML5 Browser Support:
The latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support some HTML5 features.
1.HTML5 Introduction
HTML5 is the next important version of the HTML standard that replaces HTML 4.01,xhtml 1.0 and XHTML 1.1. HTML5 is also a standard for building and presenting content on the World Wide Web.
HTML5 is the product of collaboration between the World Wide Web Consortium and the Web Hypertext Technology Working Group (WHATWG).
This new standard adds features such as video playback and drag-and-drop, which in the past relied on third-party browser plugins, such as Adobe Flash,microsoft Silverlight and Google Gears.
Browser support
The latest version of Apple Safari,mozilla FireFox and Opera supports most HTML5 features, and IE9 also supports some HTML5 features.
The mobile browsers preinstalled on Iphones,ipads and Android phones all have good support for HTML5.
New features
HTML5 introduces many new elements and attributes to help us build modern websites. The following are the main features introduced by HTML5:
New semantic elements: such as
Form 2.0: Improved HTML Web forms, introducing some new properties for the <input> tag.
Persistent local storage: In order not to be implemented through a third-party plug-in.
WebSocket: Next-generation bidirectional communication technology for WEB applications.
Server Push event: HTML5 introduces events from a Web server to a Web browser, also known as a server push event (SSE).
Canvas: Supports the programming of two-dimensional drawings in JavaScript.
Audio and Video: Embed audio or video in a Web page without the use of a third-party plugin.
Geo-targeting: Users can choose to share their geographic location with our web pages.
Micro-data: allows us to create custom vocabularies outside of HTML5 and extend pages with custom semantics.
- Drag and drop: Drag and drop items on the same page from one location to another.
Backwards compatible
HTML5 is designed to be backwards compatible with existing browsers as much as possible. The new features are built on existing features and allow us to provide alternative content for older browsers.
2.HTML5 syntax
HTML5 has "own" HTML syntax, which is compatible with HTML 4 and XHTML1 documents, but not the more complex SGML features in HTML 4.
HTML5 does not require a lowercase tag name in XHTML, a property must have a value and a syntax rule that must close all empty elements.
However, HTML5 is more flexible and supports the following forms:
- The label name is capitalized.
- The double quotation marks of the property are optional.
- The property value is optional.
- Closed empty elements are optional.
DOCTYPE
In older versions of HTML, DOCTYPE is very long, because the HTML language is SGML-based and needs to refer to a DTD.
HTML5 authors can use simple syntax to specify the following form of DOCTYPE:
<! DOCTYPE html>
The above syntax is case-insensitive.
Character encoding
HTML5 authors can use simple syntax to specify character encodings, as follows:
<meta charset= "UTF-8" >
<script> tags
It is common practice to add a type attribute with a value of "text/javascript" to the script element, as follows:
<script type= "Text/javascript" src= "Scriptfile.js" ></script>
HTML5 removed the additional information required, we can use the simple syntax shown below:
<script src= "Scriptfile.js" ></script>
<link> tags
So far we have written <link>:
<link rel= "stylesheet" type= "Text/css" href= "Stylefile.css" >
HTML5 removed the additional information required, we can use the simple syntax shown below:
<link rel= "stylesheet" href= "Stylefile.css" >
HTML5 elements
The HTML5 element uses a start tag and an end tag tag. Labels are qualified with the label name between the angle brackets.
The difference between the start tag and the end tag is that the label name contains a slash before it.
The following is an example of a HTML5 element:
<p>...</p>
HTML5 tag names are case-insensitive, can be capitalized or mixed, although the most common conventions are always lowercase.
Most elements contain some content, such as <p>...</p> contains a paragraph. However, some elements cannot contain arbitrary content, which is called a blank element. For example, Br,hr,link and meta and so on.
HTML5 Property
An element can contain an attribute (attributes), which is used to set various attributes (properties) for an element.
Some properties are defined as global and can be used on any element, while others are defined as element-specific. All properties have a name and a value, as shown in the following example.
Here is an example of using the HTML5 property, demonstrating how to tag a div element with a property named class and a value of "example":
<div class= "Example" >...</div>
Properties can only be specified in the start tag and must never be used in the end tag.
The HTML5 property is case-insensitive and can be capitalized or mixed, although the most common convention is to always use lowercase.
Here is a complete list of HTML5 properties.
HTML5 Documentation
To get a better structure, the following tags are introduced:
Section: This tag represents a common document or application stanza. It can be used with H1-H6 to represent the document structure.
Article: This tag represents a separate block of document content, such as a blog entry or article in a newspaper.
Aside: This tag represents a block of content that is slightly related to the rest of the page.
Header: This tag represents the head of a section.
Footer: This tag represents a footnote to a section that can contain information such as author, copyright, and so on.
Nav: This label represents the section used to navigate the document.
Dialog: This tag can be used to mark a session.
- Figure: This tag can be used to correlate titles and certain embedded content, compared to tables and videos.
The markup for a HTML5 document looks like this:
<! DOCTYPE html>
To facilitate the learning of this concept-we can practice online.
3.HTML5 PropertyAs stated in the HTML5 syntax, an element can contain attributes (attributes) to set various attributes (properties) on an element.
Some properties are defined as global and can be used on any element, while others are defined as element-specific. All properties have a name and a value, as shown in the following example.
Here is an example of using the HTML5 property, demonstrating how to tag a div element with a property named class and a value of "example":
<div class= "Example" >...</div>
Properties can only be specified in the start tag and must never be used in the end tag.
The HTML5 property is case-insensitive and can be capitalized or mixed, although the most common convention is to always use lowercase
Property |
Options |
Function |
AccessKey |
User definable |
Defines keyboard shortcuts for accessing elements. |
Align |
Right, left, center |
Aligns the labels horizontally. |
Background |
Url |
Sets a background image after the element. |
BgColor |
numeric, hexadecimal value, RGB value |
Sets a background color after the element. |
Class |
User-defined. |
Classifies an element to facilitate the use of cascading style sheets. |
Contenteditable |
True, False |
Defines whether the user can edit the contents of an element. |
ContextMenu |
Menu ID |
Defines a context menu for an element. |
Data-xxxx |
User-defined. |
Custom properties. The author of an HTML document can define its own properties. Custom properties must begin with "data-". |
Draggable |
True,false, Auto |
Defines whether the user can drag elements. |
Height |
numeric value |
Defines the height of a table, image, or table cell. |
Hidden |
Hidden |
Defines whether the element should be visible. |
Id |
User-defined. |
Name elements to facilitate the use of cascading style sheets. |
Item |
The list of elements. |
Used to combine elements. |
Itemprop |
The list of entries. |
Used to combine entries. |
SpellCheck |
True, False |
Defines whether the element must have a spelling or error check. |
Style |
CSS style sheet. |
Defines an inline style for an element. |
Subject |
User-defined ID. |
Defines the entry associated with the element. |
TabIndex |
Tab number |
The tab order that is set for the element. |
Title |
User-defined. |
The pop-up title of the element. |
valign |
Top, middle, bottom |
The vertical alignment of the label within the HTML element. |
Width |
numeric value. |
Defines the width of tables, images, and table cells. |
For a complete list of HTML5 tags and related properties, refer to the HTML5 tab.
Custom properties
HTML5 also introduces a new feature, which is the ability to add custom data properties.
Custom data attributes start with data-and are named based on our requirements. Here's a simple example.
<div class= "Example" data-subject= "Physics" data-level= "complex" >...</div>
In the above example, two custom properties called Data-subject and data-level are fully valid in HTML5. We can also use JavaScript APIs or get their values in CSS in a manner similar to getting the standard properties.
4.HTML5 Events
When users visit our website, they will click on the text, images, links, hover over something and so on. These are examples of JavaScript invocation events.
We can write event handlers in JavaScript or VBScript, and then specify these event handlers as values for the event label properties. The various event properties defined by the HTML5 specification are listed below.
When any event occurs on a HTML5 element, the following properties can be used to trigger any JavaScript and VBScript code provided as a value.
Here we cover only element-specific events, which are discussed in detail in later chapters.
Properties |
value |
Description |
Offline |
Script |
triggered when the document enters an offline state. |
Onabort |
Script |
Triggered when an event is interrupted. |
Onafterprint |
Script |
Triggered when the document is printed. |
Onbeforeonload |
Script |
Triggered before the document is loaded. |
Onbeforeprint |
Script |
Triggered before the document is printed. |
Onblur |
Script |
triggered when the window loses focus. |
Oncanplay |
Script |
The media stops buffering and can be triggered when playback starts. |
Oncanplaythrough |
Script |
The media can be played to the end of the trigger without stopping buffering. |
OnChange |
Script |
Triggered when the element is changed. |
OnClick |
Script |
Mouse click Trigger. |
OnContextMenu |
Script |
triggered when the context menu is triggered. |
OnDblClick |
Script |
Triggered when the mouse is double-clicked. |
Ondrag |
Script |
Triggered when the element is dragged. |
Ondragend |
Script |
Triggered at the end of a drag operation. |
OnDragEnter |
Script |
Triggered when the element is dragged to a valid drop target. |
OnDragLeave |
Script |
Triggers when an element leaves a valid drop target. |
OnDragOver |
Script |
Triggered when the element is dragged onto a valid target. |
Ondragstart |
Script |
Triggered at the start of a drag operation. |
OnDrop |
Script |
Triggered when the dragged element is placed. |
Ondurationchange |
Script |
triggered when the media length changes. |
Onemptied |
Script |
Triggered when a media resource element is suddenly emptied. |
onended |
Script |
Triggered when the media reaches the end point. |
OnError |
Script |
Triggered when an error occurs. |
onfocus |
Script |
Triggered when the window gets focus. |
Onformchange |
Script |
Triggered when the form changes. |
Onforminput |
Script |
Triggered when the form gets user input. |
Onhaschange |
Script |
triggered when the document changes. |
Oninput |
Script |
Triggers when the element obtains user input. |
Oninvalid |
Script |
triggered when an element fails. |
OnKeyDown |
Script |
Triggered when the keyboard is pressed. |
onkeypress |
Script |
Triggered when the keyboard is pressed and released. |
OnKeyUp |
Script |
Triggered when the key is released. |
OnLoad |
Script |
Triggered when the document is loaded. |
Onloadeddata |
Script |
Triggered when media data is loaded. |
Onloadedmetadata |
Script |
triggered when media data for a media element is loaded. |
Onloadstart |
Script |
Triggered when the browser starts loading media data. |
OnMessage |
Script |
Triggered when a message is triggered. |
OnMouseDown |
Script |
triggered when the mouse button is pressed. |
OnMouseMove |
Script |
triggered when the mouse pointer moves. |
onmouseout |
Script |
triggered when the mouse pointer moves out of the element. |
onmouseover |
Script |
triggered when the mouse pointer moves into an element. |
OnMouseUp |
Script |
triggered when the mouse button is released. |
OnMouseWheel |
Script |
triggered when the mouse wheel rotates. |
Onoffline |
Script |
triggered when the document enters an offline state. |
Onoine |
Script |
Triggered when the document is online. |
Ononline |
Script |
Triggered when the document is online. |
Onpagehide |
Script |
Triggered when the window is hidden. |
Onpageshow |
Script |
triggered when the window becomes visible. |
OnPause |
Script |
Triggered when media data is paused. |
Onplay |
Script |
Triggered when media data starts to play. |
Onplaying |
Script |
Triggered when media data is playing. |
Onpopstate |
Script |
triggered when the window history information is changed. |
OnProgress |
Script |
Triggered when the browser obtains media data. |
Onratechange |
Script |
Triggered when the playback ratio of the media data changes. |
onReadyStateChange |
Script |
Triggered when the ready-state changes. |
Onredo |
Script |
Triggered when the document performs a redo operation. |
OnResize |
Script |
triggered when the window size is resized. |
Onscroll |
Script |
Triggered when the scrollbar of an element is scrolled. |
Onseeked |
Script |
The seeking property of the media element is not triggered when it is true and ends. |
Onseeking |
Script |
The seeking property of the media element is true and is triggered when seeking starts. |
Onselect |
Script |
Triggered when the element is selected. |
Onstalled |
Script |
Gets the media data triggered when an error occurs. |
Onstorage |
Script |
Triggered when the document is loaded. |
OnSubmit |
Script |
Triggered when the form is submitted. |
Onsuspend |
Script |
The browser gets media data, but gets triggered when the entire media file is aborted. |
Ontimeupdate |
Script |
triggered when the media playback position changes. |
OnUndo |
Script |
Triggered when the document performs an undo operation. |
OnUnload |
Script |
Triggered when the user leaves the document. |
Onvolumechange |
Script |
Media volume changes, including triggered when set to mute. |
Onwaiting |
Script |
The media stops playing while waiting for the recovery to trigger. |
5.HTML5 Form 2.0
Web Form 2.0 is an extension of the HTML4 form attribute. The form elements and attributes in HTML5 provide a greater degree of semantic markup than HTML4, removing the tedious scripts and styles required in a large number of HTML4.
<input> elements in the HTML4
The HTML4 input box element uses the Type property to specify the data type. HTML4 provides the following types:
type |
|
Text |
A free-form text field, nominally without a line break. |
Password |
A free-form text field for sensitive information that does not have a line break on its name. |
CheckBox |
A set of 0 or more values in a predefined list. |
Radio |
One of the enumeration values. |
Submit |
A free form button to start the form. |
File |
Any file with a MIME type and an optional file name. |
Image |
The additional semantics of a coordinate relative to the size of a particular image is that it must be the last selected value while initiating the form submission. |
Hidden |
Any string that is not displayed to the user by default. |
Select |
The enumeration value, similar to the radio type. |
TextArea |
Free form of text field, nominally without the restriction of line wrapping. |
button |
Free Form button that can start any event related to the button.
|
Here's a simple example of using label labels, radio buttons, and Submit buttons:
... <form action= "http://example.com/cgiscript.pl" method= "POST" > <p> <label for= "FirstName ">first Name: </label> <input type=" text "id=" FirstName "><br/> <label for=" LastName ">last Name: </label> <input type=" text "id=" LastName "><br/> <label for=" Email "> Email: </label> <input type= "text" id= "email" ><br> <input type= "Radio" name= "Sex" value = "Male" > male<br> <input type= "Radio" name= "Sex" value= "female" > female<br> <input Type= "Submit" value= "send" > <input type= "reset" > </p> </form> ...
<input> elements in the HTML5
In addition to the attributes mentioned above, HTML5 introduces several new values to the Type property of the input box element. As listed in the following table.
Note: Please use the latest version of Opera browser to run all of the following examples.
type |
Description |
Datetime |
According to the ISO 8601 encoding, the time zone is set to UTC for the date and time (including year, month, day, hour, minute, second, seconds). |
Datetime-local |
Date and time encoded in accordance with ISO 8601 (including year, month, day, hour, minute, second, seconds), without time zone information. |
Date |
Date encoded in accordance with ISO 8601 (including year, month, day). |
Month |
The date of the year and month that is encoded by ISO 8601. |
Week |
The date of the year and Day of the week encoded by ISO 8601. |
Time |
Encode time according to ISO 8601 (including hour, minute, second, and seconds). |
Number |
Only values are accepted. The Step property can specify the precision, which defaults to 1. |
Range |
The range type applies to input fields that should contain values in a range. |
Email |
Only mailbox values are accepted. This type applies to input fields that should contain an e-mail address. If you attempt to submit a simple text, it will force a request to enter an email address in [email protected] format. |
Url |
Only URL values are accepted. This type applies to input fields that should contain a URL address. If you attempt to submit a simple text, it will force a request to enter a URL address in http://www.example.com or http://example.com format. |
<output> elements
HTML5 also introduces a new element <output>, which is used to represent different types of output, such as the output written by the script.
You can also use the For property to specify the relationship between the output element and other elements in the document that affect the calculation (for example, as an input source or parameter). The value of the For property is a list of IDs for other elements separated by spaces.
Easy to learn this concept-please practice online.
Placeholder Property
HTML5 introduces a new attribute called Palceholder. This property provides the user with hints on what to enter in this field on the <input> and <textarea> elements. Placeholder characters cannot contain carriage returns or line feeds.
The following is a simple syntax for the placeholder property:
<input type= "text" name= "search" placeholder= "search the Web"/>
This property is only available with the latest version of Mozilla,safari and Chrome browser support.
Easy to learn this concept-please practice online.
Required Property
Now, we do not need to use JavaScript to handle such client validation as an empty text box can never be committed, because HTML5 introduces a new property called required, which is used as follows, which guarantees that the input box has a value:
<input type= "text" name= "search" required/>
This property is only available with the latest version of Mozilla,safari and Chrome browser support.
HTML5 Study Summary