in Front-End, HTML

HTML Questions/Answers

What’s a doctype do?

Basically, the DOCTYPE describes the HTML that will be used in your page. Browsers also use the DOCTYPE to determine how to render a page. Not including a DOCTYPE or including an incorrect DOCTYPE can trigger quirks mode.

What’s the difference between standards mode and quirks mode?

There are now three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode. In quirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5 for Windows that is required not to break existing content on the Web. In full standards mode, the behavior is (hopefully) the behavior described by the HTML and CSS specifications. In almost standards mode, there are only a very small number of quirks implemented.

What are the limitations when serving XHTML pages?
Are there any problems with serving pages as application/xhtml+xml?

Browsers will display xml parse errors if your page contains invalid code.

However that serving your pages as application/xhtml+xml will cause Internet Explorer 8 to show a download dialog box for an unknown format instead of displaying your page, as the first version of Internet Explorer with support for XHTML is Internet Explorer 9.

How do you serve a page with content in multiple languages?
What kind of things must you be wary of when design or developing for multilingual sites?

  1. Character encoding
  2. Language direction
  3. Using the right language code
  4. Font sizes

What are data- attributes good for?

Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation).

This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page

Describe the difference between cookies, sessionStorage and localStorage?

Browsers that implement the “Web Storage” draft specification define two properties on the Window object:localStorage and sessionStorage. Both properties refer to a Storage object—a persistent associative array that maps string keys to string values. Storage objects work much like regular JavaScript objects: simply set a property of the object to a string, and the browser will store that string for you. The difference between localStorage and sessionStorage has to do with lifetime and scope: how long the data is saved for and who the data is accessible to.

Session Storage = non persistent and scoped only to the current window
localStorage = persistant and scoped to the domain.

Cookies = the old school way of doing all of the above. Stores name/value pairs per domain.