HTML5 interview question for fresher/HTML5 Interview Questions and Answers for Freshers & Experienced

What is dom in HTML?

DOM stands for Document Object Model. When a web page is getting loaded that time the browser creates a Document Object Model of the page and it is constructed as a tree of Objects. HTML DOM is basically an Object Model for HTML.

What are web sockets?

Web sockets are API or protocols that define persistent socket connections between the web browser and the server. A WebSocket connection can be opened by calling the Websocket constructor and passing the URL in the URL schema. URL schema can be ws, wss. Optionally, other subprotocols like soap, XMPP, etc. can be passed to the constructor. Websockets help in two-way communication and handle proxies and firewalls.

What is the server-sent events in HTML5?

The events that flow from the webserver to the browsers are called server-sent events. DOM events can be continuously pushed from the webserver to the browser of a user. To use a server-sent event (SSE), you should add an <eventsource> element to the document. The src attribute of this element describes the HTTP connection location, which sends a data stream having the events.

State bullet types available in HTML

With ordered lists, you can select to use some different list types including alphabetical and Roman numerals. The type attribute for unordered lists can be set to disc, square, or circle.

What is the purpose of <! Doctype html>?

The in HTML5 refers to indicating to the web browser about the version of HTML in which the page is created. Neither there is an end tag is not is it case sensitive.

In HTML5, declaration should be the first thing before HTML tag. This is because of all previous version before HTML5 followed Standard Generalized Markup Language (SGML). Because HTML5 does not follow SGML, it does not require references to DTD (Document Type Definition).

How will you add the autocomplete feature in a textbox?

For an <input> element, the <datalist> tag specifies a list of predefined options. It can be used for adding the autocomplete feature to a textbox. As a user inputs data, a dropdown list of available options will appear.

What are the most popular audio and video formats for embedding on an HTML5 web page?

Popular audio formats:

MP3
Ogg Vorbis
WAV
WebM

Popular video formats:

MP4
Ogg
WebM

Write HTML5 code for creating a hyperlink.

<!DOCTYPEhtml>
<html>
<body>
<title> Hyperlink Example </title>
<h3> HTML Cheat Sheet </h3>
<a href = "https://hackr.io/blog/html-cheat-sheet"> Visit HTML Cheat Sheet </a>
</body>
</html>

What does a hyperlink mean? Can it be only text?

Upon clicking, a hyperlink moves the user from one web page or document to some other web page. A hyperlink can be used upon a text as well as upon an image. For converting an image into a link we use:

<a href = " "...</a>>

In HTML5, what is a Microdata?

Microdata is a newly introduced, simple semantic syntax which can be used by developers to add the nested groups of name and value pair of data to documents, that are based on the page content commonly. It’s used with new global attributes of HTML5.

What does WHATWG stand for in the world of HTML5?

The abbreviation WHATWG stands for Web Hypertext Application Technology Working Group in HTML5. This is an organization which both develops and maintains the HTML and API for web applications.

What is a Web Worker in Html5?

A web worker in HTML5 is a script that runs on a separate thread in the background without the need for the main web page to wait for it to complete. Web Workers enable long tasks to be achieved without keeping the web page responsive.

What do you understand by image maps in HTML5? How many types does it have?

Image maps allow users to click on images for opening new web pages. As such, these are a combination of images and URLs. Image maps are of two types:

1. Client-side Image Map - Created using <area> and <map> elements. The map element holds the map information, and the area element takes the attributes for defining each section of the map.
2. Server-side Image Map - Created using the <usemap> attribute, which is the name of the map.

Why do you think the addition of drag-and-drop functionality in HTML5 is important? How will you make an image draggable in HTML5?

When it comes to UI interaction, the drag-and-drop is essential functionality. Almost all modern U.I.s have it. It makes copying, moving, and linking an object, such as an image or a link, very easy.

To make an image draggable in HTML5, we need to set the draggable image attribute true i.e.:

