HTML5



1. What is HTML5?  

HTML 5 is a revision of the Hypertext Markup Language (HTML), the standard programming language for describing the contents and appearance of Web pages. HTML 5 is a new standard for HTML whose main aim is to deliver application without need of any additional plugins like flash, Silverlight etc. It has many thing from animations to videos, rich GUI etc..

HTML5 was developed to solve compatibility problems that affect the current standard, HTML4. One of the biggest differences between HTML5 and previous versions of the standard is that older versions of HTML require proprietary plugins and APIs. (This is why a Web page that was built and tested in one browser may not load correctly in another browser.) HTML5 provides one common interface to make loading elements easier. For example, there is no need to install a Flash plugin in HTML5 because the element will run by itself.

One of the design goals for HTML5 is to support for multimedia on mobile devices. New syntactic features were introduced to support this, such as video, audio and canvas tags. HTML5 also introduces new features which can really change the way users interact with documents including:

  • New parsing rules for enhanced flexibility
  • New attributes
  • Elimination of outmoded or redundant attributes
  • Drag and drop capabilities from one HTML5 document to another
  • Offline editing
  • Messaging enhancements
  • Detailed rules for parsing
  • MIME and protocol handler registration
  • A common standard for storing data in SQL databases (Web SQL)
HTML 5 was adopted by the new working group of the World Wide Web Consortium (W3C) in 2007. This group published the first public draft of HTML 5 in January 2008. As of now, HTML5 is in the "Call for Review" state, and the W3C expects that it will reach its final state by the end of 2014.




2. What is the difference between HTML and HTML5 ?  

HTML5 is just an upgraded version of HTML, HTML5 come with more innovative features such as Video, Audio/mp3, date select function , placeholder , Canvas, 2D/3D Graphics, Local SQL Database added so that no need to do external plugin like Flash player or other library

From a broader perspective, HTML was a simple language for laying out text and images on a webpage, whereas HTML5 can be viewed as an application development platform that does what HTML does that and more, including better support for audio, video, and interactive graphics. It has a number of new elements, supports offline data storage for applications, and has more robust exchange protocols. Thus, proprietary plug-in technologies like Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun JavaFX are no longer needed, because browsers can now process these elements without additional requirements.



3. What are the new features provided in HTML5?  

Some of the new features provided in HTML5 are:

1. It provides support for local storage
2. New form controls, like calendar, date, time, email, url, search
3. < canvas > element is provided to facilitate 2D drawing
4. The < video > and < audio > elements are provided for media playback
5. New content-specific elements are provided. For e.g. < article >, < header >, < footer >, < nav >, < section >



4. What are the different new form element types in HTML 5?  

There are 10 important new form elements introduced in HTML 5:-

1.Color.
2.Date
3.Datetime-local
4.Email
5.Time
6.Url
7.Range
8.Telephone
9.Number
10.Search
Let's understand these elements step by step.

If you want to show color picker dialog box.

          <input type="color" name="favcolor" > 


If you want to show calendar dialog box.

          <input type="date" name="bday" > 


If you want to show calendar with local time.

          <input type="datetime-local" name="bdaytime" > 


If you want to create a HTML text with email validation we can set the type as "email".

          <input type="email" name="email" >



For URL validation set the type as "url" as shown in the below HTML code.

          <input type="url" name="sitename" > 



For URL validation set the type as "url" as shown in the below HTML code.

If you want to display textbox with number range you can set type to number.

          <input type="number" name="quantity" min="1" max="5" > 



If you want to display a range control you can use type as range.

          <input type="range"  min="0" max="10" step="2" value="6" > 



Want to make text box as search engine box.

          <input type="search" name="googleengine" > 

What to only take time input

          <input type="time" name="usr_time" > 

If you want to make text box to accept telephone numbers.

          <input type="tel" name="mytel" > 




5. Name some of the new features of HTML5 & explain?  

