HTML5 Features Techniques

-

New Doctype 

(old doctype)
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
(New doctype)
<!DOCTYPE html>
 

Make your Content Editable

The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.
<!DOCTYPE html>
 
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>editcontent</title>
</head>
<body>
    <h2>Best Friends </h2>
     <ul contenteditable="true">
        <li>Anil</li>
        <li>Raja
       <li>Krish</li>
     </ul>
</body>
</html>

 

HTML 5 features which are useful right now include:

  • Web Workers: Certain web applications use heavy scripts to perform functions. Web Workers use separate background threads for processing and it does not effect the performance of a web page.
  • Video: You can embed video without third-party proprietary plug-ins or codec. Video becomes as easy as embedding an image.
  • Canvas: This feature allows a web developer to render graphics on the fly. As with video, there is no need for a plug in.
  • Application caches: Web pages will start storing more and more information locally on the visitor's computer. It works like cookies, but where cookies are small, the new feature allows for much larger files. Google Gears is an excellent example of this in action.
  • Geolocation: Best known for use on mobile devices, geolocation is coming with HTML5.

Comments

Post a Comment

Popular posts from this blog

Basic concepts of flexbox

-
Image
Basic concepts of flexbox The Complete CSS Flex Box Tutorial:- Flexible Box Module designed as a one-dimensional layout model. Start you flexbox coding a few terms associated with the flex layout model. The two main components its call flex container and flex items. The browser support for the latest flexbox specification is:     •  Chrome 29+     •  Firefox 28+     •  Internet Explorer 11+     •  Opera 17+     •  Safari 6.1+ (prefixed with -webkit-)     •  Android 4.4+     •  iOS 7.1+ (prefixed with -webkit-) Flex Container: - using css display property its call display flex or display inline-flex. Like this.   .container { display:flex} OR .container {display:inline-flex} Using Flex Container Properties :     •  flex-direction     •  flex-wrap     •  flex...
Read more

CSS Tricks

-
Hover Effects & CSS Transition Hover Effects allow you to change CSS properties when you hover Selected elements and CSS transition is the way to control animation speed when changing CSS properties. Like color background   with css animation Without Animation CSS.         .a{           color: #eee;         }         .a:hover{           color: #000;         } With Animation CSS you can write to Transition effect in css like this .         .a{             -webkit-transition: color 1s ease-in; /*safari and chrome */            -moz-transition: color 1s ease-in; /* firefox */       ...
Read more

WHY TO USE HTML5

-
Image
HTML5 is the latest iteration of HTML addressing modern needs and expectations of websites. It deals with things like semantic markup, providing information about content it describes, it is becoming new standard for all good web developers and browser vendors love it as it does its magic on, I’m going to say it once more, desktop and mobile devices alike. Here are 5 reasons why HTML5 matters: 1 – HTML5 is becoming a new standard it is very rapidly becoming a standard. Developers want to use HTML5 which in return makes it all the more popular and the driving force for it to be here to stay is strong. Modern browsers all support HTML5 allowing developers to use all the new and exciting features it offers in order to create more dynamic end results. It 2 - HTML5 is faster and cheaper What’s the main reason industry wants to support HTML5? It reduces development time. By focusing on latest browsers and not being hold up on old ones (while providing graceful content...
Read more