type = <img draggable = "true">

What is Microdata in HTML5?

Microdata is a new simple semantic syntax, that is used to add the nested groups of name and value pair of data to documents, that are commonly based on the page content. Microdata is used for new global attributes.

What is MathML in Html5?

MathML is Mathematical Markup Language. This language is used to show scientific and mathematical content on web pages. HTML5 allows you to use MathML elements in a document using <math>...</math> tags.

A mathematical expression should be inserted in the element <math> with a specified namespace as shown below: <math xmlns="http://www.w3.org/1998/Math/MathML"> </math>

Do older HTML files work on newer browsers?

Yes, older HTML files are compliant to the HTML standard. Most older files work on the newer browsers, though some features may not work.

What is the application cache in HTML5 and why it is used?

The application cache is a feature in HTML 5 which is used to store website data inside a cached version, thus allowing accessibility without net connectivity. It is very useful for desktop-based web applications requiring to store data on local systems.

What do you understand by HTML5 Web Storage? Is it any better than Cookies?

Prior to HTML5, web pages were able to store data locally within a browser using cookies. The HTML5 introduces Web Storage that allows a webpage to do the same as that of the cookies. Web Storage, however, is faster and more secure than cookies.

The HTML5 Web Storage is faster because the data isn't included with every server request. Instead, it is used when asked for. A web page can only access the data stored by itself, which is stored in name/value pairs

Another important distinction between the HTML5 Web Storage and Cookies is that:

Web Storage never transfers the data to the server, and
When compared to cookies, the storage limit for the HTML5 Web Storage is much larger, at least 5MB, and at max 10MB.

Explain the difference between div and span.

Both div and span are used for giving out the output. While span gives the output with display: inline, div gives output with display: block. Typically, span is used when there is the need to display the elements one after the other, i.e., in a line.

Please explain the Geolocation API in HTML5. How will you create a Geolocation object?

The Geolocation API in HTML5 allows users to share their location with selected websites. J.S. is capable of capturing a user's latitude and longitude and sending the same to the backend server.

Doing so enables location-aware features like finding local places of interest and finding out one's location on the map. A new geolocation object can be created using the following code:

var geolocation = navigator.geolocation;

The Geolocation object is actually a service object. It allows widgets to retrieve information about the geographical location of a user's device. Most browsers and mobile devices provide support for the Geolocation API. The API works with a new property of the global navigator object.

What do you understand by <!DOCTYPE>? Name the types of DOCTYPE available in HTML5.

Every HTML5 web page starts with the <!DOCTYPE> declaration. It lets the web browser understand the information that it must display. The DOCTYPE declaration is concise and case-insensitive in HTML5. HTML5 provides support for only one DOCTYPE:

<!DOCTYPE html>

Is it possible for a web page to have multiple <header> and <footer> elements?

Yes, a webpage can have many <header> and <footer> elements. Both tags are specifically designed to serve their respective purposes with respect to their parent section.

Hence, not only the page <body> must have the <header> and <footer> tags, but also does every <article> and <section> elements. Although a <footer> element might not be always necessary for every <article> and <section> tags, a <header> element must always be there.

Please explain how to indicate the character set being used by a document in HTML5?

The character set being used by an HTML5 document is indicated using the charset attribute of a <meta> tag inside the <head> element of the HTML5 document:

<!DOCTYPE html>
<html>
<head>

...
<meta charset="UTF-8">


</head>
</html>

What is the use of output tag in HTML5?

<output> tag is used to represent the different types of output and result.

Which video and audio formats are used for embedding on web page?

Formats of video and audio that are used for embedding on the web page are given below:

1. Video: MPEG4, Ogg, WebM.
2. Audio: WAV, Ogg Vorbis, MP3.

How does an HTML specification differ from a web browser's implementation of the same?

