HTML5 and CSS Interview Questions


1) What is canvas in HTML5?


It is an HTML area which is used to draw graphics.

2) What is SVG?


HTML SVG is used to explain the two dimensional vector and vector/raster graphics.

3) What are the different new form element types in HTML 5?


Following is a list of 10 new important elements in HTML 5:

  • Color
  • Date
  • Datetime-local
  • Email
  • Time
  • Url
  • Range
  • Telephone
  • Number
  • Search

4) Is there any need to change the web browsers to support HTML5?


No. Major browsers (updated versions) support HTML 5. For example: Chrome, Firefox, Opera, Safari, IE etc.

5) Which video formats are supported by HTML5?


HTML 5 supports three types of video format:

  • mp4
  • webm
  • ogg

6) Is audio tag supported in HTML 5?


Yes. It’s used to add sound or music files on the web page.

7) What is the difference between progress and meter tag?


The progress tag is used to represent the progress of the task only whereas the meter tag is used to measure data within a given range.

8) What is the use of figure tag in HTML 5?


The figure tag is used to add a photo within the document on the web page.

9) What is button tag?


The button tag is used in HTML 5. It is used to create a clickable button inside HTML form on the web page. It is usually accustomed produce a “submit” or “reset” button.

10) What does details and summary tag?


The details tag is used to specify some extra details on the web page. It can be viewed or hidden on demand. The summary tag is used with details tag.

11) What is datalist tag?


The HTML 5 datalist tag provides an auto complete feature on form element. It facilitates users to choose the predefined options.

12) How tags are migrated from HTML4 to HTML5?


No.         Typical HTML4 Typical HTML5

  •  <div id=”header”>          <header>
  • <div id=”menu”>             <nav>
  • <div id=”content”>        <section>
  • <div id=”post”>                <article>
  • <div id=”footer”>            <footer>

Header and Footer Example

HTML 4 Header and Footer:

  1. <div id=”header”>
  2. <h1>Monday Times</h1>
  3. </div>
  4. .
  5. .
  6. .
  7. <div id=”footer”>
  8. <p>&copy; nareshit. All rights reserved.</p>
  9. </div>

HTML 5 Header and Footer:

  1. <header>
  2. <h1>Monday Times</h1>
  3. </header>
  4. .
  5. .
  6. .
  7. <footer>
  8. <p>© nareshit. All rights reserved.</p>
  9. </footer>

Menu Example

HTML 4 Menu:

  1. <div id=”menu”>
  2. <ul>
  3. <li>News</li>
  4. <li>Sports</li>
  5. <li>Weather</li>
  6. </ul>
  7. </div>

HTML 5 Menu:

  1. <nav>
  2. <ul>
  3. <li>News</li>
  4. <li>Sports</li>
  5. <li>Weather</li>
  6. </ul>
  7. </nav>

13) If I do not put <!DOCTYPE html> will HTML 5 work?


No, browser won’t be ready to identify that it’s a HTML document and HTML 5 tags will not function properly.

14) What is the use of required attribute in HTML5?


It forces user to fill text on textarea or textfield before submitting form. It is used for form validation.


Name: <input type=”text” name=”name” required>

15) What are the new <input> types for form validation in HTML5?


The new input types for form validation are email, url, number, tel and date.


<input type=”email”>


1) What is CSS?


CSS stands for Cascading Style Sheet. It is a preferred styling language which is used with HTML to design websites.

2) What is the origin of CSS?


SGML (Standard Generalized Markup Language) is that the origin of CSS.

3) What are the different variations of CSS?


Following are the different variations of CSS:

  • CSS1
  • CSS2
  • CSS2.1
  • CSS3
  • CSS4

4) How can you integrate CSS on a web page?


There are three ways to integrate CSS on web pages.

  • Inline method
  • Embedded/Internal method
  • Linked/Imported/External method

5) What are the advantages of CSS?


  • Bandwidth
  • Page reformatting
  • Site-wide consistency
  • Accessibility
  • Content separated from presentation

6) What are the limitations of CSS?


  • Ascending by selectors is not possible
  • Limitations of vertical control
  • Pseudo-class not controlled by dynamic behavior
  • No expressions
  • No column declaration
  • Rules, styles, targeting specific text not possible

7) What are the CSS frameworks?


CSS frameworks are the preplanned libraries which makes easy and more standard compliant web page styling.

