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