What is the DOM in HTML?
The Document Object Model (DOM) is a programming interface for HTML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects.
What are Meta Tags?
Meta tags are snippets of text that describe a page’s content; the meta tags don’t appear on the page itself, but only in the page’s source code.
Meta tags are essentially little content descriptors that help tell search engines what a web page is about.
What does a doctype do?
Document Type Declaration (doctype). It informs the web browser about the type and version of HTML used in building the web document. This helps the browser to handle and load it properly. While the HTML syntax for this statement is somewhat simple, you must note each version of HTML has its own rules.
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. This is essential in order to support websites that were built before the widespread adoption of web standards. 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’s the difference between HTML and XHTML?
XML is abbreviation for eXtensible Markup Language whereas HTML stands for Hypertext Markup Language.
XML mainly focuses on transfer of data while HTML is focused on presentation of the data.
XML is content driven whereas HTML is format driven.
XML is Case sensitive while HTML is Case insensitive.
XML provides namespaces support while HTML doesn't provide namespaces support.
XML is strict for closing tag while HTML is not strict.
XML tags are extensible whereas HTML has limited tags.
XML tags are not predefined whereas HTML has predefined tags.
Are there any problems with serving pages as application/xhtml+xml?
Unfortunately, up to and including version 8, Internet Explorer doesn't support files served as XML, although a number of other browsers do. To get around the fact that not all browsers support content served as XML, many XHTML files are actually served using the text/html MIME type.
In this case, the user agent will read the file as if it were HTML, and use the HTML parser. Since the browser considers the XML to actually be HTML, you need to take into account some of the differences between the two formats when writing your XHTML code, to ensure that the differences between XML and HTML syntax do not trip up the browser.
This includes different ways of declaring the character encoding or language declarations inside the document. Appendix C of the XHTML specification recommends a small number of compatibility guidelines when serving XHTML as HTML. These compatibility guidelines are particularly important for legacy versions of browsers.
They recommend, amongst other things, that you leave a space before the '/>' at the end of an empty tag (such as img, hr or br), that you use HTML's lang attribute as well as XML's xml:lang attribute, that you always use both id and name attributes for fragment identifiers, etc.
How do you serve a page with content in multiple languages?
Well, first, you want to make sure your page will support all the various characters of the language, so be sure to set character encoding to utf-8 at the very beginning. You also want to inform robots of the various languages in use in the doctype. Other than that, I’d say it’s implementation and domain-specific.
What kind of things must you be wary of when design or developing for multilingual sites?
First, be sure you can support all the characters of the various languages. Second, make sure your site layout can respond to differences in the amount of real estate needed for content blocks. (Ie one language may require several lines for a certain content block, while another may just require one.) Last and definitely not least, the site layout will need to for both left and right reading directions, so if you switch from English to, say, Hebrew, you may want to flip certain components to accommodate the switch in reading direction.
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 non-standard attributes, extra properties on DOM, or Node.setUserData().
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
The main building blocks are the new tags, such as Article, Header, Nav, Section, etc. Additionally, HTML5 provides the ability for accessing more advanced browser-native UI components, such as sliders and date-pickers, as well as access to improved form validation, eg having the browser check if an email address is validly formed.
Describe the difference between a cookie, sessionStorage and localStorage.
A cookie is a piece of data that has been stored in a user’s local browser, and which can be used to personalize an app or site for users’ viewing it in that browser. sessionStorage and localStorage are ways of storing data locally, one for the current session only, the other permanently (or until deleted.)
Describe the difference between <script>, <script async> and <script defer>.
I’ve never used the async or defer variants, but I’d say they allow for either loading a script concurrently, or deferring loading of a script.
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?
CSS should be loaded in the head section to so that styling can be loaded before the page body loads, else the page will appear without styling. JS should be loaded after all content has loaded, ie just before the closing body tag, so that loading of possibly large JS files does not initial page load.
What is Progressive Rendering?
This is when you initially load a lower resolution version of an image, and then progressively add resolution to the image, which prevents the user from just seeing no image until the entire image has loaded.
What is the difference between span and div?
divis a block elementspanis inline element
It’s illegal to place a block element inside an inline element, and that while div can have a p tag, and a p tag can have a span, it is not possible for span to have a div or p tag inside.
And that about sums it up! Stay tuned as I’ll be releasing more on this series in the upcoming weeks.