8) Why background and color are the separate properties if they should always be set together?


There are two reasons behind this:

  • It enhances the legibility of style sheets. The background property is a complicated property in CSS and if it’s combined with color, the complexity will further increases.
  • Color is an inherited property whereas background isn’t. So this can make confusion further.

9) What is Embedded Style Sheet?


An Embedded style sheet could be a CSS style specification method used with HTML. You can embed the whole style sheet in an HTML document by using the STYLE element.

10) What are the advantages of Embedded Style Sheets?


  • You can create classes for use on multiple tag types within the document.
  • You can use selector and grouping strategy to apply styles in complex situations.
  • No additional download is needed to import the information.

11) What is CSS selector?


It is a string that identifies the elements to which a particular declaration will apply some styles. It is additional referred as a link between the HTML document and the style sheet. It is equivalent of HTML elements.

12) What is ruleset?

  • Ruleset is used to identify that selectors can be hookup with other selectors. It has two parts:
  • Selector
  • Declaration

13) What is the difference between class selectors and id selectors?


An overall block is given to class selector, where id selectors take only a single element differing from other elements.

14) What are the advantages of External Style Sheets?


  • You can create classes for reusing it in several documents.
  • By using it, you’ll be able to control the styles of multiple documents from one file.
  • In complex situations, you’ll be able to use selectors and grouping methods to apply styles.

15) What is the difference between inline, embedded and external style sheets?


Inline: Inline Style Sheet is used only to style a small piece of code.

Embedded: Embedded style sheets are put between the <head>…</head> tags.

External: This is often used to apply the style to all the pages within your webpage by changing just one style sheet.

16) What is RWD?


RWD stands for Responsive Web Design. This technique is used to show the designed page perfectly on each and every screen size and device. For example: Mobile, Tablet, desktop, laptop etc. You don’t need to create a specific page for each device.

17) What are the benefits of CSS sprites?


If a web page has large no. of pictures that takes a longer time to load because each image separately sends out an http request. The concept of CSS sprites is used to decrease the scale of loading time for a web page because it combines the various small images into one image. It decreases the number of http requests and hence the loading time.

18) What is the difference between logical tags and physical tags?


  • Physical tags are referred to as presentational mark-up whereas logical tags are useless for appearances.
  • Physical tags are newer versions on the other hand logical tags are old and concentrate mainly on content.

19) What is the CSS Box model and what are its elements?


The CSS box model is used to outline the planning and layout of elements of CSS.

  • The elements are:
  • Margin
  • Border
  • Padding
  • Content

20) What is the float property of CSS?


The CSS float property is used to move or adjust the image to the right or left along with the texts to be wrapped around it. It doesn’t modify the property of the elements used before it.

21) How to restore the default property value using CSS?


In short, there’s no easy way to restore to default values to whatever a browser uses.

The nearest possibility is to use the ‘initial’ property value, which will able to restore the default CSS values, rather than the browser’s default styles.

22) What is the purpose of the z-index and how is it used?


The z-index helps specify the stack order of positioned elements that may overlap each other. The z-index default value is zero, and can take on either a negative or positive number.

  • An element with a higher z-index is always stacked on top than a lower index.
  • Z-Index can take the following values:
  • Auto: Sets the stack order is equal to its parents.
  • Initial: Sets this property to its default value zero.
  • Number: Orders the stack order.
  • Inherit: Inherits this property from its parent element.

23) Explain the difference between visibility: hidden and display: none?


visibility: hidden – simply hides the element however it’ll occupy space and affect the layout of the document.

display: none – also hides the element however won’t occupy space. It will not have an effect on the layout of the document.

24) What do you understand by W3C?


W3C stands for World Wide Web Consortium.

25) What is tweening?


  • It is the method of generating intermediate frames between two images.
  • It provides the impression that the first image has smoothly evolved into the second one.
  • It is a vital technique utilized in all sorts of animations.
  • In CSS3, Transforms (matrix, rotate, scale, translate etc.) module can be used to achieve tweening.

26) What is the difference between CSS2 and CSS3?


  • The main distinguish mlbetween CSS2 and CSS3 is that CSS3 is divided into different sections which are also known as modules.
  • Unlike CSS2, CSS3 modules are supported by almost all browsers.

Leave a Comment

Your email address will not be published. Required fields are marked *