30+ HTML5 – Interview Questions with answers

Interview FAQ HTML5 FAQ

This article will provide you collection of HTML5 interview questions with answers that are frequently asked in an interview.

What is HTML5

It is Hyper Text Markup Language used to structure and present the web page content.HTML5 is the latest version of HTML. It supports all the traditional features of HTML and other new features like support of audio and video.

What is the structure of a simple HTML Document
  • The very basic structure of HTML is
    • Head Section
    • Body Section
    • Footer Section
<!DOCTYPE html> 
<html lang="en">
<head>     
<meta charset="utf-8">     
<meta http-equiv="X-UA-Compatible" content="IE=edge">     
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Page Title</title>     
<link href="css/style.css" rel="stylesheet">     
</head>   
<body>     
<h1>Hello, world!</h1>     
<script src="js/main.js"></script>     
</body> 
</html>
<!DOCTYPE> is used for?

It tells the browser about the version of HTML. It is not tag itself. It just tell the browser which version of HTML will be loaded.

What is tag?

It is HTML Code that defines the structure of web page. For example div,section,ul, span,anchor etc. are different tags.

Difference between anchor and link tag?
  • Anchor tag is used to link to another page or section or id.
  • Also anchor tag is part of body section of HTML.
<a href="#">Click Here</a>
  • Link tag is used to link documents or files or external resources to web page.
  • Also link is a part of the head section of HTML
<link  rel="stylesheet" href="css/style.css">
How to include style on a web page?

There are three different ways to include style to a web page.

  • Inline Style
  • Internal/Embedded Style
  • External Style

Inline Style : It is directly applied on a tag.

<p style="color:#000">Black Link</p>

Internal/Emedded Style : style is applied using style tag within the document.General practice is put the style in Header Section of html.

<style>
p{
color:#000;
}
</style>

External Style : style is written in an external file with extension .css and that file is linked to a web page through link tag.

<link rel="stylesheet"  href="css/style.css">
How to include scripts?

Script can be included by two different ways

On page : Anywhere on page via script tag. General practice is to load all the scripts in footer.

<script>
console.log("hello world");
</script>

External : Script is written in an external file with extension .js and then included in document via script tag

<script src="js/main.js"></script>
Name any ten HTML5 tags?
  1. <article> : defines an article
  2. <aside> : defines content that is loosely related to the web page
  3. <details> : represent the detail
  4. <header>: header of the web page
  5. <footer> : footer of the web page
  6. <nav> : navigation of the web page
  7. <section> : block level element
  8. <summary> : summary of paragraph
  9. <audio> : to embed audio
  10. <canvas> : used to draw graphics
  11. <figure> : used to illustrate figure part
  12. <figcaption> : used to define caption of figure
  13. <time> : to represent time or date
  14. <video> : to embed video content on web page
  15. <progress> : to represent progress of task
What is an attribute?

An attribute provides additional information about the element. They usually comes in name value pair. For example div has attribute class.

<div class="red">Content...</div>

There are some Global attributes that can be used on any element.For example

  • id
  • Class
  • style
  • title
  • hidden

There are also Event attribute that trigger an event. For Example

  • Window Event
    • onload()
    • onresize()
  • Form Event
    • onfocus()
    • onsubmit()
    • oninvalid()
    • onreset()
    • onsearch()
    • onchange()
  • Keyboard Event
    • onkeyup()
    • onkeydown()
    • onkeypress()
  • Mouse Event
    • onclick()
    • ondlclick()
    • onmouseover()
    • onmouseout()
    • onwheel()
  • Drag Event
    • onscroll()
    • ondrag()
    • ondrop()
  • clipboard events
    • oncopy()
    • onpaste()
    • oncut()
What is an id?

id is an attribute whose value is uniquely define to the HTML element.

<div id="custom-slider">slider content</div>

Properties of id

  • it must be unique on a web page.
  • must not contain special character except hyphen “-” and underscore ” _”
  • First letter of id can not be a number
What is class?

It is an attrbute of HTML element whose value can be used more than one time on a web page. For Example

<div class="red"></div>
<p class="red"></p>

Same style will be applied to the element that has same class name.

What is the difference between svg and canvas?

svg is vector based and compsed of shapes while canvas is raster based and compose of pixels.

svg gives better performance with smaller number of objects or larger surfaces canvas gives better performance with large number of objects or smaller surfaces.

svg can be modified through script or style while canvas can be modified only via script

What if DOCTYPE is not used in HTML?

The browser will not know what HTML version needs to be rendered on web page. Hence HTML5 tags will not be rendered

What is Inline tagselement?

Inline element does not start on a new line and take only that much width that is required. For Example:

  • <span>
  • <a>
  • <img>
  • <button>
  • <input>
  • <em>
  • <textarea>
What is block level tag/element?

They started in new line by default and take up full width available.For example

  • <section>
  • <div>
  • <article>
  • <header>
  • <footer>
  • <nav>
  • <table>
What is the difference between span and div?

Span is an inline element while div is block level element.

What is the difference between div and section?

div marks up general block and does not represent anything and is used to group elements. Section is also used to group elements but particularly with headings,paragraph etc.and is used to group elements that are related to each other.

