Q.1: Please Explain Key Goals and Uses of HTML5?
Ans: HTML5 is the newest version of HTML. Major goals of HTML5 are making HTML code easier to read and staying update with the latest multimedia formats. It also aims to define the processes for dealing with syntax errors, so that invalid code will be handled the same by all web browsers. One of the key goals for HTML5 is to support for multimedia on mobile devices.
Q.2: Explain key features of HTML5?
Ans: HTML5 offers so many new and advanced features to web designers and UI developers.
Canvas: This is the new feature of HTML5. Now one can achieve great graphics and visual images on the fly using <Canvas> element and JavaScript.
Video: Now we can put video on our web pages using HTML5. Advanced video galleries and video players can be designed using JavaScript and HTML5.
Local Storage: This is very much similar to JavaScript Cookies, but this is designed to accommodate large amount of information. Also unlike cookies it is not send to server every time the request is made. It remains on the local computer and can be loaded using JavaScript once the page is loaded.
Web Worker: This feature provides the browser to run JavaScript in background so it can be used to boost the performance of HTML applications.
Offline Mode: This great feature allows users to create web site that can work even in offline mode.
Geo Location: With this we can trace the location of the user so that website owners can provide geography based information to their users. It is a best feature to improve the user experience by offering user expected information.
Input Types: HTML5 comes with more input types such as search, email, range, color, telephone(tel), and url to name some. These new addition to the input type are going to make the life of developers a lot more simple
Placeholder Text: It creates a watermark text for our input text box and ended up writing JavaScript code to handle it. This comes inbuilt with HTML5 placeholder text attribute of input type.
Q.3: Explain difference between application model of HTML5 and HTML?
Ans: HTML 1.0 – 4.0 (and XHTML) were all specifications for laying out text and images on a page.
HTML5 strives to be something very different. It aims to be more of an application development platform, which includes not only laying out text and images, but also playing video and audio, interactive 2d and 3d graphics, storing data in the application, dealing with online and offline access to data, and real-time networking protocols for exchanging data as it happens.
Q.4: How do we indicate the character set being used by an HTML5 document? How it’s differ from HTML standards?
Ans: In HTML5, the encoding can be indicated with the charset attribute of a <meta> tag inside the document’s <head> element:
<!DOCTYPE html> <html> <head> ... <meta charset="UTF-8"> ... </head> ... </html>
This is a slightly simpler syntax from older HTML standards, which did not have the charset attribute. For example, an HTML 4.01 document would use the <meta> tag as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> ... <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ... </head> ... </html>
Q.5: Please describe following HTML5 elements:
- <header>
- <article>
- <section>
- <footer>
Ans:
<header>
The <header> element represents a container for introductory content or a set of navigational links.
A <header> element typically contains:
- one or more heading elements (<h1> – <h6>)
- logo or icon
- authorship information
We can also have several <header> elements in one document
For Example:
<header class="top_header center"> <nav class="menu left"> <ul> <li><a class="selected" href="Index.html">Home</a></li> <li><a href="Wishlist.html">Wish List</a></li> <li><a href="Myaccount.html">My Account</a></li> <li><a href="Shoppingcart.html">Shopping Cart</a></li> <li><a href="Checkout.html">Check Out</a></li> <li><a href="Createanaccount.html">Create An Account</a></li> <li><a href="Login.html">Login</a></li> </ul> </nav> </header>
This example shows how to use header tag in a web page.
<article>
The <article> tag specifies independent and self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
Potential sources for the <article> element:
- Forum post
- Blog post
- News story
- Comment
For example:
<article class=”blog”> <h2>David</h2> <p>Hello! Good morning</p> </article>
This example shows how to use article tag in a web page.
<section>
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
For example:
<section class="cart1 left"> <a href="#"><i class="fa fa-shopping-cart"></i></a> <a href="#"><p>ADD TO CART</p></a> </section>
Example of section tag. How to use a section for a web page.
<footer>
The <footer> tag defines a footer for a document or section.
A <footer> element should contain information about its containing element.
A <footer> element typically contains:
- authorship information
- copyright information
- contact information
- sitemap
- back to top links
- related documents
We can also have several <footer> elements in one document.
For example:
In above example of footer in a web page. It shows all the possible content we can put into a footer.
Q.6: Can we insert multiple <header > in web page?
Ans: Yes, we can insert multiple <header> in web page.
For example:
<header class="header center"> <header class="top_header center"> <nav class="menu left"> <ul> <li><a class="selected" href="Index.html">Home</a></li> <li><a href="Wishlist.html">Wish List</a></li> <li><a href="Myaccount.html">My Account</a></li> <li><a href="Shoppingcart.html">Shopping Cart</a></li> <li><a href="Checkout.html">Check Out</a></li> <li><a href="Createanaccount.html">Create An Account</a></li> <li><a href="Login.html">Login</a></li> </ul> </nav> </header> <header class="bottom_header center"> <div class="logo left"> <img src="images/logo.jpg" alt="logo samples"> </div> <aside class="call_us right"> <ul> <li> <img src="images/phone.jpg" alt="samples"width="23px"height="35px"/> </li> <li> <p> <span style="color:#23d9c3; font-size:14px">Call us now toll free:</span><br/>1-800-234-5677 </p> </li> <li> <a href="#"> <img src="images/cart.jpg" alt="samples"width="98px"height="80px"/> </a> </li> </ul> </aside> </header> </header>
In this example, I am using multiple headers tag in a single web page.
Q.7: What is relationship between <header > and <h1> tag in HTML5?
Ans: The <header> element represents a group of introductory or navigational aids and usually contains the section’s heading in which <h1> elements representing a section’s heading.
Syntax:
<header class=”header”> <h1>Hello</h1> </header>
Q.8: What do you understand by web storage?
Ans: It is a simple client side database that allows the users to persist data in the form of key/value pairs.
It has a fairly simple API to retrieve/write data into the local storage. It can store up to 10MB of data per domain. Unlike cookies, the data stored are not included with every HTTP request.
IE7 and older versions do not support Web Storage. All the other browsers like Chrome, Opera, Firefox, Safari and IE8+ support Web Storage.
There are two types of web storage:
Local storage: Stores data with no expiration date. The data will be available even when the browser/ browsing tab is closed or reopened.
Session storage: Stores data for one session. Data persisted will be cleared as soon as the user closes the browser.
Q.9: Explain new media related elements in HTML5?
Ans:
- <audio>: Defines sound or music content.
- <embed>: Defines containers for external applications(like plug-ins).
- <source>: Defines source for <video> and <audio>.
- <track>: Defines track for <video> and <audio>.
- <video>: Defines video or movie content.
Q.10: What are some new input attribute in HTML5?
Ans: Some new input attribute in HTML5 are:
- autocomplete
- autofocus
- form
- form->action
- form->enctype
- form->method
- form->novalidate
- form->target
- height and width
- list
- min and max
- multiple
- pattern
- placeholder
- required
- step
Summary
HTML5 is a revolution in the web design and UI development industry. Although it is in beta development yet it has got a vast popularity in the world. After the introduction of various advanced features in it some of the established languages have thrown out of the market such as Adobe ActionScript and Flash.
CSS3 provides a better company to HTML5 so don’t ignore the importance of it. Learn CSS3 transitions, animations, and pseudo selectors to get the maximum out of HTML5.
Interested in learning web designing at an advanced level? Explore about web designing courses and choose the course that suits your needs.
