HTML Keynotes

HTML Specs:

HTML Guide:

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 Doctype


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.

Apple Specific Meta

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?

new semantics

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:

  1. can be cached
  2. remain in browser history, can be bookmarked
  3. have length restrictions, max 2048
  4. never be used with sensitive  data

POST: query strings sent in the HTTP message body of a request

  1. never cached
  2. Don’t remain in history, can’t be bookmarked
  3. 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)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s