1. What is HTML5? What are the new features?
HTML5 is the latest version of HTML, version 5 of HTML. It is used for structuring and presenting content on World Wide Web. It is an improved version of HTML with new elements and attributes that allows the building of more diverse and powerful Web sites and applications.
Here are some of the most prominent features introduced in HTML5 :
i) Clear and simple syntax - For example, DOCTYPE element has been made extremely simple - <!DOCTYPE html>
ii) New semantic elements are included such as <header>, <footer>, <article>, and <section>.
iii) Many new input types have been introduced in HTML5 such as color, date, datetime, email, month, number, range, search, tel, time, url, week etc.
iv) Many new attributes have been included to complement the new input types such as autocomplete, autofocus, max, min, readonly, spellcheck etc.
v) HTML5 introduces new form elements such as datalist, keygen, meter, output and progress.
vi) It has builtin support for integrated multimedia files into web page via video and audio tags
vii) With the introduction of GeoLocation API in HTML5, you can easily share your location with your favorite web sites.
viii) Before HTML5, application data had to be stored in cookies. With Web Storage API, web applications can store data locally within the user's browser.
ix) Web Sockets API is a new addition to the HTML5. It allows a web server to establish a connection with the browser and communicate directly without any lag or delay.
x) HTML5 contains JS Web Worker API which allows running scripts in background threads
xi) HTML5 has introduced Server-Sent Events (SSE) that allows a web page to get updates from a server.
xii) HTML 5 gets a Drag and Drop (DnD) API that allows the user to drag and drop an element to another location.
2. What is the <!DOCTYPE>? Is it mandatory to use in HTML5?
The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in. The <!DOCTYPE> tag doesn't have an end tag. It is not case sensitive. It must be the very first thing in HTML5 document, before the <html> tag.
Yes, <!DOCTYPE> is mandatory. In older version we must include the version of the html we are using. The arrival of HTML5 simplified the DOCTYPE declaration to <!DOCTYPE html>. Since HTML5 is not based on SGML, it doesn't require a reference to a Document Type Definition(DTD).
3. What will happen if we miss the <!DOCTYPE> element in HTML5?
The purpose of DOCTYPE is to tell the browser what type of HTML you are writing. Without a Doctype, the browser enters Quirks mode. In this mode, a browser tries to parse HTML as best as it can and the correct display of the page becomes a matter of luck. With <!DOCTYPE> declaration to your HTML documents, the browser knows what type of document to expect.
4. What are the new form elements in HTML5?
HTML5 introduces a number of new form elements, they are as follows:
datalist - It specifies a list of options for input controls. The list of suggestions appears as you begin typing in the text field and allows you to choose.
keygen - It generates an encryption key for passing encrypted data to a server.
output - It is meant to display text output or result of a calculation. You get the result through JavaScript code.
meter - It indicates a numeric value that falls within a range. This element supports a number of attributes such as value, min, max, high, low and optimum.
progress - It indicates how much of a task has been completed.
5. What are the new semantic/structural elements of HTML5?
HTML5 offers new semantic elements for better document structure:
<article> - Defines independent and self-contained content. It is usually used for large parts of text such as blog post, newspaper article etc.
<aside> - Defines the content, which is set to the side. (like a sidebar)
<details> - Defines the details on your website. The details can either be visible or hidden to the audience
<figure> - Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> - Defines a caption for a <figure> element
<footer> - Defines a footer for a document or section. You may use footer element for copyright information, links to terms of use, contact information, etc.
<header> - Specifies a header for a document or section. It can be used as a container for introductory content
<main> - Sets space for the main (most important) content of a webpage. It can be an article, regular paragraph or anything else.
<mark> - Makes the text highlighted to emphasize its meaning.
<nav> - Defines the space for navigation links. It should be used only for major block of navigation links.
<section> - Defines a section in a document. A document can be divided into sections such as introduction, content, and contact information.
<summary> - Defines a visible title or heading for <details> element
<time> - It is used to define and display time and date on your web page
6. What is SVG?
SVG stands for Scalable Vector Graphics. It is an XML-based image format that is used to define two-dimensional vector based graphics for the Web. SVG graphics do not lose its quality when they are zoomed or resized. SVG images can be searched, indexed, scripted, and compressed. They can be printed with high quality at any resolution.
You can embed SVG graphics directly into your document using the HTML5 <svg> element.
7. What is Canvas? What is the use of Canvas Element in HTML5?
HTML5 introduced the two graphical elements Canvas and SVG for creating rich graphics on the web.
Canvas gives an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions, create animations etc.
8. What is the difference between Canvas and SVG?
SVG is vector-graphics where Canvas is pixel graphics.
i.) SVG is resolution independent, it will not lose its quality when resized or zoomed. But Canvas is resolution dependent. The quality will be affected when it is zoomed or resized.
ii.) SVG is written in XML format. Canvas is drawn with JavaScript.
iii.) SVG can be modified through CSS and Script. But Canvas is modified through script only
iv.) SVG can be printed with high quality at any resolution. Canvas is not suitable for printing on higher resolution
v.) Canvas is suitable for games while SVG is not.
9. What is Web Workers?
A Web worker is a JavaScript code that runs in the background without affecting the page. You can continue to click, select things, etc. while the web worker runs in the background.
It is used for performing heavy tasks such as accessing Database or functions that require heavy memory.
10. What are the new Media Elements in HTML5?
<audio> - Defines sound content
<video> - Defines a video or movie
<source> - Defines multiple media resources for <video> and <audio>
<embed> - Defines a container for an external application or interactive content (a plug-in)
<track> - Defines text tracks for <video> and <audio>
