1. What are the new form element types in HTML 5?
New form elements introduced in HTML 5:
★ Color
★ Date
★ Datetime-local
★ Email
★ Time
★ Url
★ Range
★ Telephone
★ Number
★ Search
2. Described datalist in HTML 5?
Datalist element in HTML 5 helps to provide autocomplete feature in a textbox.
HTML code for DataList feature:
<input list="Country">
<datalist id="Country">
<option value="India">
<option value="Italy">
<option value="Iran">
<option value="Israel">
<option value="Indonesia">
</datalist>
3. How page structure of HTML 5 is different from HTML 4 or previous HTML?
A typical web page has headers, footers, navigation, central area and side bars. Now if we want to represent the same in HTML 4 with proper names to the HTML section we would probably use a DIV tag.
But in HTML 5 they have made it more clear by creating element names for those sections which makes your HTML more readable.
More details:
★ <header>: Represents header data of HTML.
★ <footer>: Footer section of the page.
★ <nav>: Navigation elements in the page.
★ <article>: Self-contained content.
★ <section>: Used inside article to define sections or group content in to sections.
★ <aside>: Represent side bar contents of a page.
Selectors help to select an element to which you want to apply a style. For example below is a simple style called as 'intro" which applies red color to background of a HTML element.
cODE:
<style>
.intro
{
background-color:red;
}
</style>
5. How to use column layout in CSS?
CSS column layout helps you to divide your text in to columns. For example consider the below magazine news which is one big text but we need to divide the same in to 3 columns with a border in between. That's where HTML 5 column layout comes to help.
SVG stands for scalable vector graphics. It's a text based graphic language which draws images using text, lines, dots etc. This makes it lightweight and renders faster.
w3c stands for world web consortium. w3c Standards compliance in web development is where everything is (hopefully?) going. Don't ask them to recite the w3c's mission statement or anything, but they should at least have a general idea of who they are.
8. Can you please explain the difference between cookies, session-Storage, and local-Storage?
Cookies are small text files that websites place in a browser for tracking or login purposes. Meanwhile, local-Storage and session-Storage are new objects, both of which are storage specifications but vary in scope and duration. Of the two, local-Storage is permanent and website-specific whereas session-Storage only lasts as long as the duration of the longest open tab.
9. Can you please explain the difference between SGML and HTML?
SGML (Standard generalized markup language) is a standard which tells how to specify document markup. It's only a Meta language which describes how a document markup should be. HTML is a markup language which is described using SGML.
10. Can you please explain the difference caching between HTML5 and the old HTML?
An important feature of HTML5 is the Application Cache. It creates an offline version of a web application. and stores website files such as HTML files, CSS, images, and JavaScript, locally. It is a feature that speeds up site performance.
11. Suppose if I do not put <! DOCTYPE html> then will HTML5 work?
No, browser will not be able to identify that it's a HTML document and HTML 5 tags will not function properly.
12. What are the major new API's that come standard with HTML5?
Name of a few one's are:
★ Media API
★ Text Track API
★ Application Cache API
★ User Interaction
★ Data Transfer API
★ Command API
★ Constraint Validation API
★ History API.
Web Workers are background scripts that do not interfere with the user interface or user interactions on a webpage, allowing HTML to render uninterrupted while JavaScript works in the background.
14. Can you please explain the difference between HTML5 interaction in Sencha and Twitter/Bootstrap?
Sencha and Twitter/Bootstrap are both HTML development frameworks that integrate HTML5, CSS3, and JavaScript. The major difference is that in Sencha, the three languages are all comingled together in code, whereas in Bootstrap, HTML and CSS and decoupled.
15. For what data- attributes are good?
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.
16. What are some new HTML5 input attributes?
There are many new form elements including: datalist, datetime, output, keygen, date, month, week, time, number, range, email, and url.
17. Can you please explain the difference between SVG and <Canvas>?
<Canvas> is an element that manipulates two-dimensional (2D) pixels while Scalable Vector Graphics works in 2D and three-dimensional (3D) vectors. Essentially, <Canvas> is to SVG as Photoshop is to Illustrator.
18. What are the HTML5 image elements?
Canvas and WebGL. <Canvas> is a new element that acts as a container for graphical elements like images and graphics. Coupled with JavaScript, it supports 2D graphics. WebGL stands for Web Graphics Language, a free cross-platform API that is used for generating 3D graphics in web browsers.
19. What are new HTML5 media-related elements?
HTML5 has strong support for media. There are now special <audio> and <video> tags. There are additional A/V support tags as well: <embed> is a container for 3rd party applications. <track> is for adding text tracks to media. <source> is useful for A/V media from multiple sources.
20. What elements have disappeared in HTML5?
<frame> and <frameset> have been eliminated. Other elements that are no longer supported include: <noframe>, <applet>, <bigcenter> and <basefront>.
21. List some new HTML5 markup elements?
There are several:
<article>, <aside>, <bdi>,
<command>, <details>, <figure>,
<figcaption>, <summary>, <header>,
<footer>, <hgroup>, <mark>,
<meter>, <nav>, <progress>,
<ruby>, <rt>, <section>,
<time>, and <wpr>.
Instead of typing out a ridiculously long DOCTYPE statement to tell the browser how to render your webpage, this long line of code has been truncated to <!doctype html>.
23. Can you please explain the real difference between HTML and HTML5?
A lot of. From a broader perspective, HTML was a simple language for laying out text and images on a webpage, whereas HTML5 can be viewed as an application development platform that does what HTML does that and more, including better support for audio, video, and interactive graphics. It has a number of new elements, supports offline data storage for applications, and has more robust exchange protocols. Thus, proprietary plug-in technologies like Adobe Flash, Microsoft Silver-light, Apache Pivot, and Sun JavaFX are no longer needed, because browsers can now process these elements without additional requirements.
24. Can you please explain the difference between HTML and HTML5?
Trick question, there is no difference. HTML5 is a continuum of HTML and just a souped up version of the original HTML. There has been no major paradigm shift.
25. Can you please explain 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 a page.
26. Can you please explain the syntax difference between bulleted list and numbered list?
Bulleted lists use the <ul> tag, which stands for "unordered," whereas <ol> is used to create an ordered list.
27. What is wrong when hyperlink or image is not displaying correctly?
It could be any number of things, but the most common mistakes are leaving out a tag bracket or quote missing for href, src, or alt text may be the issue. You should also verify the link itself.
To link an image, use <img> tags. You need specify the image in quotes using the source attribute, src in the opening tag. For hyperlinking, the anchor tag, <a>, is used and the link is specified in the href attribute. Text to be hyperlinked should be placed between the anchor tags. Little known fact: href stands for "hypertext reference." When linking to an email, the href specification will be "mailto:sendmemail@here.com."
Example:
<img src="HTMLrocks.jpg"></img>
<a href="skillprelaunch2.globalguideline.com">globalguideline</a>
<a href="brad@globalguideline.com">Email Me</a>
29. How to make comments without text being picked up by the browser?
Comments are used to explain and clarify code or to prevent code from being recognized by the browser. Comments start with "*<!--" and end with " -->".
Example:
<!-- Insert comment here. -->
30. How many HTML tags are used for the most simple of web pages?
8 total. 4 pairs of tags.
<HTML>
<HEAD>
<TITLE>Simplest page!</TITLE>
</HEAD>
<BODY>
Doesn't get simpler more than this.
</BODY>
</HTML>
31. When serving XHTML pages what are the limitations?
Perhaps the biggest issue is the poor browser support XHTML currently enjoys. Internet Explorer and a number of other user agents cannot parse XHTML as XML. Thus, it is not the extensible language it was promised to be. There are many other issues.
32. Can you please explain the difference between standards mode and quirks mode?
Quirks Mode is a default compatibility mode and may be different from browser to browser, which may result to a lack of consistency in appearance from browser to browser.
Semantic HTML is a coding style where the tags embody what the text is meant to convey. In Semantic HTML, tags like <b></b> for bold, and <i></i> for italic should not be used, reason being they just represent formatting, and provide no indication of meaning or structure. The semantically correct thing to do is use <strong></strong> and <em></em>. These tags will have the same bold and italic effects, while demonstrating meaning and structure (emphasis in this case).
The term DOCTYPE tells the browser which type of HTML is used on a webpage. In turn, the browsers use DOCTYPE to determine how to render a page. Failing to use DOCTYPE or using a wrong DOCTYPE may load your page in Quirks Mode. See example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">.
35. What things must be wary of when design or developing for multilingual sites?
Another problem with many solutions: setting the default language, using Unicode encoding, using the 'lang' attribute, being aware of standard font sizes and text direction, and language word length (may affect layout).
