HTML5 Study Set

  1. What were some of the key goals and motivations for the HTML5 specification?
    • HTML5 was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2.
    • Major goals of the HTML specification were to:
    • Deliver rich content (graphics, movies, etc.) without the need for additional plugins (e.g., Flash).
    • Provide better semantic support for web page structure through the introduction of new structural element tags.
    • Provide a stricter parsing standard to simplify error handling, ensure more consistent cross-browser behavior, and simplify backward compatibility with documents written to older standards.
    • Provide better cross-platform support (i.e., to work well whether running on a PC, Tablet, or Smartphone).
  2. What are some of the key new features in HTML5?
    • Key new features of HTML5 include:
    • Improved support for embedding graphics, audio, and video content via the new <canvas>, <audio>, and <video> tags.
    • Extensions to the JavaScript API such as geolocation and drag-and-drop as well for storage and caching.
    • Introduction of “web workers”.
    • Several new semantic tags were also added to complement the structural logic of modern web applications.
    • These include the <main>, <nav>, <article>, <section>, <header>, <footer>, and <aside> tags.
    • New form controls, such as <calendar>, <date>, <time>, <email>, <url>, and <search>.
  3. What are “web workers”?
    • Web workers at long last bring multi-threading to JavaScript.
    • A web worker is a script that runs in the background (i.e., in another thread) without the page needing to wait for it to complete. The user can continue to interact with the page while the web worker runs in the background. Workers utilize thread-like message passing to achieve parallelism.
  4. How do you indicate the character set being used by an HTML5 document? How does this differ from older HTML standards?
    • In HTML5, the encoding used 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" "">
    •      <html>
    •           <head>
    •              ...
    •             <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    •              ...
    •           </head>
    •      ...
    • </html>
  5. Discuss the differences between an HTML specification and a browser’s implementation thereof.
    HTML specifications such as HTML5 define a set of rules that a document must adhere to in order to be “valid” according to that specification. In addition, a specification provides instructions on how a browser must interpret and render such a document.

    A browser is said to “support” a specification if it handles valid documents according to the rules of the specification. As of yet, no browser supports all aspects of the HTML5 specification (although all of the major browser support most of it), and as a result, it is necessary for the developer to confirm whether the aspect they are making use of will be supported by all of the browsers on which they hope to display their content. This is why cross-browser support continues to be a headache for developers, despite the improved specificiations.

    In addition, while HTML5 defines some rules to follow for an invalid HTML5 document (i.e., one that contains syntactical errors), invalid documents may contain anything, and it is impossible for the specification to handle all possibilities comprehensively. Thus, many decisions about how to handle malformed documents are left up to the browser.
  6. Briefly describe the correct usage of the following HTML5 semantic elements: <header>, <article>, <section>, <footer>.
    The <header> element is used to contain introductory and navigational information about a section of the page. This can include the section heading, the author’s name, time and date of publication, table of contents, or other navigational information.

    The <article> element is meant to house a self-contained composition that can logically be independently recreated outside of the page without losing it’s meaining. Individual blog posts or news stories are good examples.

    The <section> element is a flexible container for holding content that shares a common informational theme or purpose.

    The <footer> element is used to hold information that should appear at the end of a section of content and contain additional information about the section. Author’s name, copyright information, and related links are typical examples of such content.
  7. Can a <section> contain <article> elements? Can an <article> contain <section>elements? Provide usage examples.
    The answer to both questions is yes; i.e., a <section> can contain <article> elements, and an <article> can contain <section> elements.

    For example, a personal dashboard page might contain a <section> for social network interactions as well as a <section> for the latest news articles, the latter of which could contain several <article> elements.

    Conversely, an <article> might contain a <section> at the end for reader comments.
  8. Can a web page contain multiple <header> elements? What about <footer>elements?
    Yes to both. In fact, both the <header> and <footer> tags are designed to serve their respective purposes in relation to whatever their parent “section” may be. So not only can the page <body> contain a header and a footer, but so can every <article> and <section> element. In fact, a <header> should be present for all of these, although a <footer> is not always necessary.
  9. Describe the relationship between the <header> and <h1> tags in HTML5.
    In previous specifications of HTML, only one <h1> element was typically present on a page, used for the heading of the entire page. HTML5 specifies that <h1> represents the top-level heading of a “section”, whether that be the page <body>, or an <article> or <section> element. In fact, every <header> element should at least contain an <h1> element. If there is no natural heading for the section, it is a good indication it should not use an <article> or <section> tag.
  10. Give a simple implementation of the <video> tag to embed a video stored at Give the video a width of 640 pixels by 360 pixels. Provide the user with controls.
    • Here is one simple implementation:
    • <video src="" width="640" height="360" controls></video>

    • Alternatively, the source file may be indicated with a separate <source> tag inside the <video> element, as in:
    • <video width="640" height="360" controls>
    •       <source src="">
    • </video>
  11. Write the code necessary to create a 300 pixel by 300 pixel <canvas>. Within it, paint a blue 100 pixel by 100 pixel square with the top-left corner of the square located 50 pixels from both the top and left edges of the canvas.
    • Here is one simple implementation:
    • <canvas id="c" width="300" height="300"></canvas>

    • <script>
    •   var canvas = document.getElementById( "c" );
    •   var drawing_context = canvas.getContext( "2d" );
    •   drawing_context.fillStyle = "blue";
    •   drawing_context.fillRect( 50, 50, 100, 100 );
    • </script>
  12. What is HTML5 Web Storage? Explain localStorage and sessionStorage.
    With HTML5, web pages can store data locally within the user’s browser.

    Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for.

    The data is stored in name/value pairs, and a web page can only access data stored by itself. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

    The difference between localStorage and sessionStorage involves the lifetime and scope of the storage.

    Data stored through localStorage is permanent: it does not expire and remains stored on the user’s computer until a web app deletes it or the user asks the browser to delete it. SessionStorage has the same lifetime as the top-level window or browser tab in which the script that stored it is running. When the window or tab is permanently closed, any data stored through sessionStorage is deleted.

    Both forms of storage are scoped to the document origin so that documents with different origins will never share the stored objects. But sessionStorage is also scoped on a per-window basis. If a user has two browser tabs displaying documents from the same origin, those two tabs have separate sessionStorage data: the scripts running in one tab cannot read or overwrite the data written by scripts in the other tab, even if both tabs are visiting exactly the same page and are running exactly the same scripts.
  13. Name some of the new features of HTML5.
    • 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.
  14. Are HTML tags case sensitive?
    No, they are not case sensitive.
  15. What is the section tag in HTML5?
    This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.
  16. What is the purpose of 'article' tag in HTML5?
    This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.
  17. What is the purpose of 'aside' tag in HTML5?
    This tag represents a piece of content that is only slightly related to the rest of the page.
  18. What is the purpose of 'header' tag in HTML5?
    This tag represents the header of a section.
  19. What is the purpose of 'footer' tag in HTML5?
    This tag represents a footer for a section and can contain information about the author, copyright information, et cetera.
  20. What is the purpose of 'figure' tag in HTML5?
    This tag can be used to associate a caption together with some embedded content, such as a graphic or video.
  21. 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.
  22. What is Web Forms 2.0?
    Web Forms 2.0 is an extension to the forms features found in HTML4. Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4.
  23. What is the purpose of datetime input control in Web form 2.0?
    It represents a date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.
  24. What is the purpose of 'output' tag in HTML5?
    HTML5 introduced a new element <output> which is used to represent the result of different types of output, such as output written by a script.
  25. What is the purpose of 'placeholder' attribute in HTML5?
    HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field. The placeholder text must not contain carriage returns or line-feeds.
  26. What is the purpose of 'autofocus' attribute in HTML5?
    This is a simple one-step pattern, easily programmed in JavaScript at the time of document load, automatically focus one particular form field.
  27. What is the purpose of 'required' attribute in HTML5?
    HTML5 introduced a new attribute called required which would insist to have a value in an input control.
  28. Can you use SVG tags directly in HTML5 without any plugin?
    Yes! HTML5 allows embeding SVG directly using <svg>...</svg> tag.
  29. What is cross site scripting?
    Cross-site scripting (XSS) is a type of computer security vulnerability typically found in web applications. XSS enables attackers to inject client-side script into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same-origin policy.

    XSS vulnerabilities are amongst the most widespread web application vulnerabilities on the Internet. Fortunately, it’s easy to test if your website or web application is vulnerable to XSS and other vulnerabilities by running an automated web vulnerability scan using Acunetix Vulnerability Scanner.
  30. What are the drawbacks of cookies?
    • Cookies have following drawbacks−
    • Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data.
    • Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.
    • Cookies are limited to about 4 KB of data . Not enough to store required data.
  31. What do you mean by session storage in HTML5?
    HTML5 introduces the sessionStorage attribute which would be used by the sites to add data to the session storage, and it will be accessible to any page from the same site opened in that window i.e. session and as soon as you close the window, session would be lost.
  32. What do you mean by local storage in HTML5?
    HTML5 introduces the localStorage attribute which would be used to access a page's local storage area without no time limit and this local storage will be available whenever you would use that page.
  33. When does session storage get deleted?
    The Session Storage Data would be deleted by the browsers immediately after the session gets terminated.
  34. When does local storage get deleted?
    local storage data has no time limit. To clear a local storage setting you would need to call localStorage.remove('key'); where 'key' is the key of the value you want to remove. If you want to clear all settings, you need to call localStorage.clear() method.
  35. What are Server Side Events in HTML5?
    • Along with HTML5, WHATWG Web Applications 1.0 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE). Using SSE you can push DOM events continously from your web server to the visitor's browser.
    • The event streaming approach opens a persistent connection to the server, sending data to the client when new information is available, eliminating the need for continuous polling.
    • Server-sent events standardizes how we stream data from the server to the client.
  36. How do you utilize a server-sent event in HTML5?
    • To use Server-Sent Events in a web application, you would need to add an <eventsource> element to the document.
    • The src attribute of <eventsource> element should point to an URL which should provide a persistent HTTP connection that sends a data stream containing the events.
    • The URL would point to a PHP, PERL or any Python script which would take care of sending event data consistently.
  37. What are web sockets?
    • Web Sockets is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers.
    • Once you get a Web Socket connection with the web server, you can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessage event handler.
    • Following is the API which creates a new WebSocket object.var Socket = new WebSocket(url, [protocal] );
    • Here first argument, url, specifies the URL to which to connect. The second attribute, protocol is optional, and if present, specifies a sub-protocol that the server must support for the connection to be successful.
  38. What is Geolocation API in HTML?
    • HTML5 Geolocation API lets you share your location with your favorite web sites. A Javascript can capture your latitude and longitude and can be sent to backend web server and do fancy location-aware things like finding local businesses or showing your location on a map.
    • Today most of the browsers and mobile devices support Geolocation API. The geolocation APIs work with a new property of the global navigator object ie. Geolocation object which can be created as follows:
    • var geolocation = navigator.geolocation;
    • The geolocation object is a service object that allows widgets to retrieve information about the geographic location of the device.
  39. What is the difference between and abstract class and an interface?
    Abstract class and interface both are used to achieve abstraction where we can declare the abstract methods. Abstract class and interface both can't be instantiated.But there are many differences between abstract class and interface that are given below.

    • Image Upload 1
    • Simply, abstract class achieves partial abstraction (0 to 100%) whereas interface achieves fully abstraction (100%).
  40. What is the difference between overloading methods and overriding methods?
    Method overloading deals with the notion of having two or more methods in the same class with the same name but differentarguments. Method overriding means having two methods with the same arguments, but different implementations.

    (This is actually a Java question but often shows up in interview questions of all types).
Card Set
HTML5 Study Set
HTML5 Study Questions