1. Doctype, DTD, HTML, XHTML definitions and usages
The <!DOCTYPE> declaration must be the very first thing in HTML document, before <html> tag, and it is not a HTML tag but an instruction to the web browser about what version of HTML the page is written in.
In HTML 4.01, the <!DOCTYPE> refers to a DTD, because it was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
HTML 5 is not based on SGML, and not require a reference to a DTD.
On SGML and HTML
On HTML and XHTML
2. Difference between standards mode and quirks mode ?
Render web page in quirks mode is to make the CSS rules compatible for then-fashioned browsers.
On Standards Mode and Quirks Mode
3. Limitation on XHTML
Unlike HTML, XHTML is an XML-based markup language. The syntax is slightly different, and it needs well-formedness, i.e. closing every tag, and IE 8 and below doesn’t support it. Many XHTML is served as text/html MIME type so that the most browsers can read.
XHTML is good for processing data since it is well validated.
On serving XHTML and HTML
4. Meta Tag in HTML
Meta tag defines the meta data for HTML document, not displayed on the page but used by browsers, search engines or other web services.
Includes: description, viewport, keywords, author, last modified date, etc.
5. data-* attribute?
The data-* attribute is used to store custom data private to the page or application, giving developer the ability to embed custom data attributes on all HTML elements.
6. Building blocks of HTML5 ? new semantics in HTML5?
A semantic element clearly describes its meaning to both the browser and the developer.
non-semantics: div, span etc, tells nothing about its content
semantics: form, table, img etc, clearly defines its content
HTML 5 offers new ones:
header, nav, section, article, aside, figure, figcaption, footer, details, summary, mark, time
7. Difference between cookies, sessionStorage and localStorage
Cookies: data stored in text files in system, can set expiration date. Accessible through document.cookie.
example: document.cookie=”username=Al Jor; expires=Thu, 18 Nov 2012 12:00:00 UTC; path=/”;
localStorage: window.localStorage is a object to store data in browser in name/value pairs.
It is more secure and faster, and capable to handle at least 5MB data size. There is no expiration date and won’t be deleted when user closes the browser.
sessionStorage: is equal to localStorage except that it stores data for only one session, and data is deleted when user closes the browser window/tab.
8. Difference between GET and POST ? error code 404 ?
GET: query strings sent through URL of request:
- can be cached
- remain in browser history, can be bookmarked
- have length restrictions, max 2048
- never be used with sensitive data
POST: query strings sent in the HTTP message body of a request
- never cached
- Don’t remain in history, can’t be bookmarked
- no length restrictions
HTTP error code
9. Web page three layers of structure:
HTML/XHTML: structural layer
CSS: presentation layer
JS: behaviour layer (manipulate BOM/DOM)