HTML 5 - Features, Attributes and Events (Part-I)
HTML 5
- Its not a Programming language but a mark-up language.
- Standard for structuring & presenting content on the web.
- Its Co-operation between W3C (World Wide Web Consortium) & WHATWG (Web Hypertext Application Technology Working Group)
In this article, we will cover:
- New Features
- New HTML 5 Tags
- Standard Attributes
- Custom Attributes
- Events
1. New Features
- New Semantic Elements: header, footer, section
- Form 2.0: new attributes have been introduced for the input tags.
- Persistent local storage
- Next Gen Bi-directional Communication technology for the web app.
- Server-Side Events: Event which flow from Web Server to Web browser.
- Canvas: 2D drawing surface which can be programed with JS.
- Geolocation: Visitors can choose to share their physical location with Application
- Microdata: Lets you to create own vocabularies beyond html5 & allows to extend page with custom semantics.
- Drag & Drop
- DOCTYPE
- To specify the type of Html version application is running with.
- In case of older version, one must specify DTD
<!DOCTYPE Html>
- To tell the browser which character set to use while rendering the page
<meta charset="UTF-8">
- SCRIPT
- No type attribute required
- LINK
- No type attribute required
2. New HTML 5 Tags
- section: generic document or section. Can be used with h1-h6 to denote document structure.
- article: Independent piece of content of a document
- aside: piece of content that is only slightly related to the rest of the page
- header: header of a section
- footer: footer for a section. can contain footer info, like about us, copyright etc.
- nav: section of the document for the navigation
- dialog: to markup a conversation
- figure: used to embed caption & graphic content, such as image
3. Standard Attributes
- accesskey: keyboard shortcut to access an element
- align: Horizontally align tags to right, center, left
- background: place an background image behind an element by providing a link/url.
- bgcolor: place an background color
- class: provide css class
- contenteditable: set if content are editable or not, true/false
- contextmenu: specifies context-menu for an element, give id
- data-xxx : custom attributes, must have "data-" prefixed
- draggable: true/false/auto specifies is element is draggable
- hidden: visible or not
- height: numeric values
- width: numeric values
- item: groups elements
- itemprop: list of "items"
- spellcheck: if element must have its spelling checked
- subject: specifies elements corresponding item
- valign: vertically align an element, top/middle/bottom
4. Custom Attributes
- data-xxx
- Value for below data-subject attribute can be obtained by using JS APIs.
<div data-subject="physics">
......
</div>
5. Events
- offline: Triggers when document goes offline.
- onabort: Triggers on an abort event
- onafterprint: Triggers when the document is printed
- onbeforeload: Triggers before the document is loaded
- onbeforeprint: Triggers before document is printed
- onblur: Triggers when window looses focus
- oncanplay: Triggers when media can start play, might has to stop for buffering
- oncanplaythrough: Triggers when media can play through without stopping for buffering
- onchange: Triggers when element is changed
- oncontextmenu: Triggers when content menu is triggered
- ondblclick: Triggers when mouse double click happens
- ondragstart: Triggers when an drag operation is started
- ondragenter: Triggers when an element has been dragged to a valid dragging target
- ondragover: Triggers when an element is being dragged over a valid drop target
- ondrop: Triggers when an element is being dropped
- ondragend: Triggers when the drag operation is complete
- ondragleave: Triggers when an element leaves a valid drop target
- ondurationchange: Triggers when length of a media is changed
- onemptied: Triggers when an media resource element suddenly becomes empty.
- onended: Triggers when media is ended
- onerror: Triggers when an error occurs
- onforminput: triggers when a form gets user input
- onhaschanged: Triggers when document has changed
- oninput: Triggers when an element gets user input
- oninvalid: Triggers when an element is invalid
- onkeypressed: Triggers when key is pressed & released
- onkeyup: Triggers when a key is released
- onloadeddata: Triggers when media data is loaded
- onloadedmetadata: Triggers when duration & other media data is loaded
- onloadstart: Triggers when browser starts loading the media
- onmessage: Triggers when the message is triggered
- onmousedown: Triggers when a mouse button is pressed
- onmousemove: Triggers when mouse pointer is moved
- onmouseout: Triggers when mouse pointer moves out of an element
- onmouseup: Triggers when mouse button is released
- onmousewheel: Triggers when mouse wheel is rotated
- onoffline: Triggers when document goes offline
- onoine/ononline: Triggers when document becomes online
- onpagehide: Triggers when the window is hidden
- onpageshow: Triggers when window is shown
- onpopstate: Triggers when window's history changes
- onprogress: Triggers when browser fetching media data
- onstalled: Triggers when there is an error in fetching the media data
- onstorage: onload
- onsuspend: Triggers when browser has been fetching data but stopped before entire media file was fetched
- onunload: Triggers when user leaves the document
- onwaiting: Triggers when media has stopped playing but expected to resume
Happy Learning :)
Comments
Post a Comment