HTML5 introduces a number of new elements and attributes that helps in building a modern websites. Following are great features introduced in HTML5 :

  • New Semantic Elements - These are like < header >, < footer >, and < section >.
  • Forms 2.0 - Improvements to HTML web forms where new attributes have been introduced for < input > tag.
  • Persistent Local Storage - To achieve without resorting to third-party plugins.
  • WebSocket - A a next-generation bidirectional communication technology for web applications.
  • Server-Sent Events - HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).
  • Canvas - This supports a two-dimensional drawing surface that you can program with JavaScript.
  • Audio & Video - You can embed audio or video on your web pages without resorting to third-party plugins.
  • Geolocation - Now visitors can choose to share their physical location with your web application.
  • Microdata - This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.
  • Drag and drop - Drag and drop the items from one location to another location on a the same webpage.



6. What are the various tags provided for better structuring in HTML5?  

article - This tag defines an article.
aside - It defines content other than the page content.
bdi - This tag isolates a part of text for formatting.
command - It defines a command button to be invoked by the user.
details - It defines additional details that can be viewed .
dialog - It defines a dialog box.
figure - This tag specifies content like illustrations, diagrams, photos, code listings etc.
figcaption - It is used to provide a caption for a figure element .
footer - This tag defines a footer for a document or section.
header - This tag is used to define a header for a document .
hgroup - When there are multiple levels in a heading, it groups a set of h1 to h6 elements.
mark - It defines highlighted text.
meter - It defines a scalar measurement within a known range.
nav - It defines links for navigation.
progress - This tag exhibits the progress of a task.
ruby - It defines a ruby annotation for East Asian typography.
rt - It defines an explanation/pronunciation of characters for East Asian typography.
rp - This tag tells the system what to display in browsers that do not support ruby annotations.
section - It defines a section in a document.
summary - It provides a visible heading for a details element.
time - This tag defines a date/time.
wbr - This tag defines a line-break.



7. What are new HTML 5 APIs?  

The most interesting HTML 5 APIs are:

  • HTML Drag & Drop
  • HTML5 Web-Storage
  • HTML5 Server Sent Event
  • HTML5 MicroData
  • HTML5 Web-SQL
  • HTML5 Web-Socket
  • HTML5 GeoLocation
  • HTML5 Web-Workers



8. What is the <!DOCTYPE > ? Is it necessary to use in HTML5 ?  

The <!DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in. AND The <!DOCTYPE> tag does not have an end tag and It is not case sensitive.

The <!DOCTYPE> declaration must be the very first thing in HTML5 document, before the <html> tag. As In HTML 4.01, all <! DOCTYPE> declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). WHERE AS HTML5 is not based on SGML, and therefore does not require a reference to a Document Type Definition (DTD).



9. What is SVG? What is a Canvas? What is the default border size of a canvas?  

1. SVG is the abbreviation for Scalable Vector Graphics and is recommended by W3C.
2. It is used to define vector-based graphics for the Web.
3. The graphics are defined in XML format.
4. An important quality of SVG graphics is that their quality is maintained even when they are zoomed or resized.
5. All the element and attributes of SVG files can be animated.

Canvas is a rectangular area on a HTML page, specified with the canvas tag. By default, It has no border. To get a border style attribute can be used.



10. What are the new image elements in HTML5 & What is the difference between SVG and < Canvas >?  

Canvas and WebGL. < Canvas> is a new element that acts as a container for graphical elements like images and graphics. Coupled with JavaScript, it supports 2D graphics. WebGL stands for Web Graphics Language, a free cross-platform API that is used for generating 3D graphics in web browsers.

< Canvas > is an element that manipulates two-dimensional (2D) pixels while Scalable Vector Graphics works in 2D and three-dimensional (3D) vectors. Essentially, < Canvas > is to SVG as Photoshop is to Illustrator.

SVG:

  • Here's it's like draw and remember. In other words any shape drawn by using SVG can be remembered and manipulated and browser can render it again.
  • SVG is good for creating graphics like CAD software's where once something is drawn the user wants to manipulate it.
  • This is slow as it needs to remember the co-ordinates for later manipulations.
  • We can have event handler associated with the drawing object.
  • Resolution independent

