HTML5 Interview Questions for Beginners

HTML5 is the most recent version of the HTML(Hypertext Markup Language). It is a language for structuring and displaying content for the World Wide Web, a core technology of the Internet.

WHATWG (Web Hypertext Application Technology Working Group) another gathering of W3C individuals felt that W3C is not giving careful consideration to this present reality improvement needs of dialect, it has begun dealing with the new determination of HTML-HTML5. Consequently, HTML5 is another adaptation of HTML 4.01 and XHTML 1.0 concentrating on the necessities of Web application designers and in addition tending to issues found in the present details.

Specifically, HTML5 includes numerous new syntactical features. New elements , like <section>, <article>, <header>, and <nav>, are the essential parts of semantic substance of documents. These additionally incorporate the <video>, <audio>, and <canvas> tags, as well as the integration of SVG content. These components are intended to make it simple to incorporate and handle interactive media and graphical substance on the web without resorting to restrictive modules and APIs. While a few components and traits have been expelled. A few components, for example, <a>, <cite> and <menu> have been changed, redefined or standardized. The APIs and DOM are no longer reconsideration but are fundamental parts of the HTML5 specification.

Some of the most interesting new features in HTML5:

• The <canvas> element for 2D drawing
• The <video> and <audio> elements for media playback
• Support for local storage
• New content-specific elements, like <article>, <footer>, <header>, <nav>,<aside>,<section>

Below is a list of some advantages of HTML5:

• Mutuality
• Cleaner mark-up / Improved Code
• Improved Semantics
• Elegant forms and web apps
• Offline Application cache
• Supports rich media elements
• Geolocation access from web
• Optimized for Mobile devices

HTML5 nGeolocation is used to locate a user’s position
The HTML5 Geolocation API is used to get the geographical position of a user.
Since this can compromise user privacy, the position is not available unless the user approves it.

Use the getCurrentPosition() method to get the user’s position.
The example below is a simple Geolocation example returning the latitude and longitude of the user’s position:

<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +"
Longitude: " + position.coords.longitude;
}
</script>

Before HTML5 LocalStores was done with cookies. Cookies are not very good for large amounts of data, because they are passed on by every request to the server, so it was very slow and in-effective.
In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website’s performance.and The data is stored in different areas for different websites, and a website can only access data stored by itself.
And for creating localstores just need to call localStorage object like below we are storing name and address

<script type="text/javascript">
localStorage.name="ABC";
localStorage.address="New Delhi India.";
document.write(localStorage.address);
</script>

The <canvas> tag in the HTML is used to create graphics such as boxes, circles using JavaScript. It is only a container for graphics, you have to use JavaScript to design the graphics. It has default methods to create different shapes. It is important to mention width and height while you are creating a canvas element.

Example

<canvas id="myCanvas" width="200" height="100"></canvas>

In the above example, a rectangle is drawn using the canvas tag.

Web workers in Htl are nothing but a JavaScript running in the background. It is used to perform tasks without affecting the performance and interfering with the user interface. They can also perform an I/O request using XMLHttpRequest. You can define a Worker object by using the Web worker API to run the JavaScript file.

Example

if (typeof(w) == "undefined") {
  w = new Worker("workers.js");
}

The above code runs the Web worker with the JavaScript file workers.js.

Some rules for HTML5 were established:

• New features should be based on HTML, CSS, DOM, and JavaScript
• Reduce the need for external plugins (like Flash)
• Better error handling
• More markup to replace scripting
• HTML5 should be device independent
• The development process should be visible to the public.

The MathML is a markup language used to describe the mathematical notation in the HTML page. It captures both the structure and the content of the mathematical notation. It enables the mathematics to be served, received, and processed on the World Wide Web.

<math xmlns = "http://www.w3.org/1998/Math/MathML">
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo> = </mo>		
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>		
</math>

The above HTML code is described using a MathML markup language, and it produces the result a2 + b2 = c2.

The HTML tags are not case-sensitive. But it is a good practice to write the HTML markup in the lowercase.

Canvas is a element of HTML5 which uses JavaScript to draw graphics on a web page. A canvas is a rectangular area. Each and every pixel of it can be controlled by us. There are several methods for drawing paths, boxes, circles, characters, and adding images by using canvas.

To add canvas tag to our HTML document we need id, width and height. Below is the example how to write a basic canvas tag to your HTML document.

<canvas id="myFirstCanvas" width="100" height="100"> </canvas>

The <article> tag is used to create independent sections in the HTML. It is a self-contained element that is used to represent an article. This element can be used to create a blog entry, forum post, comment section, or magazine article.

The default value of the article tag

article { 
                display:block; 
            } 

Example for article tag

 <article class="day-forecast">
        <h2>04 February 2020</h2>
       <p>Clear sky with no hint of rain.</p>
 </article>

