Frequently asked - HTML5 Interview Questions and Answers - Part 02
21. What is the difference between <div> and <frame>?
A <div> is a generic container element for grouping and styling, whereas a <frame> creates divisions within a web page and should be used within the <frameset> tag. The use of <frame> and <frameset> are no longer popular and are now being replaced with the more flexible <iframe>, which has become popular for embedding foreign elements (ie. Youtube videos) into the page.
22. What are data- attributes good for?
The HTML5 data- attribute is a new addition that assigns custom data to an element. It was built to store sensitive or private data that is exclusive to a page or application, for which there are no other matching attributes or elements.
The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.
The attribute name should not contain any uppercase letters, and must be at least one character long. And the attribute value can be any string.
23. What are some of the major new API’s that come standard with HTML5? or What are the new APIs provided by HTML 5 standard?
To name a few: Media API, Text Track API, Application Cache API, User Interaction, Data Transfer API, Command API, Constraint Validation API, and the History API.
24. What are the new media element in HTML 5 other than audio and video?
The <embed> tag was introduced in HTML 5. The HTML <embed> tag is used for embedding an external application or interactive content into an HTML document. <embed> element is an empty element.
<embed type="video/quicktime" src="/web_design/paris_vegas.mov" style="width:100%;">`
25. What is a placeholder attribute in HTML5?
New placeholder attribute in HTML5 acts as a hint for input field value. It provides a kind of facilitating text for a description or expected type of value or an expected format of the value. For example, “Student Name” hints for a textbox expecting student name or “000-0000000” hints for an expected phone number format etc.
<input type="text" name="studentName" placeholder="Student name"/>`
26. What is a draggable attribute in HTML5?
In order to make an element draggable, HTML5 introduces draggable attribute. By default, Links and Images are draggable. If we want to make a paragraph or a span element draggable, will set the draggable attribute of that specific element to true as:
<div draggable="true"></div>
27. What is the difference between <section> and <article> in HTML?
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
28. What is the difference between <section> and <div> in HTML?
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.
29. What is ruby tag in HTML5 and what is its usage?
The <ruby> tag specifies a ruby annotation.
A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. This kind of annotation is often used in Japanese publications.
Use the <ruby> tag together with the <rt> and/or the <rp> tags: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotations.
30. How can we embed Audio in HTML5?
The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one. Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>`
31. What is <map> in HTML5 ? What is it used for?
Image maps are images that have clickable areas (sometimes referred to as “hot spots”). Each of these clickable areas can lead to a different location. Therefore, an image map could potentially have many links that lead to many different URLs.
The <map> tag is used along with the <area> and <img> tags to define the image map.
To create an image map, you use the <map> tag to declare the image map, and the <area> tag (nested within the <map> tag) to define the clickable areas. The <img> tag can be defined elsewhere on the page, and is linked to the <map> element using the name attribute.
<img src="/image.png" alt="My image" usemap="#my-map"/>
<map name="my-map">
<area
shape="rect"
coords="50,50,100,100"
href="/box/"
alt="My rectangle box">
</map>`
32. How can we embed Video in HTML5?
HTML <video> element to embed video content in a document such as a movie clip or other video streams.
Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>`
33. What is the difference between <iframe>, <embed> and <object>?
The HTML Inline Frame Element <iframe> represents a nested browsing context, effectively embedding another HTML page into the current page.
The HTML <embed> element represents an integration point for an external application or interactive content (in other words, a plug-in).
The HTML <object> element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.
34. What is the difference between “alt” text and “title” text in HTML image element?
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
35. What is <var> tag in HTML5 ?
The <var> tag is a phrase tag. It defines a variable.
The HTML <var> element represents a variable in a mathematical expression or a programming context. This tag is not deprecated, but it is possible to achieve richer effect with CSS.
var {
font-style: italic;
}
Example:
<p>A simple equation: <var>x</var> = <var>y</var> + 2</p>`
36. What is HTML5 ARIA?
WAI-ARIA is a spec defining support for accessible web apps.
It defines bunch of markup extensions (mostly as attributes on HTML5 elements), which can be used by the web app developer to provide additional information about the semantics of the various elements to assistive technologies like screen readers. Of course, for ARIA to work, the HTTP user agent that interprets the markup needs to support ARIA, but the spec is created in such a way, as to allow down-level user agents to ignore the ARIA-specific markup safely without affecting the web app’s functionality.
<ul role="menubar">
<li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel">Item 1</li>
<ul role="menu">
<li role="menuitem" aria-haspopup="false">New</li>
</ul>
</li>
</ul>`
Note the role attribute on the outer <ul> element. This attribute does not affect in any way how the markup is rendered on the screen by the browser; however, browsers that support ARIA will add OS-specific accessibility information to the rendered UI element, so that the screen reader can interpret it as a menu and read it aloud with enough context for the end-user to understand (for example, an explicit “menu” audio hint) and is able to interact with it (for example, voice navigation).
37. What is Character Encoding?
To display an HTML page correctly, a web browser must know which character set (character encoding) to use. This is specified in the tag:
HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
HTML5:
<meta charset="UTF-8">
38. How do you change the direction of html text?
The dir attribute is used to set the base direction of text for display. It is essential for enabling HTML in right-to-left scripts such as Arabic, Hebrew, Syriac, and Thaana.
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">
...
39. Where and why is the rel="noopener" attribute used?
The rel="noopener" is an attribute used in <a> elements (hyperlinks). It prevents pages from having a window.opener property, which would otherwise point to the page from where the link was opened and would allow the page opened from the hyperlink to manipulate the page where the hyperlink is.
40. How do you set IE compatibility mode?
- By using http-equiv=X-UA-Compatible meta tag with content IE=edge
- IE=edge mode tells Internet Explorer to display content in the highest mode available
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="I am a Vigo interview question web page with description">
<title>Home Page</title>
</head>
<body>
</body>
</html>
41. Have you used different HTML templating languages before?
Yes
- Pug
- ERB
- Slim
- Handlebars
- Jinja
- Liquid
They are more or less the same and provide similar functionality of escaping content and helpful filters for manipulating the data to be displayed. Most templating engines will also allow you to inject your own filters in the event you need custom processing before display.
42. What is HTML Language code reference?
Always, we should include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers:
<html lang="en">
...
</html>