How many h1 can be there on one page?

From SEO point of view only one H1 tag must be used on web page.

What is session storage?

Used to save key value pair in browser . It is same as to localstorage except data in sessionStorage is cleared when page session ends.

// Save data to sessionStorage 
sessionStorage.setItem('key', 'value'); 
// Get saved data from sessionStorage 
let data = sessionStorage.getItem('key'); 
// Remove saved data from sessionStorage 
sessionStorage.removeItem('key'); 
// Remove all saved data from sessionStorage 
sessionStorage.clear();
What is localstorage?

This is used to store key value pair in browser. localStorage value has no expiration time

Explain Drag and Drop in HTML5.

HTML5 comes with drag ad drop API. It has events associated with it dragstart, dragenter, dragover, dragleave, drag, drop, dropend

What are different input types in html5?
  • range
  • url
  • datetime
  • time
  • number
  • email
  • search
Explain Image map in HTML5?

Map element is used with area elements to define clickable area of image. For more info check mdn website here.

What is MathML ? Name any 5 MathML tags?

Mathematical Markup Language used to define mathematical notation on a web page.
<msup> : for base superscript
<msub> : for base suscript
<math> : main element
<mn> : numeric literal
<mo> : an operator

HTML5 Formatting tags?
  • <strong>
  • <em>
  • <del>
  • <ins>
  • <mark>
  • <sub>
  • <sup>
What is Web Storage

Web Storage API provide mechanism by which browser can store key value pair. For more info visit mdn here

What Geolocation API of HTML5?

This api is used to provide location to the user.For more check mdn

Name some Tags that are removed/obsolete in HTML5

<center>
<dir>
<element>
<font>
<marque>

Deprecated Tags:
<content>
<frame>
<frameset>
<menuitem>
<shadow>

What are the video format supported by HTML5??
  • MP4
  • Webm
  • OGG
What are the audio format supported by HTML5

MP3, WAV, OGG

What are different list type?

List type can be

Ordered : a,A,i,I,1
unordered : circle,disc,square

What is output tag

Used to render the output of a particular calculation. For more information checked mdn website here

What is figure tag?

It is used to embed images with or without caption

<figure>
<img src="images.polar-star.png" alt="Polar Star"/>
<figcaption>Image ilustrating poler star</figcaption>
</figure>
What is microdata?

It allows the search engine to understand the information of the web page and provide more relevant results to the user. For this following tag is used to structure microdata

: To create an item.
itemprop : to add property to an item
: type of the scope

How to do comment in HTML?

by using <!—- this is a comment —->

What does code tag do?

It defines a piece of computer code

What does pre tag?

It define preformatted text. It preserves spaces , line break. Usually used when to display a compute code.

What is title tag?
  • used to define page title
  • can used be only once on a web page
  • recommended length is about 50-80 characters
  • it must be used on web page
What is noscript tag?

The content of noscript tag will be rendered if user’s browser does not support javascript. In HTML5 it can be used in both head and body section

<noscript>Does not support.</noscript>
HTML5 form attributes?

required
size
autocomplete
selected
checked

How to open a link in new tab?

By using target attribute . It has following values

_blank : to open a link in new tab
_self : open link in same frame in whic link is clicked
_parent : open link in parent frame
_top : open link in full window
framename : name of the frame in which link will be open

What does embed,object, param do?

embed – defines a container for external (non-HTML) application

object – defines an embedded object.Used to embed mulitmedia like applet,PDF,flash etc.

param – define parameter for embedded plugin

What does 401,400,403,404 error means?
  • 401-Unauthorized
  • 400-Bad Request
  • 403- Forbidden error
  • 404- Page not found
What does 500,501,502,503,504,505 means?

500 – Unexpected error
501-Server Error
502-Bad gateway
503-Servce unavailable
504-gateway timeout
505- HTTP version not supported by the browser.

WHat is GET and POST method?

GET : data is sent via url using query string. Data can be cached or bookmarked. There is restriction on the data that is sent via the GET method. 

http://curiouswes.in/?s=blogs

Post : It appends the data to the body of HTTP request. There is no restriction on the length of data. submission of data via POST can never be bookmarked.

What is Put method?

The put method completely replaces the current data at the target url with something else. Also PUT method is idempotent i.e. no matter how many times the data is sent the result will be same

What is the difference between PX, EM and rem?

They all are css units.
px is fixed example font-size is 14px.
em is relative to the parent for example if there is a div defined with the font-size 17px then for that div and for its children 1em = 17px.
rem is relative to its root element. For example if font-size of the root element is 16px then 1 rem = 16px for all elements.

What is Fieldset & legends??

<fieldset> : it is used to group input elements
<legend> : to define the title of the grouped elements in fieldset

What is optgroup?

<optgroup> : it is used to define the title of options in select tag.

Name some video/audio attributes
  • Video/Audio attributes
    • controls
    • width
    • height
    • autoplay
    • loop
    • muted
    • preload
    • poster

If you find this article useful please leave a feedback. Also you may share your experience or question about HTML5.

Leave a comment