An HTML specification, like the HTML5 specification, defines a set of rules that all documents need to strictly follow in order to be considered valid as per the specification. The specification also offers instructions about how a web browser must interpret and render a valid document.

A web browser is considered to support a specification if it is able to handle valid documents as per the rules mentioned in the specification. Although all of the major browsers support most of the HTML5 specification, no web browser supports the HTML5 specification to its entirety.

Hence, it is all-important for the developers to confirm that the aspects of the specification that they are using must be supported by all the web browsers on which they want to display/deliver the content.

As such, despite the improved specifications for HTML5, cross-browser support is still something that a developer should be very cautious about. The HTML5 specification defines certain rules that must be followed when coming across an invalid HTML5 document.

Since invalid documents can contain anything, it is almost impossible for the HTML5 specification to handle all the possibilities comprehensively. Therefore, most decisions about handling malformed documents are entirely up to the web browser.

What is new about the relationship between the <header> and <h1> tags in HTML5?

Prior to HTML5, only one <h1> element was used for the heading of the entire webpage. This changed in HTML5, as it specifies that the <h1> element represents the top-level heading of a section of the webpage, which can be the page <body>, an <article>, or a <section> element.

According to the HTML5 specification, each <header> element must at least have one <h1> tag.

How do you create links to sections within the same page?

