HTML Interview Questions

html5 logo

What is doctype? Why do you need it?

doctype tells the browser to parse the document as html5. Else it will guess how to parse it and can go into quirks mode.
<!DOCTYPE html>
It is the first tag of a valid html file, is not case-sensitive and doesn't need a closing tag.

What are the building blocks of HTML5/WHATWG?

  • Semantic markup (article, strong, em, mark, etc)
  • ES6/ES2015
  • Video and Audio API
  • Canvas and SVG
  • Geolocation API
  • Communication API/Websockets
  • Web Worker API
  • WebStorage API

What is semantic HTML?

Semantic HTML, or semantically-correct HTML, is HTML where the tags used to structure content are selected and applied appropriately to the meaning of the content.
Example: <b> (for bold), and <i> (for italic) should not be used, because they do not convey the meaning or structure of the content. Instead, use the replacements <strong> and <em>, which by default will turn text bold and italic, while adding meaning to the structure of the content.

What's the difference between span and div?

Div is a block element and a span is an inline element.
It is semantically incorrect to put a block element inside an inline element. So a div can have a p tag and a p tag can have a span. But a span can't have a div or p tag inside it.

What is the use of data- attribute?

Answer: data- attributes allow us to store extra information/ data in the DOM.

How can you highlight text in html?

Use the <mark> tag.

Describe the difference between a cookie, sessionStorage and localStorage.

sessionsStorage and localStorage are part of the WebStorage API, which was introduced with HTML5.
sessionStorage: stores information as long as the session goes. Usually until the user closes the tab/browser.
localStorage: stores information as long as the user does not delete them.
cookie: cookies are simply cookies, which are supported by older browsers and usually are a fallback for frameworks that use the above mentioned WebStorages.

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

<script>: browser will run your script immediately,
before rendering the elements that are below your script tag.
<script async>: browser will continue to load the HTML page and render it while the script is loaded and executed asynchronously.
<script defer>: browser will run your script when the page is finished parsing.The order of scripts is maintained in defer; no guarantees in async.

Why is it generally a good idea to position CSS <link> tags in the <head> tag and <script> tags at the end of the <body> tag?

You want content to be styled and rendered ASAP, whereas scripts can execute after everything else is rendered.

Explain the following request and response headers:

Expires: Gives the date/time after which the response is considered stale
Date: The date and time that the message was sent
Age: The age the object has been in a proxy cache in seconds
If-Modified-Since: Allows a 304 Not Modified to be returned if content is unchanged
DNT (Do Not Track): Requests a web application to disable their tracking of a user.
Cache-control: Specifies directives that must be obeyed by all caching mechanisms along the request-response chain
Transfer-Encoding: The form of encoding used to safely transfer the entity to the user.Currently defined methods are:
* chunked
* compress
* deflate
* gzip
* identity
ETag: An identifier for a specific version of a resource, often a message digest
X-Frame-Options: Clickjacking protection.
* deny - no rendering within a frame
* sameorigin - no rendering if origin mismatch
* allow-from - allow from specified location
* allowall - non-standard
* allow from any location

Show Comments