In HTML5, graphics can be drawn using two graphics elements.

1. Canvas element:

It is a graphics element that is used to draw shapes using JavaScript. It has several methods for drawing paths, boxes, circles, and even add images.

Example

<canvas id="myCanvas" width="100" height="100"></canvas>

The above canvas code designs a square with 100 by 100 size.

2. SVG (Scalable Vector Graphics):

SVG is based on vector graphics. It is used to define graphics in XML format. Graphics designed by SVG doesn’t lose quality when zoomed in or resized.

Example

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

The above HTML code designs a circle.

Server-Sent Events are just events that flow from the webserver to the web browsers. With this event, the webpage automatically gets an update from the server. When new information is available in the server, it sends the data to the client without the need for continuous polling. The element is used added to use the Server-Sent Events in your document. The src attribute in the element is used to provide the URL that points to the persistent HTTP connection.

Microdata is a way of providing additional schematics to your document. With Microdata, you can create your own customized elements with the custom properties and embed them in your web application. Microdata is nothing but a group of name-value pairs. Each group is called an item and each name-value pair is a property.

The itemscope attribute in the Microdata is used to create an item and the itemprop attribute is used to create attributes for the items.

Example

<div itemscope>
         <p>My name is <span itemprop = "name">Bob</span>.</p>
</div>
<div itemscope>
 <p>My age is <span itemprop = "age">35</span>.</p>
</div>

The above code creates an itemscope with two properties name and age. It creates the following result.

My name is Bob.

My age is 35.

There are lots of APIs available in HTML5 that add additional abilities to your application. Some of the popular API's are:

• Media API - It is used to add video and audio elements to your application. It has in-built methods to pause, play, load, etc.
• Text Track API - It is used to add text tracks to audio and video source. The subtitle is a good use of the Text Track API.
• High-Resolution Time API - It is used to provide accurate current time in sub-millisecond.
• Vibration API - It is used to offer vibration response to user touch. It enhances the user experience by providing a great response.
• Drag and Drop API - It is used to add drag and drop functionality to your application.
• HTML Geolocation - This API is used to get a geographical position of a user.
• HTML Web Workers - It is used to run JavaScript files in the background without interrupting the user interface.

Some of the new elements introduced in the HTML5 are,

• <article> - It is used to define an article.
• <aside> - It is used to define content aside from the page content.
• <details> - It defines additional details that can be viewed or hidden.
• <header> - It defines a header of a document.
• <footer> - It defines a footer of a document.
• <mark> - It defines marked or highlighted text.
• <meter> - It is used to define scalar measurement.
• <ruby> - It defines a ruby annotation.
• <time> - It defines date and time.
• <figure> - It defines a self-contained text.
• <nav> - It is used to define navigation links.
• <rt> - It is used to define the pronunciation of a character.

Some of the deprecated tags in the HTML5 are,

• <font> - It defines the font size, and colour.
• <frame> - It defines a frame.
• <big> - It is used to define big text.
• <center> - It defines centeres text.
• <dir> - It defines a directory list.
• <s> - It defines a strikethrough text.
• <u> - It defines a underline text.
• <acronym> - It defines an acronym.
• <applet> - It is used to define an applet.
• <basefont> - It is used to define a base font for the page.

The < !DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in. AND The < !DOCTYPE> tag does not have an end tag and It is not case sensitive.

The < !DOCTYPE> declaration must be the very first thing in HTML5 document, before the tag. As In HTML 4.01, all < ! DOCTYPE > declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). Where as HTML5 is not based on SGML, and therefore does not require a reference to a Document Type Definition (DTD).

The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window. like below we can create and access a sessionStorage here we created “blogName” as session

<script type="text/javascript">
sessionStorage.blogName="OnlineInterviewQuestions";
document.write(sessionStorage.name);
</script>

The new HTML5 specification allows browsers to prefetch some or all of website assets such as HTML files, images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the user to have accessed this content previously, for fetching this content. In other words, application cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. Prefetching files can speed up the site’s performance, though you are of course using bandwidth to download those files initially.

Below is the list of new APIs provided by the Html 5 standard.

• Canvas : Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, games, and image composition.
• Timed media playback
• Offline storage database
• Document editing
• Drag-and-drop
• Cross-document messaging
• Browser history management
• MIME-type and protocol handler registration

Yes, we can use below new input type Attribute in HTML5

• tel The input is of type telephone number
• search The input field is a search field
• url a URL
• email One or more email addresses
• datetime A date and/or time
• date A date
• month A month
• week A week
• time The input value is of type time
• datetime-local A local date/time
• number A number.
• range A number in a given range.
• color A hexadecimal color, like #82345c
• placeholder Specifies a short hint that describes the expected value of an input field.

In HTML5 header and footer are Semantic Elements. Header is used to define the header for a document or a section and Footer is used to define the footer for a document or a section.