Links can be created using the <a> tag, with referencing through the use of the number (#) symbol. For example, you can have one line as <a href=”#topmost”>BACK TO TOP</a>, which would result in the words “BACK TO TOP” appearing on the webpage and links to a bookmark named topmost. You then create a separate tag command like <a name=”topmost”> somewhere on the top of the same webpage so that the user will be linked to that spot when he clicked on “BACK TO TOP”.

How do you insert a copyright symbol on a browser page?

To insert the copyright symbol, you need to type &copy; or & #169; in an HTML file.

What are the advantages of using HTML5?

HTML5 is the advanced version of HTML. HTML5 enables to create easier or interactive websites by embedding video, audio, and graphics on the web page.

HTML5 support multimedia technology and graphical content to the web without using any third party plugins.

Some of the most important features added by HTML5 include:

Geolocation
Offline Application Cache
Client-side database
Error Handling
New Structure and new multimedia elements.
Browser Support and compatibility.
Supports Some New Application Programming Interface (API) like:

Browser History Management
Drag and Drop
2D drawing on a web page
Time media playback
Supported Applications include:

Web Workers – JavaScript
Local File Access
Application Cache
Local data storage
Local SQL databases

What is the use of <audio> and <video> tags in Html5?

The <audio> tag in HTML5 is used to embed voice in an HTML document. Designers use <source> tag to specify media type along with other attributes.

The <video> tag in HTML5 is used to embed a video file in an HTML document. Designers can use <source> tag to specify media type along with other attributes.

What is local storage in HTML5? How it is used?

HTML5 has introduced the concept of Local Storage, which is used to access a web page's local storage area without any time limit. Local storage is available whenever the user wants to use the web page.

The data stored in Local Storage does not get automatically deleted when the browser window is closed; it only gets removed when deleted manually. In local storage, the data is stored using a key and value.

What is the use of Scalable Vector Graphics (SVG) in HTML5?

SVGs or Scalable Vector Graphics are used in HTML 5 to display 2-D graphics and its applications in XML which is later on rendered by an SVG viewer. The SVG element is used to contain SVG graphics.

Example

<!DOCTYPE html>

<html>

<body>



<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

</svg>



</body>

</html>

Is HTML5 tags are case sensitive?

No, HTML is not case sensitive. It means that <P> is the same as <p>. However, W3C advises writing HTML in lowercase especially when working on an XHTML document.

What is an API and list the API's available in HTML5?

API (Application Programming Interfaces) in HTML5 is a way to build different applications using pre-built components. Developers can integrate the relevant features of existing APIs into their new websites.

The APIs in HTML5 are:
HTML Web Workers
HTML Drag and Drop
HTML Application Cache
HTML Local Storage
HTML SSE
HTML Geolocation

How to insert an image in HTML?

<img> tag is used to add an image in a web page.

Images are not inserted into a web page basically they are linked to web pages. The <img> tag helps to create a holding space for the referenced image.

The <img> tag is normally empty, it has attributes only, and does not have a closing tag.

<img> tag has two required parameters:

src – The path to the image
alt – An alternate text for the image
To insert a image in html you need to use img tag:


<img src="image path" alt="Italian Trulli">
<img src="demo.jpg" alt="Italian Trulli">

What is image map in html5?

Image maps are a combination of URL and images, where clicking on these images (clickable area of the image) will open different new web pages.

Two types of image maps are available in HTML5, i.e. client side and server side:

The client-side image map is created by using two elements <area> and <map>, where the map holds the map information and the area element takes the attributes to define each section of the map. Server-side image map created by using <usemap> attribute, the usemap attribute is the name of our map.

What is the importance of Drag and Drop in HTML5?

Drag and Drop is the most important User Interface concept which makes it easy to grab an object and Drag it at the place you want with the help of a mouse click.

Some common features that are mostly used by Drag and Drop operation include move, link or copy.

We can drag an image using elements, type = <img draggable = “true”>, to make an image draggable and set the draggable image attribute to true.

What is the minimum number of HTML5 tags that are required to create a Web page?

Minimum 3 HTML5 tags are required to create a Web page, such as (<HEAD>, <BODY>, <HTML>).

What is a <meta> tag in HTML5?

The <meta> tag offers metadata about the HTML5 document. This metadata is machine-parsable. Typically, meta elements are used for specifying:

1. Author name
2. Keywords
3. Page description
The metadata supplied by the <meta> tag is used by:

1. Web browsers to know how to display content or reload a web page
2. Search engines to know about keywords on a web page
3. Other web services

Do all HTML tags come in a pair?

No, there are single HTML tags that do not need a closing tag. Examples are the <img> tag and <br> tags.

Explain the various new tags introduced by HTML5 in Media Elements.

HTML5 introduces the following five new tags in Media Elements:

1. <audio>: Eliminates the need for additional plugins for playing 2.audio content like audio streams and music.
3. <embed>: Embeds an external application or content
4. <source>: Adds multimedia resources like audio, picture, and video.
5. <track>: Adds caption files or subtitles while the multimedia file is playing.
6. <video>: Adds video content like embedded video content, movie clips, and videos.

What do you understand by HTML tags? How many tags are required to create a web page in HTML5?

A set of characters enclosed within angular braces (<> or </>) that develop a formatted command for a web page is called an HTML tag. General syntax of an HTML5 tag is:

<tag>.….</tag>

Tags help in sending instructions to the web browser on what to display and how to display. A minimum of 3 tags are required for creating a web page in HTML5:

<head>
<body>
<html>

What do you understand by web workers?

The addition of web workers brings multithreading capability to JavaScript. These are scripts running in the background that doesn't necessitate the web page to wait for their completion.

Hence, a user can interact freely with the web page while a web worker runs in the background. In order to achieve parallelism, web workers leverage thread-like message passing.

Enumerate important HTML5 technologies.

HTML5 adds a number of new technologies to facilitate faster, better, and more interactive web page development. Important HTML5 technologies are:

Canvas 2D
CSS3
Drag and Drop
File API
Geolocation API
Microdata
Offline Application
SSE (Server-Sent Events)
SVG (Scalable Vector Graphics)
Web Intents
Web Messaging
Web Sockets
Web Storage
Web Workers

What is a tag in HTML5?

A tag is a special content in HTML5, which is surrounded by an angle bracket (<,>). A slash (/) symbol is used to close the tag after completing the block.

For Example

<title> This is my Browser </title>

An Html5 tag is a set of characters that develop a formatted command for a web page. These formatted commands communicate and send the instruction to the Browser.

What are the New tags in Media Elements in HTML5?

The new tags in Media Elements in HTML5 are enlisted below:

<audio>: Apply for multimedia contents like sounds, audio streams or music, embed audio content without the requirement of any additional plug-in like flash player.
<video>: Apply for video content like video streams or movie clip, embed video content etc.
<source>: Apply for multiple media resources in media elements, such as audio, video, picture etc.
<embed>: Apply for an external application or embedded content (a plug-in).
<track>: Apply for text tracks in the media elements such as video or audio. This tag is used for subtitles or caption files while the video media is playing.

What are the differences between HTML5 and HTML?

Following are the various differences between HTML and HTML5:

1. Attributes

Attributes of Async, charset, and ping are available in HTML5. The same is not available in HTML.

1. Doctype Declaration

HTML features a long and complicated doctype declaration. The same is simple and easy in HTML5.

2. Drag-and-Drop

While HTML5 provides support for the drag-and-drop effect, HTML has no provision for it.

3. Drawing Geometric Shapes
There is no way of drawing shapes like circles, rectangles, and triangles in HTML. The same can be drawn in HTML5.

4. High-level Video and Audio Support

High-level audio and video support isn't a part of the HTML specifications. HTML5 offers out-of-the-box high-level audio and video support.

5. In-text Use

MathML and SVG can be used in text in HTML5. The same is not possible in HTML.

6. JavaScript Support

HTML doesn't provide support for running J.S. within the web browser. HTML5 allows JavaScript to run in the background using Web Workers.

7. Mobile-ready

HTML is not mobile-ready. HTML5 specifications involve emphasis on mobile-friendliness.

8. Storage
There is no persistent storage option available in HTML. Only browser cache is used as temporary storage. HTML5 allows permanent storage with an application cache, Web SQL database, and web storage.

9. Vector Graphics

HTML5 provides support for Canvas, SVG, and other virtual vector graphics. Implementing vector graphics in HTML is only possible using third-party plugins like Silverlight and VML.

What is HTML5?

HTML5 is the latest version of the HyperText Markup Language that can be referred to the WWW (World Wide Web) primary language, this markup language enhances a text file with bits of code, and this code which we can say as “markup” describes the structure of the document.

HTML5 provides some standard features like that of CSS, HTML, JavaScript, and DOM, which in turn will reduce the requirement of external plugins. It’s more markup to replace scripting, better error handling, etc. HTML5 is device independent.

Search
R4R Team
R4R provides HTML5 Freshers questions and answers (HTML5 Interview Questions and Answers) .The questions on R4R.in website is done by expert team! Mock Tests and Practice Papers for prepare yourself.. Mock Tests, Practice Papers,HTML5 interview question for fresher,HTML5 Freshers & Experienced Interview Questions and Answers,HTML5 Objetive choice questions and answers,HTML5 Multiple choice questions and answers,HTML5 objective, HTML5 questions , HTML5 answers,HTML5 MCQs questions and answers Java, C ,C++, ASP, ASP.net C# ,Struts ,Questions & Answer, Struts2, Ajax, Hibernate, Swing ,JSP , Servlet, J2EE ,Core Java ,Stping, VC++, HTML, DHTML, JAVASCRIPT, VB ,CSS, interview ,questions, and answers, for,experienced, and fresher R4r provides Python,General knowledge(GK),Computer,PHP,SQL,Java,JSP,Android,CSS,Hibernate,Servlets,Spring etc Interview tips for Freshers and Experienced for HTML5 fresher interview questions ,HTML5 Experienced interview questions,HTML5 fresher interview questions and answers ,HTML5 Experienced interview questions and answers,tricky HTML5 queries for interview pdf,complex HTML5 for practice with answers,HTML5 for practice with answers You can search job and get offer latters by studing r4r.in .learn in easy ways .