HTML Questions

1. What does a doctype do?

Document Type Declaration, aka. DOCTYPE, is an instruction code that associates a particular SGML or XML document with a Document Type Definition, aka. DTD.

SGML, aka. Standard Generalized Markup Language, defines the generalized markup languages for documents, likeXML, HTML.

DTD, aka. document type definition is a set of markup declarations that define a document type for an SGML-family markup languages, e.g. SGML, XML, HTML. It defines the legal building blocks of these documents.

Basically, DOCTYPE tells the browser how to render the web page, i.e. in standard mode or quirks mode in web.

Before HTML5, there are many DOCTYPE declarations with various DTDs, like HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset. However, HTML5 is not SGML-based, use the DOCTYPE only for mode selection, seems useless but required.

http://w3c.github.io/html/introduction.html#history-0

https://www.w3.org/TR/html4/intro/sgmltut.html

2. What’s the difference between full standards mode, almost standards mode and quirks mode?

Almost standards mode is only available for some version of rendering engines which implements the vertical sizing of table cells traditionally and not according to the CSS2 specs, while full standards mode is chosen to render web page with a valid DOCTYPE and quirks mode is vendor specific implementation of parsing HTML in an old-school way.

Quirks mode is the default compatible render mode of web pages if the browser can’t detect the doctype of the page. It differs from browser to browser due to different implementations of old-school rendering engines.

In the Standards mode the browsers try to give documents the specification-wise correct treatment to the extent implemented in a particular browser.

Firefox, Safari, Chrome, Opera (since 7.5), IE8, IE9 and IE10 also have a mode known as “the Almost Standards mode”, which implements the vertical sizing of table cells traditionally and not according to the CSS2 specification. Mac IE 5, Windows IE 6 and 7, Opera prior to 7.5 and Konqueror did not need an Almost Standards mode, because they didn’t implement the vertical sizing of table cells according to the CSS2 specification in their respective Standards modes anyway. In fact, their Standards modes are closer to the Almost Standards mode than to the Standards mode of newer browsers.

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

https://developer.mozilla.org/en/docs/Gecko’s_Almost_Standards_Mode

https://hsivonen.fi/doctype/

3. What’s the difference between HTML and XHTML? Are there any problems with serving pages as application/xhtml+xml?

XHTML, aka. Extensible Hypertext Markup Language,  is designed to extent HTML for better web with more stricter rules of syntax, but failed in doing so.

HTML5 has two parsing modes or syntaxes: HTML and XML. The difference depends on whether the document is served with a Content-type: text/html header or a Content-type: application/xml+xhtml header.

If it’s served as text/html, the following rules apply:

  • Start tags are not required for every element.
  • End tags are not required for every element.
  • Only void elements such as br, img, and link may be “self-closed” with />.
  • Tags and attributes are case-insensitive.
  • Attributes do not need to be quoted.
  • Some attributes may be empty (such as checked and disabled).
  • Special characters, or entities, do not have to be escaped.
  • The document must include an HTML5 DOCTYPE.

HTML5 can also be written using a stricter, XML-like syntax. XHTML 1.0 was “a reformulation of HTML 4 as an XML 1.0 application.” That isn’t quite true of what is sometimes called “XHTML5”. XHTML5 is best understood as HTML5 that’s written and parsed using the syntax rules of XML and served with a Content-type: application/xml+xhtml response header.

The following rules apply to “XHTML5”:

  • All elements must have a start tag.
  • Non-void elements with a start tag must have an end tag (p and li, for example).
  • Any element may be “self-closed” using />.
  • Tags and attributes are case sensitive, typically lowercase.
  • Attribute values must be enclosed in quotes.
  • Empty attributes are forbidden (checked must instead be checked="checked" or checked="true").
  • Special characters must be escaped using character entities.

Serving XHTML Problems:

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 well.

XHTML does not have the same content type as HTML. The proper content type for XHTML is application/xhtml+xml. Currently, many web servers don’t have this content type reserved for any file extension, so you would need to modify the server configuration files or use a server-side scripting language to send the header manually. Simply specifying the content type in a meta element will not work over HTTP.

The CSS and DOM specifications have special provisions for HTML that don’t apply to XHTML when it’s treated as XML, so your page may look and behave in unexpected ways.

Inline JavaScript must include //<![CDATA[ ..//]]> for some special characters (<, &).

