Scribd
Upload
61 views7 pages

HTML5 Tricky Interview Questions: Font Measuring Units PX Are Absolute While Em, PT Are Scalable

The document discusses HTML5 interview questions and answers related to default font size, closing tags, using percentages in font sizes, HTML shivs, boilerplates, character encoding, web storage, differences between span and div, the geolocation API, specifying doctypes, differences between SVG and canvas, creating a canvas element, embedding a video, relationships between header and h1 tags, using multiple header and footer tags, containing sections within articles and vice versa, and correctly using header, article, section and footer elements.

Uploaded by

mynenianupama
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
61 views7 pages

HTML5 Tricky Interview Questions: Font Measuring Units PX Are Absolute While Em, PT Are Scalable

The document discusses HTML5 interview questions and answers related to default font size, closing tags, using percentages in font sizes, HTML shivs, boilerplates, character encoding, web storage, differences between span and div, the geolocation API, specifying doctypes, differences between SVG and canvas, creating a canvas element, embedding a video, relationships between header and h1 tags, using multiple header and footer tags, containing sections within articles and vice versa, and correctly using header, article, section and footer elements.

Uploaded by

mynenianupama
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML5 Tricky interview questions

 Q21. What is the default Browser font size of HTML5?


 A21. 16 px is the browser default in case there are no specified font size value being
assinged in the CSS. Otherwise the given value will take effect respectively.

 Q22. Is it necessary to close HTML tags while making layouts?


 A22. Yes One must close all the tags as they might have individual properties with respect
to inline or block elements. But there are single elements can survive without closing like
<hr> tag, <br> tag etc.

 Q23. Can we use percentage in font sizes?


 A23. Only if we use them with specific set for e.g. if the website is set with default size
16px than we can use values like em to scale them with our choices i.e 1.25% em
Font measuring units px are absolute while em, pt are scalable

 Q24. What is HTML Shiv?


 A24. HTML Shiv is JavaScript fix made by Individual brilliance of Sjoerd Visscher for enable
styling of HTML5 Internet Explorer that are prior to version 9.

 Q25. What is HTML5 boilerplate?


 A25. HTML5 Boilerplate is a professional front-end template that is used to create fast,
robust and adaptable HTML5 sites that are Cross Browser compatible features.
How do you indicate the character set being used by an HTML5 document? How does this
differ from older HTML standards?

In HTML5, the encoding used can be indicated with the charset attribute of a <meta> tag inside
the document’s <head> element:

<!DOCTYPE html>

<html>

<head>

...

<meta charset="UTF-8">

...

</head>

...

</html>

This is a slightly simpler syntax from older HTML standards, which did not have the charset
attribute. For example, an HTML 4.01 document would use the <meta> tag as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

...

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

...

</head>
...

</html>

What is HTML5 Web Storage? Explain localStorage and sessionStorage.

With HTML5, web pages can store data locally within the user’s browser.

Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data
is not included with every server request, but used ONLY when asked for.

The data is stored in name/value pairs, and a web page can only access data stored by itself.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred
to the server.

The difference between localStorage and sessionStorage involves the lifetime and scope of the
storage.

Data stored through localStorage is permanent: it does not expire and remains stored on the
user’s computer until a web app deletes it or the user asks the browser to delete it.
SessionStorage has the same lifetime as the top-level window or browser tab in which the script
that stored it is running. When the window or tab is permanently closed, any data stored
through sessionStorage is deleted.

Both forms of storage are scoped to the document origin so that documents with different
origins will never share the stored objects. But sessionStorage is also scoped on a per-window
basis. If a user has two browser tabs displaying documents from the same origin, those two
tabs have separate sessionStorage data: the scripts running in one tab cannot read or overwrite
the data written by scripts in the other tab, even if both tabs are visiting exactly the same page
and are running exactly the same scripts.

What is the difference between span and div?

The difference is that span gives the output with display: inline and div gives the output with
display: block.

span is used when we need our elements to be shown in a line, one after the other.
What is the Geolocation API in HTML5?

