HTML5 Interview Questions

What is the CSS box model in HTML 5?

The box model is a rectangular space around an HTML element which provides border, padding and margin.

Element Description
Border This element provides the maximum area in which the element will be collected. We can create the border invisible or visible define height and width etc.
Padding This element provides the spacing between border and the element.
Margin This element provides the spacing between border and any neighboring element.

For example the simple CSS code which provides a box with border, padding and margin values.

 
.box {
   width: 200px;
   border: 10px solid #99c;
    padding: 20px;
   margin: 50px;
}

What is the data list in HTML 5?

The data list element in HTML 5 helps to provide auto complete features in a textbox as shown below.

The HTML code for DataList features are:

<input list="City">
<datalist id="City">
<option value="Hyderabad">
<option value="Lucknow">
<option value="Indore">
<option value="Bangalore">
<option value="Agra">
</datalist>

Why is use column layout in CSS?

The CSS column layout helps you to divide your text into columns. For example, suppose the below magazine news, which is one big text, but we need to divide into the same three columns with a border in between.

To create a column layout, we need to define the following are:

  1. How many columns we want to divide the text into?

Specify number of columns we need to use column-count. The “Meraj” and “Ansari-column” needed for name and cast respectively.

-ansari-column-count:3; /* Name */

-meraj-column-count:3; /* Meraj and Ansari */

column-count:3;

 

  1. How much gap we want to give between those columns?
-ansari-column-gap:40px; /* Name */
-meraj-column-gap:40px; /* Meraj and Ansari */
column-gap:20px;
  1. Do you want to draw a line between those columns, if yes how then much thick?
-ansari-column-rule:4px outset #ff00ff; /* Name */
-meraj-column-rule:4px outset #ff00ff; /* Meraj and Ansari */
column-rule:6px outset #ff00ff;

Combined with the complete code:

<style>
.magazine
{
-ansari-column-count:3; /* Name */
-meraj-column-count:3; /* Meraj and Ansari */
column-count:3;
 
-ansari-column-gap:40px; /* Name */
-meraj-column-gap:40px; /* Meraj and Ansari*/
column-gap:20px;
 
-ansari-column-rule:4px outset #ff00ff; /* Name */
-meraj-column-rule:4px outset #ff00ff; /* Meraj and Ansari */
column-rule:6px outset #ff00ff;
}
</style>

 

What does fallback in the Application cache in HTML 5?

<a name="My name is Mr. Meraj Ansari>FALLBACK:
/home/ /homeoffline.html </a></pre>
<h2><a name=" My name is Meraj Ansari""></a>

What is the some new input attributes in HTML 5?

The various new form elements, including in HTML 5 are:

  • Datalist
  • number
  • url
  • email
  • range
  • output
  • time
  • keygen
  • datetime
  • month
  • week
  • date