↓Skip to main content

Front End Interview Questions HTML

··5 mins

What does a doctype do? #

The doctype declares the version of html.

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

Quirks modes #

…layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5 for Windows that is required not to break existing content on the Web

Standards mode #

…behavior is (hopefully) the behavior described by the HTML and CSS specifications [1]

These modes are determined by the DOCTYPE at the top of the document.

What’s the difference between HTML and XHTML? #

HTML #

  • 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

XHTML #

  • 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. [1:1]

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

It will more than likely mess up the page for anyone still using older versions of IE.

When a browser reads XML it uses an XML parser, not an HTML parser.

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. [1:2]

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

By changing the lang attribute on the html element.

<!-- HTML -->
<html lang="en">

<!-- XHTML -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Elements can also be wrapped in a lang tag if you have more than one language on the same page.

<div lang="es">Yo no hablo español</div>
<div lang="fr">Je ne parle pas français</div>

What kind of things must you be wary of when design or developing for multilingual sites? #

Properly localizing content for different audiences based on their location, as well as allowing for a user to easily change their country/language.

What are data- attributes good for? #

Storing data in HTML for DOM parsing, or other ways of keeping track of information.

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

This question is a bit confusing, as when you say building blocks, my head goes to block elements. The HTML5 specific ones are:

  • <article>
  • <aside>
  • <audio>
  • <canvas>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <hgroup>
  • <output>
  • <section>
  • <video>

The numerous APIs and the more semantic tags, could also be said to be the building blocks.

  • Max size of 4093 bytes
  • Can set expiration date
  • Sent on every request

sessionStorage #

  • Max size of 2.5MBs+ depending on browser
  • Stored in browser and not sent with every request
  • If you close a tab using sessionStorage, open a new tab, or exit the browser - you’ll lose that specific sessionStorage data.

localStorage #

  • Max size of 2.5MBs+ depending on browser
  • Stored in browser and not sent with every request
  • Will persist if browser/tabs are closed.

Describe the difference between <script>, <script async> and <script defer> #

A regular <script> tag will block rendering of the page, and the page will not continue to load until the script finishes.

<script async> will run the script asynchronously, meaning that it will not block rendering, but will run as soon as the script is available. This is usually intended for CDN files, or other such files, which do not change the page structure.

<script defer> will defer the script to run after the page is done parsing and before an onload event.

Why is it generally a good idea to position CSS <link> between <head></head> and JS <script> 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 be 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.

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’s new features which can be used with Web Components making it more standard. Another interesting article on this is from eBay with Async Fragments.

W3: Serving HTML and XHTML ↩︎ ↩︎ ↩︎

↑