CANVAS:

  • Canvas is like draw and forget. Once something is drawn you cannot access that pixel and manipulate it.
  • Canvas is good for draw and forget scenarios like animation and games.
  • This is faster as there is no intention of remembering things later.
  • Here we cannot associate event handlers with drawing objects as we do not have reference of them.
  • Resolution dependent.



11. Which elements of HTML 4.01 are no more a part of HTML5?  

Following elements of HTML 4.01 are no more a part of HTML 5:

          <acronym>
          <applet>
          <basefont>
          <big>
          <center>
          <dir>
          <font>
          <frame>
          <frameset>
          <noframes>
          <strike>
          <tt>   



12. Which browsers support HTML5?  

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.



13. What is feature detection?  

Feature detection detect wheather some new feature of HTML 5 is running on the given browsers or not.

Feature detection can done by two ways:
1. Using modernizr.js
2. Using Simple JavaScript

           
     if(typeof(Storage) !== "undefined") {
     Code for localStorage/sessionStorage.
     } else {
     Sorry No Browser support for Storage }
   



14. How to add video and audio in HTML5?  

The canvas element is used to draw graphics images on a web page by using javascript like below

Like below we can add video in html5
1. <video width="320" height="240" controls="controls">
2. <source src="mysong.mp4" type="video/mp4" />
3. <source src="mysong.ogg" type="video/ogg" />
4. </video>

And audio like this
1. <audio controls="controls" >
2. <source src="mysong.ogg" type="audio/ogg" />
3. <source src="mysong.mp3" type="audio/mpeg" />
4. </audio >



15. What are data- attributes good for?  

The HTML5 data- attribute is a new addition that assigns custom data to an element. It was built to store sensitive or private data that is exclusive to a page or application, for which there are no other matching attributes or elements.



16. What is the difference between HTML5 interaction in Sencha and Twitter/Bootstrap?  

Sencha and Twitter/Bootstrap are both HTML development frameworks that integrate HTML5, CSS3, and JavaScript. The major difference is that in Sencha, the three languages are all comingled together in code, whereas in Bootstrap, HTML and CSS and decoupled.



17. What is HTML5 Web Storage?  

With HTML5, it is possible for the web pages to store the data locally in the user's browser. This web storage is much faster and secured than the cookies. Also, a larger amount of data can be stored without causing any adverse effect to the performance of the website.

The data here is not included with every server request. It is used ONLY when it is asked for. It is only that particular web page that can access the data stored by itself.



18. What is local storage concept in HTML 5?  

Many times we would like to store information about the user locally in the computer. For example let's say user has half-filled a long form and suddenly the internet connection breaks off. So the user would like you to store this information locally and when the internet comes back.He would like to get that information and send it to the server for storage.

Modern browsers have storage called as "Local storage" in which you can store this information.



19. How can we add and remove data from local storage?  

Data is added to local storage using "key" and "value". Below sample code shows country data "India" added with key value "Key001".

           localStorage.setItem(“Key001”,”India”); 


To retrieve data from local storage we need to use "getItem" providing the key name.
          var country = localStorage.getItem(“Key001”); 


You can also store JavaScript object's in the local storage using the below code.
        
         var country = {};
         country.name = “India”;
         country.code = “I001”;
         localStorage.setItem(“I001”, country);
         var country1 = localStorage.getItem(“I001”);


If you want to store in JSON format you can use "JSON.stringify" function as shown in the below code.
          localStorage.setItem(“I001”,JSON.stringify(country));



20. What are custom attributes in HTML5?  

A custom data attribute starts with data- and would be named based on your requirement. Following is the simple example-

       < div class="example" data-subject="physics" data-level="complex">
        ...
       < /div>
       

The above will be perfectly valid HTML5 with two custom attributes called data-subject and data-level. You would be able to get the values of these attributes using JavaScript APIs or CSS in similar way as you get for standard attributes.



Java Interview Question

.Net Interview Question

PHP Interview Question

AngularJS Interview Questions