HTML5’s Geolocation API lets users share their physical location with chosen web sites.
JavaScript can capture a user’s latitude and longitude and can send it to the back-end web
server to enable location-aware features like finding local businesses or showing their location
on a map.

Today, most browsers and mobile devices support the Geolocation API. The Geolocation API
works with a new property of the global navigator object.

A Geolocation object can be created as follows:

var geolocation = navigator.geolocation;

The geolocation object is a service object that allows widgets to retrieve information about the
geographic location of the user’s device.

What’s one main result if you do not specify a doctype in an HTML page?

New HTML5-specific tags will not be interpreted by the browser.

What’s the difference between the <svg> and <canvas> elements?

The <svg> element is a container for SVG graphics. SVG has several methods for drawing paths,
boxes, circles, text, and even bitmap images.

SVG is a language for describing 2D graphics, but <canvas> allows you to draw 2D graphics on
the fly using JavaScript.

SVG is XML-based, which means that every element is available within the SVG DOM. You can
attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are
changed, the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the
browser. If its position should be changed, the entire scene needs to be redrawn, including any
objects that might have been covered by the graphic.
Write the code necessary to create a 300 pixel by 300 pixel <canvas>. Within it, paint a blue
100 pixel by 100 pixel square with the top-left corner of the square located 50 pixels from
both the top and left edges of the canvas.

Here is one simple implementation:

<canvas id="c" width="300" height="300"></canvas>

<script>

var canvas = document.getElementById( "c" );

var drawing_context = canvas.getContext( "2d" );

drawing_context.fillStyle = "blue";

drawing_context.fillRect( 50, 50, 100, 100 );

</script>

Give a simple implementation of the <video> tag to embed a video stored at


http://www.example.com/amazing_video.mp4. Give the video a width of 640 pixels by 360
pixels. Provide the user with controls.

Here is one simple implementation:

<video src="http://www.example.com/amazing_video.mp4" width="640" height="360"


controls></video>

Alternatively, the source file may be indicated with a separate <source> tag inside the <video>
element, as in:

<video width="640" height="360" controls>

<source src="http://www.example.com/amazing_video.mp4">

</video>

Describe the relationship between the <header> and <h1> tags in HTML5.
In previous specifications of HTML, only one <h1> element was typically present on a page,
used for the heading of the entire page. HTML5 specifies that <h1> represents the top-level
heading of a “section”, whether that be the page <body>, or an <article> or <section> element.
In fact, every <header> element should at least contain an <h1> element. If there is no natural
heading for the section, it is a good indication it should not use an <article> or <section> tag.

Can a web page contain multiple <header> elements? What about <footer> elements?

Yes to both. In fact, both the <header> and <footer> tags are designed to serve their respective
purposes in relation to whatever their parent “section” may be. So not only can the page
<body> contain a header and a footer, but so can every <article> and <section> element. In
fact, a <header> should be present for all of these, although a <footer> is not always necessary.

Can a <section> contain <article> elements? Can an <article> contain <section> elements?
Provide usage examples.

The answer to both questions is yes; i.e., a <section> can contain <article> elements, and an
<article> can contain <section> elements.

For example, a personal dashboard page might contain a <section> for social network
interactions as well as a <section> for the latest news articles, the latter of which could contain
several <article> elements.

Conversely, an <article> might contain a <section> at the end for reader comments.

Briefly describe the correct usage of the following HTML5 semantic elements: <header>,
<article>, <section>, <footer>.

The <header> element is used to contain introductory and navigational information about a
section of the page. This can include the section heading, the author’s name, time and date of
publication, table of contents, or other navigational information.

The <article> element is meant to house a self-contained composition that can logically be
independently recreated outside of the page without losing it’s meaining. Individual blog posts
or news stories are good examples.
The <section> element is a flexible container for holding content that shares a common
informational theme or purpose.

The <footer> element is used to hold information that should appear at the end of a section of
content and contain additional information about the section. Author’s name, copyright
information, and related links are typical examples of such content.

You might also like