New Features of HTML 5
HTML5 offers new elements/tags and attributes that provide more functionality, flexibility, and efficiency for Web development. This article explains what is new in HTML5 or what are the new features of HTML5? Summary:
- What is HTML 5?
- Example of HTML 5
- HTML5 New Features
- New HTML5 API’s
What is HTML 5?
HTML5 is a version of markup language for structuring and presenting content for the WWW or World Wide Web. The previous version of markup language HTML4 has worked well, but it has some limitations. The HTML developers made a plan to overcome the limitations and try to build the HTML5 based on the following principles:
HTML5 is a version of markup language for structuring and presenting content for the WWW or World Wide Web. The previous version of markup language HTML4 has worked well, but it has some limitations. The HTML developers made a plan to overcome the limitations and try to build the HTML5 based on the following principles:
- For functionality plug-in for dependency should be less.
- Whenever possible, scripting should be replaced with markup language.
- Device independency.
Example of HTML 5
A sample example of HTML5 is given bellow:
A sample example of HTML5 is given bellow:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Cybarlab</title> </head> <body> Welcome to cybarlab.com </body> </html>
HTML5 New Features
HTML 5 added lot of new features. This new features allow developers to make their documents more easily understood by the search engines, remove the uses of browser plug-ins (such Flash or Silverlight). Some of the features are given bellow:
HTML 5 added lot of new features. This new features allow developers to make their documents more easily understood by the search engines, remove the uses of browser plug-ins (such Flash or Silverlight). Some of the features are given bellow:
New Doctype and Charset
The DOCTYPE and character encoding (charset) declaration for HTML5 is very simple.
<!DOCTYPE html>
<meta charset=”UTF-8″>
The DOCTYPE and character encoding (charset) declaration for HTML5 is very simple.
<!DOCTYPE html>
<meta charset=”UTF-8″>
New Structure
Generally web page have body content, sidebar content, navigation, headers, footers, and other features. And HTML 5 has created some tags to support those elements of the page.
Generally web page have body content, sidebar content, navigation, headers, footers, and other features. And HTML 5 has created some tags to support those elements of the page.
- <section> -used to define sections of pages
- <header> -used to defines the header of a page
- <footer> -used to defines the footer of a page
- <nav> -used to defines the navigation on a page
- <article> -used to defines the article or main content on a page
- <aside> -used to defines extra content like a sidebar on a page
- <figure> -used to defines images that annotate an article
New Form Controls
HTML 5 support all the previous standard form controls, with some new. The new HTML 5 new controls are given bellow:
HTML 5 support all the previous standard form controls, with some new. The new HTML 5 new controls are given bellow:
- search -used for search fields
- time -used to select a time
- date -used for input fields that should contain a date
- datetime -used to select a date and time with time zone
- datetime-local -used to select a date and time with no time zone
- month -used to select a month
- week -used to select a week
- number -used for input fields that should contain only a numerical data or value
- range -used for input fields that should contain a value between a range
- email -used for input fields that should contain a email or e-mail address
- url -used for input fields that should contain a web address or web URL
- tel -used for input fields that should contain a telephone number
New Graphic Elements
HTML 5 includes graphical elements to draw graphical shapes on the page.
HTML 5 includes graphical elements to draw graphical shapes on the page.
- <svg> -used to define vector-based graphics(SVG means Scalable Vector Graphics).
- <canvas> -used to draw graphics, on the fly with the help of scripting. It has several methods for drawing paths, text, boxes, circles, and adding images.
New Multimedia Elements
HTML 5 includes some multimedia elements to perform multimedia operation. Now we don’t need to use third party plagin.
HTML 5 includes some multimedia elements to perform multimedia operation. Now we don’t need to use third party plagin.
- <audio> -used to add audio on the page
- <video>. -use to add video on the page
Make Content Editable
With the help of new attribute (contenteditable) that can be applied to elements, we can change the text on the page.
<ul contenteditable=”true”>
With the help of new attribute (contenteditable) that can be applied to elements, we can change the text on the page.
<ul contenteditable=”true”>
Autofocus Attribute
Without JavaScript a particular input should be “selected,” or focused, by default with the help of autofocus attribute
<input type=”text” name=”mytext” autofocus>
Without JavaScript a particular input should be “selected,” or focused, by default with the help of autofocus attribute
<input type=”text” name=”mytext” autofocus>
Required Attribute
We can set a particular input mandatory.
<input type=”text” name=”mytext” required>
We can set a particular input mandatory.
<input type=”text” name=”mytext” required>
Allow Regular Expressions
HTML 5 supports regular express on a particular control using new pattern attribute.
<input type=”text” name=”mytext” pattern=”[A-Za-z]{1,10}”>
HTML 5 supports regular express on a particular control using new pattern attribute.
<input type=”text” name=”mytext” pattern=”[A-Za-z]{1,10}”>
New HTML5 API’s
HTML5 included some new API’s to make our works easy. Some common new HML 5 API’s (Application Programming Interfaces) are given bellow:
HTML5 included some new API’s to make our works easy. Some common new HML 5 API’s (Application Programming Interfaces) are given bellow:
- HTML Drag and Drop
- HTML Geolocation
- HTML Local Storage
- HTML Web Workers
- HTML Application Cache
- HTML SSE
HTML 5 adds a lot of great new features. Web design will be exciting when more browsers support it.
I like your blog, thanks for sharing
ReplyDeleteDot Net Online Training