http://www.webdevout.net/articles/beware-of-xhtml#content_negotiation

SitePoint: Differences between HTML and XML

4. 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?

If you wanted to include a passage in French on your page you would need to use the ‘lang’ attribute to mark the change in language. The ‘lang’ attribute can be used with almost every HTML element, making it very easy to change languages within a page.

<blockquote lang=”fr”>

<p>Le plus grand faible des hommes, c'est l'amour qu'ils ont de la vie.</p>

</blockquote>
  1. First of all you will need to choose the primary language for your pages. This is the language the majority of your content is written in.
  2. Language direction e.g dir = “rtl”
  3. Character encoding
  4. Font sizes in CSS consistence
  5. Length of words

http://www.nomensa.com/blog/2010/7-tips-and-techniques-for-multi-lingual-website-accessibility/

https://www.w3.org/International/questions/qa-html-language-declarations

https://support.google.com/webmasters/answer/189077?hl=en

https://support.google.com/webmasters/answer/182192?hl=en&ref_topic=2370587

http://www.pro-tekconsulting.com/blog/how-do-you-serve-a-page-with-content-in-multiple-languages/

5. What are data- attributes good for?

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.

data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as classList, non-standard attributes, extra properties on DOM, or setUserData.

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

How to use data-attributes in HTML5?

6. Consider HTML5 as an open web platform. What are the building blocks of HTML5?

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts:

  • It is a new version of the language HTML, with new elements, attributes, and behaviors,
  • and a larger set of technologies that allows more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.

So as an open web platform, it provides:

  • Semantics: HTML5 new elements, attributes, and behaviours  are allowing you to describe more precisely what your content is.
  • Connectivity: allowing you to communicate with the server in new and innovative ways.  (Web Sockets, Server-sent events, WebRTC)
  • Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently.(Application Cache, IndexedDB, sessionStorage, localStorage, File API)
  • Multimedia: making video and audio first-class citizens in the Open Web.
  • 2D/3D graphics  and effects: allowing a much more diverse range of presentation options. (SVG, Canvas, WebGL)
  • Performance and integration: providing greater speed optimization and better usage of computer hardware. (Web Workers, Drag and Drop, XMLHttpRequest level 2)
  • Device access: allowing for the usage of various input and output devices. (Geolocation, Touch, Camera, etc.)
  • Styling: letting authors write more sophisticated themes. (CSS3)

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

7. Describe the difference between a cookie, sessionStorage and localStorage.

Cookies are small text files that websites put in client browser to store user data. It will be carried in the HTTP request.

localStorage and sessionStorage are designed for the same purpose of storing data in client side, but vary in the scope and duration of the data availability. localStorage is permanent, i.e. exist even close browser, while sessionStorage lasts as long as the tap is open.

All have data size limitations.

http://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies

http://diveintohtml5.info/storage.html

8. Describe the difference between <script>, <script async> and <script defer>.

<script> is the default behaviour of adding JavaScript to HTML. Parsing of HTML code pauses while the script is downloading and executing. Hence, a slowness of displaying web page may occur due to slow network or server.

<script async> is loading and executing the JS asynchronously, which doesn’t block the HTML parsing. This should only deal with external JS files.

<script defer> is to delay script execution until the HTML parser has finished. However, not every browser supports this. Think of DOM ready event JS call.

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async anddefer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. The defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.

WebKit explanation.

http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/

Script Tag breakdown

9.Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before</body>? Do you know any exceptions?

Browser renders web page from the top to bottom. Putting CSS in head will set the style first so that user won’t see HTML  elements without style. Loading JS is slow if the file is large, and usually it’s blocking the rendering process, user will feel the delay of displaying the web page.

Exception of adding JS in header, e.g. load library Modernizr.

10. What is progressive rendering?

Progressive HTML rendering is a relatively old technique that can be used to improve the performance of websites. The idea is simple: give the web browser a head start in downloading and rendering the page by flushing out early and multiple times.

Browsers have always had the helpful feature of parsing and responding to the HTML as it is being streamed down from the server (even before the response is ended). This feature allows the HTML and external resources to be downloaded earlier, and for parts of the page to be rendered earlier. As a result, both the actual load time and the perceived load time improve.

http://www.phpied.com/progressive-rendering-via-multiple-flushes/

eBay rethink progressive rendering

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