Interview Questions about HTML Job Application, Part 2

As I already mentioned in my previous post, here are the most common questions asked on an HTML Job Interview. Have a read and hit me up if you want to discuss some of them.

1. What is the importance and function of a doctype?

The doctype declaration should be the very first thing in an HTML document, before the tag. However, the doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. The doctypedeclaration refers to a Document Type Definition (DTD).

2. What’s the difference between full standards mode, almost 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.

For HTML documents, browsers use a DOCTYPE at the beginning of the document to decide whether to handle it in quirks mode or standards mode. To ensure that your page uses full standards mode, make sure that your page has a DOCTYPE.

3. What’s the difference between HTML and XHTML?

According to the W3C, “XHTML 1.0 is a reformulation of HTML 4.01 in XML, and combines the strength of HTML 4 with the power of XML.” This means that, by using XHTML, you are adding the potential of the power of XML to your Web pages.

Or, basically, XHTML is strict HTML.

HTML is an abbreviation for HyperText Markup Language. HTML was designed to display data with focus on how data looks. XML was designed to be a software and hardware independent tool used to transport and store data, with focus on what data is. XMLprovides a framework for defining markup languages.

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

In HTML5, you can tell thebrowser when to run your JavaScript code. There are 3 possibilities:

Without async or defer, the browser will run your script immediately, before rendering the elements that are below your script tag.
With async (asynchronous), the browser will continue to load the HTML page and render it while the browser load and execute the script at the same time.
With defer, the browser will run your script when the page finished parsing. (not necessary finishing downloading all image files. This is good.)

5. HTML5 Geolocation

The geolocation API allows the user to provide their location to web applications if they so desire.

6. Describe the difference between a cookie, sessionStorage and localStorage?

Cookie: stores data that has to be sent back to the server with subsequent requests.

The HTML5 web storage is used to store data on user’s browser.

The HTML5’s web storage feature lets you store some information locally on the user’s computer, similar to cookies but it is more secure and faster. The information stored in the web storage isn’t sent to the web server as opposed to the cookies where data sent to the server with every request. Also, where cookies lets you store a small amount of data (nearly 4KB), the web storage allows you to store up to 5MB of data.

There are two types of web storage, which differ in scope and lifetime:

Local storage — The local storage uses the localStorage object to store data for your entire website, permanently. That means the stored local data will be available on the next day, the next week, or the next year unless you remove it.
Session storage — The session storage uses the sessionStorage object to store data on a temporary basis, for a single-window (or tab). The data disappears when the session ends i.e. when the user closes that window (or tab).

7. What is SVG?

SVG stands for Scalable Vector Graphics.
SVG is used to define graphics for the Web.
SVG is a W3C recommendation.

SVG is a language for describing 2D graphics in XML.

Canvas draws 2D graphics, on the fly (with a JavaScript).

SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

8. What is a Web worker?

Web Workers is a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. In addition, they can perform I/O using XMLHttpRequest (although the responseXML and channel attributes are always null). Once created, a worker can send messages to the JavaScript code that created it by posting messages to an event handler specified by that code (and vice versa.) This article provides a detailed introduction to using web workers.

9. What is web socket?

WebSocket is a protocol for creating a fast two-way channel between a web browser and a server. WebSocket overcomes limitations with HTTP to allow for low latency communications between a user and a web service.

10. Are there any problems with serving pages as application/xhtml+xml?

If we Serving pages with application/xhtml+xml they can break on older version of IE.

IE < 8 will show a download dialog for the pages, instead of rendering them properly.

11. How do you serve a page with content in multiple languages?

Always use a language attribute on the html tag to declare the default language of the text in the page. When the page contains content in another language, add a language attribute to an element surrounding that content. Always use a language attribute on the html element. This is inherited by all other elements, and so will set a default language for the text in the document head element.

Note that you should use the html element rather than the body element, since the body element doesn’t cover the text inside the document’s head element.

