HTML Keynotes

HTML Specs:

https://html.spec.whatwg.org/multipage/#toc-introduction

http://www.w3.org/TR/html5/Overview.html#contents

HTML Guide:

https://developer.mozilla.org/en-US/docs/Web/HTML

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 DTD

http://www.w3.org/TR/html4/sgml/dtd.html

On SGML and  HTML

http://www.w3.org/TR/REC-html40/intro/sgmltut.html

On Doctype

http://www.w3schools.com/tags/tag_doctype.asp

On HTML and XHTML

http://www.w3schools.com/html/html_xhtml.asp

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

https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode

http://reference.sitepoint.com/css/doctypesniffing

http://www.quirksmode.org/css/quirksmode.html

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

http://www.w3.org/International/articles/serving-xhtml/

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.
http://www.metatags.info/meta_http_equiv_cache_control

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.

http://www.w3schools.com/tags/att_global_data.asp

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

http://ejohn.org/blog/html-5-data-attributes/

6. Building blocks of HTML5 ? new semantics in HTML5?

http://lacquer.fi/radidoc/The_building_blocks_of_a_HTML5_web_page

new semantics

http://www.w3schools.com/html/html5_semantic_elements.asp

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=/”;

http://www.w3schools.com/js/js_cookies.asp

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.

http://www.w3schools.com/html/html5_webstorage.asp

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://www.w3schools.com/tags/ref_httpmethods.asp

HTTP error code

http://www.w3.org/Protocols/HTTP/HTRESP.html

http://www.w3schools.com/tags/ref_httpmessages.asp

9. Web page three layers of structure:

HTML/XHTML: structural layer

CSS: presentation layer

JS: behaviour layer (manipulate BOM/DOM)

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s