HTML5 Interview Questions and Answers

PHPZAG Team Interview Questions

HTML or Hyper-Text Markup Language is the primary web language to create web pages. All web pages on the internet are created with different elements of HTML.

We can not think about web without HTML because it is an integral part of web pages. With HTML, we can manage many things on web pages like text, images, multimedia, links etc.

So here in this post, we have listed some of the most asked HTML interview questions with answers for beginners and experienced web developers.

Q 1- What is the difference between HTML and HTML5 ?

Ans: There are no major difference between HTML and HTML5 as both are used to create web page. We can say that the HTML5 is not a replacement of HTML but its addition to HTML with more semantic approach with coding to develop web pages. HTML5 features some new elements like audio, video, canvas, placeholder, graphics etc to handle complex things easily.

Q 2- What is <!DOCTYPE> declaration in HTML5 ?

Ans: DOCTYPE declarations is the first thing that declared in HTML page to instruct the web browser about version of HTML page. It is a good practice to add DOCTYPE declaration to HTML to know the bworser about the type of document. The HTML5 DOCTYPE Declarations is HTML.


Q3- What are the new elements in HTML5?

Ans: Following are the new elements in HTML5.

Tag Description
<article> The HTML5 article is new element and could be used for news, blog or article.
<aside> The HTML5 aside tag is used to surround content to keep it aside from other content.
<bdi> The HTML5 BDI tags stands for Bi-Directional Isolation. It is used to isolate text part in a different direction from other text outside it.
<details> The details is the awesome HTML5 tag to create interactive widget to allow user’s to open and close to view content within it.
<summary> The summary is the HTML5 tag that define the heading of details element to click to view and hide the details content.
<figure> The figure is the HTML5 element and can be used for illustrations, diagrams, photos, code listings, etc.
<figcaption> The figcaption is the HTML5 element that used to define the caption of figure element.
<footer> The footer is the HTML5 element that is used defines a footer for a document or section
<header> The header is the HTML5 element that is used as container for introductory content or a set of navigational links.
<mark> The mark is the HTML5 element that is used to mark or highlight parts of text.
<meter> The meter is the HTML5 element that is used to measure data within a given range.
<nav> The nav is the HTML5 element that is used to defines a set of navigation link.
<progress> The progress is the HTML5 element that is used to show the progress of a task.
<ruby> The ruby is the HTML5 element that is used to create a ruby annotation.
<rt> The rt is the HTML5 element that is used to explain or pronounce characters in a ruby annotation.
<rp> The rp is the HTML5 element that is used to add parentheses around a ruby text.
<section> The section is the HTML5 element that is used to create sections in a document like chapters, headers, footers etc.
<time> The time is the HTML5 element that is used display date in human-readable format.
<wbr> The wbr is the HTML5 element that is used to specifies to add line break in a text.

Q4- What are the new Media elements in HTML5?

Ans: Following is the new Media elements in HTML5.

Tag Description
<audio> For multimedia content, sounds, music or other audio streams
<video> For video content, such as a movie clip or other video streams
<source> For media resources for media elements, defined inside video or audio
elements
<embed> For embedded content, such as a plug-in
<track> For text tracks used in mediaplayers

Q5- What are the new Input Type attribute in HTML5?

Ans: There are following new input type Attribute in HTML5.

Type Value
tel This input type is used for telephone number
search The input type is used for search field
url This input type is used for URL
email This input type is used for email addresses
datetime This input type is used date and/or time
date This input type is used for date
month This input type is used for month
week This input type is used for week
time This input type is used for time
datetime-local This input type is used for local date/time
number This input type is used for number
range This input type is used for number in a given range
color This input type is used for hexadecimal color, like #82345c
placeholder This input type is used for specifing a short hint that describes the expected value of an input field

Q6- How we will add video and audio in HTML5?

Ans: The HTML5 video element is used to add and play video. We need to pass video file path to play video.

<video width=“300” height=“200” controls=“controls”>
<source src=“mysong.mp4” type=“video/mp4” />
<source src=“mysong.ogg” type=“video/ogg” />
</video>

We will use HTML5 audio element to play audio file.


<audio controls=“controls”>
<source src=“mysong.ogg” type=“audio/ogg” />
<source src=“mysong.mp3” type=“audio/mpeg” />
</audio>

Q7- What is localStorage in HTML5?

Ans: Unlike HTML, HTML5 is not passing data on every server request, it stores data in localstores and pass only when it is asked for. So we need to create localstores to store data to use further on request. We will call localStorage object to store them like below 

<script type=“text/javascript”>
localStorage.name=“PHPZAG”;
document.write(localStorage.name);
</script>
<script type=“text/javascript”>
localStorage.address=“Newyork USA”;
document.write(localStorage.address);
</script>

Q8- What is sessionStorage in html5?

Ans: In HTML5, the sessionStorage object used to store the data for a session. The data remain in sessionStorage until user not closes browser, the data will be deleted when user close the browser. We will create sessionStorage using sessionStorage object like below.

<script type=“text/javascript”>
sessionStorage.web=“PHPZAG”;
document.write(sessionStorage.web);
</script>

Q9- What is Canvas Element in HTML5?

Ans: Canvas is the new element in HTML5 that work as container to draw graphics. To draw graphics with Canvas, we need to use JavaScript to draw graphics. The Canvas has several method for drawing, boxes, circles, text, images etc.

<canvas id=“myCanvas” width=“300” height=“250”>
</canvas>
<script type=“text/javascript”>
var myCanvas=document.getElementById(“myCanvas”);
var myText=myCanvas.getContext(“2d”);
myText.fillStyle=“#f6789”;
myText.fillRect(0,0,100,150);
</script>

Q10- What’s advantages of using HTML5?

Ans: There are following advantages of using HTML5.
a) It enables us to write clean markup.
b) It adds additional semantics of new elements like <header>, <footer>, <nav>, and <time>
c) New form input types and attributes.
d) Advanced media elements.
e) Supports offline application Cache.

You may also check: