HTML 5 Interview Questions

What are the child elements to the audio and video tag?

<source src="" type="">

What is the full html for showing a video of 300x250 that autoplays, has full control and have at least 2 sources.

<video width="300" height="250" autoplay controls> <source src="test.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> Your browser does not support video </video>

What is the tag <<ruby> use for?

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.

IE 8 and earlier cannot style HTML 5 unknown elements. How can we fix this?

By creating the elements first using javascript. This method describe by shiv html5shiv library. Basically use the createElement method to inject into DOM and rewrite the tag as a javascript.

What is the tag bdi use for?

Defines a part of text that might be formatted in a different direction from other text ? Bi directional isolation. Think arabic language

What is the HTML 5 tag <details> use for?

Defines additional details that the user can view or hide. It creates and arrow that allow you to expand or hide.

What is the HTML 5 <progress> use for ?

Defines the progress of a task. It will render a progress bar with attribute value and max. Where value is the current progress.

What is the HTML 5 tag <footer> use for?

Generally to place authorship, copyright, company information. It can be define within the section element and so you can have many footer tag.

What are some new HTML 5 API ?

HTML Geolocation HTML Drag and Drop HTML Local Storage HTML Application Cache HTML Web Workers HTML SSE

How does old browser handle new semantic tags in HTML 5?

It automatically treats them as inline elements. However, IE browsers cannot style unknown elements.

What is the HTML 5 tag <dialog> use for ?

It creates an open dialog window but only supported on chrome, safari and opera.

What is the HTML 5 tag <figure> use for?

It is use for marking up figure, images in a document.

What are some new elements in HTML5?

New semantic elements like <header>, <footer>, <article>, and <section>. New form control attributes like number, date, time, calendar, and range. New graphic elements: <svg> and <canvas>. New multimedia elements: <audio> and <video>.

What is the difference between <svg> and <canvas>

SVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with a 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.

What is the new tag <svg> use for ?

SVG stands for Scalable Vector Graphics SVG is used to define graphics for the Web SVG is a W3C recommendation

What is the definition of semantic elements

Semantics is the study of the meanings of words and phrases in language. Semantic elements are elements with a meaning such as form, table, img.

What is the tag <datalist> use for?

The <datalist> tag specifies a list of pre-defined options for an <input> element. The <datalist> tag is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data. Use the <input list=""> element's list attribute to bind it together with a <datalist> element. Not supported on Safari

What is the HTML 5 tag <header> use for?

The <header> element represents a container for introductory content or a set of navigational links. Can be put within and article or section element.

What is the tag <keygen> use for?

The <keygen> tag specifies a key-pair generator field used for forms. When the form is submitted, the private key is stored locally, and the public key is sent to the server. Not supported on IE

What is the HTML 5 tag <main> use for?

The <main> tag specifies the main content of a document. The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

What is the HTML 5 tag <menuitem> use for?

The <menuitem> tag defines a command/menu item that the user can invoke from a popup menu. Usually a right click but only supported on firefox.

What is the HTML 5 tag <meter> use for?

The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge. Has min and max attribute to indicate fraction x/y.

What is the HTML 5 <nav> elements use for

The <nav> tag defines a set of navigation links. Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

What is the tag <output> use for?

The <output> tag represents the result of a calculation (like one performed by a script).

What is the tag <rp> use for?

The <rp> tag can be used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotations. Use the <rp> tag together with the <ruby> and the <rt> 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. Think pinyin above Chinese characters

What is the tag <<rt> use for?

The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation. Use the <rt> tag together with the <ruby> and 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. Think pinyin above Chinese characters

What is the tag <section> use for?

The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

What is the tag <summary> use for ?

The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

What is the <track> element use for?

The <track> tag specifies text tracks for media elements (<audio> and <video>). This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.

What the tag <wbr> use for ?

The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break. Tip: When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the <wbr> element to add word break opportunities.

What is the new tag <canvas> use for?

The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

What is the <audio> tag use for?

The controls attribute adds audio controls, like play, pause, and volume. Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element. Multiple <source> elements can link to different audio files. The browser will use the first recognized format.

What is the HTML 5 tag <figcaption> use for?

This tag is inside the <figure> tag and is use to display a caption exactly below the image

What is the HTML5 tag <mark> use for ?

To highlight part of a word in a sentence.

What is the default HTML encoding in HTML5 ?

UTF8

What is requirement for an xhtml document to be proper?

XHTML elements must be properly nested XHTML elements must always be closed XHTML elements must be in lowercase XHTML documents must have one root element Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden Doctype is mandatory and namespace must be specified.

Is body tag required ?

Yes in HTML4 but not in HTML5

Name all new input type attributes

autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step

Name all new input types for HTML5 (13 total)

color date datetime datetime-local email month number range search tel time url week

What attributes add play, pause and volume to an <audio> or <video> tag?

controls

What is the tag <time> use for?

he <time> tag defines a human-readable date/time. This element can also be used to encode dates and times in a machine-readable way so that user agents can offer to add birthday reminders or scheduled events to the user's calendar, and search engines can produce smarter search results. Not supported on IE 8 or above

What are popular semantics elements to use on a web page

header, nav, section, article, footer, aside

What media type is supported by the <audio> tag ?

mp3, ogg, wav