FrontEnd Dev - HTML Questions
What's the difference between HTML and XHTML?
- XHTML stands for EXtensible HyperText Markup Language - XHTML is almost identical to HTML - XHTML is stricter than HTML - XHTML is HTML defined as an XML application - XHTML is supported by all major browsers XML syntax rules are far more rigorous than HTML. As a result, XHTML makes authors work more precisely, having to address issues such as: all elements and attribute names must appear in lower case all attribute values must be quoted non-Empty Elements require a closing tag empty elements are terminated using a space and a trailing slash no attribute minimization is allowed in strict XHTML, all inline elements must be contained in a block element In HTML, case, quotes, termination of many elements and uncontained elements are allowed and commonplace. The margin for errors in HTML is much broader than in XHTML, where the rules are very clear. As a result, XHTML is easier to author and to maintain, since the structure is more apparent and problem syntax is easier to spot.
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
- more semantic text markup - new form elements - video and audio - new javascript API - canvas and SVG - new communication API - geolocation API - web worker API - new data storage
What kind of things must you be wary of when design or developing for multilingual sites?
-A character encoding that works for characters in all languages, not just English (This means everything down to the database should use UTF encoding) -Some way of representing the user's Locale -Always showing times in the user's time zone + showing distance measurements for the user's locale (ie: Miles versus Kilometers?) -Laying out the website in right-to-left for languages like Hebrew -Think about how to lay out your web pages when the length of text may vary wildly and never assume that a character is more-or-less a certain width (a single character in Kanji might be 8 times wider than a lower case 'i') -use the 'lang' attribute to mark the change in language. The 'lang' attribute can be used with almost every HTML element -Keep the content for each language on separate URLs. -Don't use cookies to show translated versions of the page. -Consider cross-linking each language version of a page. That way, a French user who lands on the German version of your page can get to the right language version with a single click.
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?
A <link> tag can occur only in the head element; however, there can be multiple occurrences of <link>. In just about every case, it's best to place all your script references at the end of the page, just before </body>. If you are unable to do so due to templating issues and whatnot, decorate your script tags with the defer attribute so that the browser knows to download your scripts after the HTML has been downloaded: <script src="my.js" type="text/javascript" defer="defer"></script> Edge cases There are some edge cases, however, where you may experience page flickering or other artifacts during page load which can usually be solved by simply placing your jQuery script references in the <head> tag without the defer attribute. These cases include jQuery UI and other addons such as jCarousel or Treeview which modify the DOM as part of their functionality. Further caveats There are some libraries that must be loaded before the DOM or CSS, such as polyfills. Modernizr is one such library that must be placed in the head tag.
Are there any problems with serving pages as application/xhtml+xml?
Browsers will display xml parse errors if your page contains invalid code, while in text/html they will at least display something viewable. Not compatible in every browser.
What does a doctype do?
DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.
What are data- attributes good for?
HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. 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. Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts. All such custom data are available via the HTMLElement interface of the element the attribute is set on. The HTMLElement.dataset property gives access to them.
What's the difference between standards mode and quirks mode?
In the old days of the web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites. 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.
Describe the difference between a cookie, sessionStorage and localStorage.
Sessionstorage and localstorage:-There are basically two types of Web Storage so far, and these are the localStorage, and the sessionStorage. The main difference is that the localStorage persists over different tabs or windows, and even if we close the browser, accordingly with the domain security policy and user choices about quota limit. Cookies:-An HTML 5 cookie is a cookie-like storage options available in HTML 5. It consists of browser-based local storage and session storage, which is created and accessible by the Web page itself. - HTML5 web storage = generic umbrella term for the new client-side data storage options: Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance. - Local Storage = persistant and scoped to the domain(store data with no expiration date). At the moment two flavors are usually mentioned: 'default' = stores things in name/value pairs Web SQL (aka Web Database) = uses a SQL database - Session Storage = non persistent and scoped only to the current window(stores data for one session) - Cookies = the old school way of doing all of the above. Stores name/value pairs per domain.
Describe the difference between <script>, <script async> and <script defer>.
The <script> tag is used to define a client-side script, such as a JavaScript. The <script> element either contains scripting statements, or it points to an external script file through the src attribute. If async="async": The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing) If async is not present and defer="defer": The script is executed when the page has finished parsing If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page 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.
How do you serve a page with content in multiple languages?
The first thing to get right when working with multiple languages on a website is making sure the language is identified in the code of the page.