If you have any content on the page that is in a different language from that declared in the html element, use language attributes on elements surrounding that content. This allows you to style or process it differently.

Use the lang attribute for pages served as HTML, and the xml:lang attribute for pages served as XML. For XHTML 1.x and HTML5 polyglot documents, use both together.

<span title=”Spanish”><a lang=”es” href=”qa-html-language-declarations.es”>Español</a></span>

12. What kind of things must you be aware of when designing or developing for multilingual sites?

hreflang attr in link
dir attr indicating language direction, such as rtl
<meta charset=’UTF-8′>
font-size for :lang({language_code}) selectors in CSS
difference in word length for each language

13. What are data- attributes good for?

It makes HTML elements contain extra information without using non-standard attributes, or other hacks like that.

Example: I have used them for storing tooltip information and showing them with CSS.

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

Semantics: allowing you to describe more precisely what your content is.
Connectivity: allowing you to communicate with the server in new and innovative ways.
Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently.
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.
Performance and integration: providing greater speed optimization and better usage of computer hardware.
Device access: allowing for the usage of various input and output devices.
Styling: letting authors write more sophisticated themes.

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

You usually put the <link> tags in between the <head> to prevent Flash of Unstyled Content which gives the user something to look at while the rest of the page is being parsed.

Since Javascript blocks rendering by default, and the DOM and CSSOM construction can also be delayed, it is usually best to keep scripts at the bottom of the page.

Exceptions are if you grab the scripts asynchronously, or at least defer them to the end of the page.

16. What is progressive rendering?

With HTML progressive rendering is chunking the HTML into separate bits and loading each block as it’s finished. Usually, the backend code loads the HTML at once, but if you flush after finishing one part of the structure, it can be rendered immediately to the page.

This can be done asynchronously with different components being loaded as they finish. There are new features which can be used with Web Components making it more standard. Another interesting article on this is from eBay with Async Fragments.

17. Have you used different HTML templating languages before?

Mustache, Handlebars, Underscores, Jade.

18. Explain the layout of HTML?

HTML layout specifies a way in which the web page is arranged.

Every website has a specific layout to display content in a specific manner.

Following are different HTML5 elements which are used to define the different parts of a webpage.

<header>: It is used to define a header for a document or a section.
<nav>: It is used to define a container for navigation links
<section>: It is used to define a section in a document
<article>: It is used to define an independent, self-contained article
<aside>: It is used to define content aside from the content (like a sidebar)
<footer>: It is used to define a footer for a document or a section

19. Is audio tag supported in HTML5?

Yes. It is used to add sound or music files on the web page. There are three supported file formats for HTML 5 audio tag.

Let’s see the code to play mp3 file using HTML audio tag.

<audio controls>
<source src=”sample.mp3″ type=”audio/mpeg”>
Your browser does not support the html audio tag.
</audio>

Instead of sample.mp3, you can pass any mp3 file name.

20. What’s the difference between a block-level element and an inline element?

Each element in HTML is displayed in one of a few ways. By default, most tags are either displayed as block-level or inline. This value can be overridden using CSS.

Block

As the name suggests, a block-level element is drawn as a block that stretches to fill the full width available to it (the width of its container) and will always start on a new line.

Examples of elements that are block-level by default: <div>, <img>, <section>, <form>, <nav>.

Inline

Unlike the block-level elements, inline elements are drawn where they are defined and only take up space that is absolutely needed. The easiest way to understand how they work is to look at how text flows on a page. When a line of text gets to the end of the space available, it wraps onto the next line and happily keeps going. If you were to tack more text onto an existing line of text, it will stay on the same line, as if it was all part of the same text to begin with.

Examples of elements that are inline by default: <span>, <b>, <strong>, <a>, <input>.

This is the end of Part 2, HTML Job Interview Questions.

Now, over to the 3rd part — CSS Job Interview Questions.

This article is brought to you by

The Web Developer That Your Brand Needs

Check my work