HTML5 interview Questions and Answers

Interview Questions Answers


HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard. In this tutorial we are providing some set of frequently asked HTML5 interview Questions. Read PHP interview Questions and Answers.

  1. What are the 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.

  2. Are HTML tags case sensitive?

    No

  3. 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.

  4. 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.

  5. 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.

  6. What are the various elements provided by HTML 5 for media content?

    audio and video elements are provided by HTML5 for media playback
    The tags used are:
    1) audio – It defines sound content.
    2) video – It defines a video or a movie.
    3) source – This tag defines the multiple media resources for video and audio.
    4) embed – It provides a container for an external application or interactive content.
    5) track – It defines text tracks for video and audio

  7. What are the new Form elements made available in HTML5?

    1) datalist – It specifies a list of options for input controls. These options are pre-defined.
    2) keygen – This tag defines a key-pair generator field.
    3) output – It defines the result of a calculation.

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

    1) article – This tag defines an article.
    2) aside – It defines content other than the page content.
    3) bdi – This tag isolates a part of text for formatting in a different direction from other text.
    4) command – It defines a command button to be invoked by the user.
    5) details – It defines additional details that can be viewed or hidden by the user.
    6) dialog – It defines a dialog box.
    7) figure – This tag specifies content like illustrations, diagrams, photos, code listings, etc.
    8) figcaption – It is used to provide a caption for a figure element
    9) footer – This tag defines a footer for a document or section
    10) header – This tag is used to define a header for a document or section

  9. What is SVG?

    SVG is the abbreviation for Scalable Vector Graphics and is recommended by W3C.
    It is used to define vector-based graphics for the Web.
    The graphics are defined in XML format.

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

    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.

  11. Differentiate between Canvas and SVG?

    Canvas is resolution dependent while SVG is not.
    Canvas does not provide any support for event handlers while SVG does provide the support for event handlers.
    Canvas is suitable for graphic-intensive games while SVG is not suitable for gaming.
    Canvas is suitable for small rendering areas while SVG is suitable for large rendering areas like Google maps.

  12. HTML 5 provides drag and drop facility. How do you make an image draggable?
    <img draggable="true" />
  13. What is HTML5 Web Storage?

    It store the data locally in the user’s browser

  14. Differentiate between session Storage and local Storage objects?

    Session Storage object stores the data only for one session while local Storage object stores the data without an expiry date.

  15. What is a Manifest file?

    A Manifest file is a simple text file that tells the browser what to cache and what not to cache.

  16. What is a Web Worker?

    A web worker is a script that runs in the background 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.

  17. What is the purpose of HTML5 versus XHTML?

    HTML5 is the next version of HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. Its aim to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight etc.

  18. What are some other advantages of HTML5?

    Cleaner markup than earlier versions of HTML
    Additional semantics of new elements like header, nav, and time

  19. What is the !DOCTYPE? Is it mandatory to use in HTML5?

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

  20. What are the new input types provided by HTML 5 for forms?

    1. color – Used for fields that should contain colour.
    2. date – Allows the user to select a date.
    3. datetime – Allows the user to select a date and time (with time zone).
    4. datetime-local – Allows the user to select a date and time (without time zone).
    5. email – Used for input fields that should contain an e-mail address.
    6. month – Allows the user to select a month and year.
    7. number – Used for input fields that should contain a numeric value. Restrictions on type of numbers accepted can be set.
    8. range – Used for input fields that should contain a value from a range of numbers. Restrictions on type of numbers accepted can be set here as well.
    9. search – Used for search fields.
    10. tel – Defines a field for entering a telephone number.
    11. time – Allows the user to select a time.
    12. url – Used for input fields that should contain a URL address.
    13. week – Allows the user to select a week and year.

  21. How to link an email address?
    <a href="mailto:email@gmail.com">Email Me</a>
  22. What is the difference between span and div?

    The difference is that span gives the output with display: inline and div gives the output with display: block.

    span is used when we need our elements to be shown in a line, one after the other.

  23. What is the Geolocation API in HTML5?

    HTML5’s Geolocation API lets users share their physical location with chosen web sites. JavaScript can capture a user’s latitude and longitude and can send it to the back-end web server to enable location-aware features like finding local businesses or showing their location on a map.

    Today, most browsers and mobile devices support the Geolocation API. The Geolocation API works with a new property of the global navigator object.

    A Geolocation object 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 user’s device.

  24. What’s one main result if you do not specify a doctype in an HTML page?

    New HTML5-specific tags will not be interpreted by the browser.

  25. 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.

  26. 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.

  27. When a local storage data gets 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.

Related Tutorials