html5 - codevik · 2019-04-28 · html5 what is doctype? why we need it? doctype is an instruction...
TRANSCRIPT
HTML5
What is doctype? Why we need it? ● Doctype is an instruction to the browser to inform about the version of html
document and how browser should render it. ● It ensures how element should be displayed on the page by most of the browser.
And it also makes browser's life easier. otherwise, browser will guess and will go to quirks mode. Moreover, doctype is required to validate markup. <!DOCTYPE html> <meta charset="UTF-8">
What were some of the key goals and motivations for the HTML5 specification? HTML5 was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2. Major goals of the HTML specification were to: ● Deliver rich content (graphics, movies, etc.) without the need for additional plugins
(e.g., Flash). ● Provide better semantic support for web page structure through the introduction of
new structural element tags. ● Provide a stricter parsing standard to simplify error handling, ensure more consistent
cross-browser behavior, and simplify backward compatibility with documents written to older standards.
● Provide better cross-platform support (i.e., to work well whether running on a PC, Tablet, or Smartphone).
What is HTML5? ● HTML5 is the latest version of HTML and XHTML with new features like Drawing,
Animation, Video and Audio etc. ● It is used to solve some common structural problems encountered with HTML 4.1. ● It gives more flexibility to both the web developers, the web designers and enables
more exciting and interactive websites in addition to more powerful and efficient applications.
● The HTML 5 <! doctype html> is recognized by all modern browsers. Why do we use HTML5? ● The main benefit of HTML5 is that it supports Drawing, Animation, Video and Audio. ● The web developers can decrease the complexity and the time to create applications
with animations, play audio and video, high quality drawings and other rich content using HTML5 because it can embed video on the web-pages without using any special software like Flash.
● HTML5 is far easier for the web designers and the web developers as it tells them how a web page is structured.
What are some of the key new features in HTML5?
- Key new features of HTML5 include: ● Improved support for embedding graphics, audio, and video content via the new
<canvas>, <audio>, and <video> tags. ● Extensions to the JavaScript API such as geolocation and drag-and-drop as well for
storage and caching. ● Introduction of “web workers”. ● Several new semantic tags were also added to complement the structural logic of
modern web applications. These include the <main>, <nav>, <article>, <section>, <header>, <footer>, and <aside> tags.
● New form controls, such as <calendar>, <date>, <time>, <email>, <url>, and <search>.
What is DataList Tag in HTML? ● A <datalist> tag can be used to create a simple auto-complete feature for a
webpage.<datalist> is a newly defined HTML tag that comes with the HTML 5 specification. By using this <datalist> tag, we can define a list of data and then we can bind it with an <input> tag.
● A <datalist> tag specifies a list of predefined options for an <input> element. After binding it, the user will see a drop down list in which all the predefined options will be there for the input. When the user types a character or a string, the user will automatically get the data which depends on the input string or a character.
● The main feature of this <datalist> tag is to auto-complete the <input> element.
Describe Form Input Types in HTML5? HTML5 is the new standard for HTML that has 13 new input types for forms. Using these new input types, we can create more interactive and easy-to-use web forms. It also provides better data validation, input control, color picker controls and many others. The new input types are:
Time Date Datetime Datetime-local Week Month Email Color Number Range Search Telephone URL
● What is the use of Drag and Drop in HTML5?
● Drag and drop is a very common feature and convenient to users. Simply, you need to grab an object and put it at the place you want.
● This feature is commonly used by many of the online examination websites wherein you have the options to pick up the correct answer, drag it to the answers placeholder and drop it.
● The Drag and Drop API comes with seven new events to track a drag and drop. ● The events are dragstart, drag, dragend, dragenter, dragleave, dragover and drop that
are triggered during the various stages of the drag and drop operation. ● These events are listed below:
What are “web workers”? Web workers at long last bring multi-threading to JavaScript.
A web worker is a script that runs in the background (i.e., in another thread) without the
page needing to wait for it to complete. The user can continue to interact with the page
while the web worker runs in the background. Workers utilize thread-like message
passing to achieve parallelism.
How do you indicate the character set being used by an HTML5 document? How does this differ from older HTML standards? In HTML5, the encoding used can be indicated with the charset attribute of a <meta> tag inside the document’s <head> element:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ... </head> ... </html>
This is a slightly simpler syntax from older HTML standards, which did not have the charset attribute. For example, an HTML 4.01 document would use the <meta> tag as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> ... <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ... </head> ... </html> Discuss the differences between an HTML specification and a browser’s implementation thereof. HTML specifications such as HTML5 define a set of rules that a document must adhere to in order to be “valid” according to that specification. In addition, a specification provides instructions on how a browser must interpret and render such a document.
A browser is said to “support” a specification if it handles valid documents according to the rules of the specification. As of yet, no browser supports all aspects of the HTML5 specification (although all of the major browser support most of it), and as a result, it is necessary for the developer to confirm whether the aspect they are making use of will be supported by all of the browsers on which they hope to display their content. This is why cross-browser support continues to be a headache for developers, despite the improved specifications.
In addition, while HTML5 defines some rules to follow for an invalid HTML5 document (i.e., one that contains syntactical errors), invalid documents may contain anything, and it is impossible for the specification to handle all possibilities comprehensively. Thus, many decisions about how to handle malformed documents are left up to the browser. Briefly describe the correct usage of the following HTML5 semantic elements: <header>, <article>, <section>, <footer>. ● The <header> element is used to contain introductory and navigational information
about a section of the page. This can include the section heading, the author’s name, time and date of publication, table of contents, or other navigational information.
● The <article> element is meant to house a self-contained composition that can logically be independently recreated outside of the page without losing it’s meaning. Individual blog posts or news stories are good examples.
● The <section> element is a flexible container for holding content that shares a common informational theme or purpose.
● The <footer> element is used to hold information that should appear at the end of a section of content and contain additional information about the section. Author’s name, copyright information, and related links are typical examples of such content.
Can a <section> contain <article> elements? Can an <article> contain <section>elements? Provide usage examples. The answer to both questions is yes; i.e., a <section> can contain <article> elements, and an <article> can contain <section>elements.
For example, a personal dashboard page might contain a <section> for social network interactions as well as a <section> for the latest news articles, the latter of which could contain several <article> elements.
Conversely, an <article> might contain a <section> at the end for reader comments. Can a web page contain multiple <header> elements? What about <footer> elements? Yes to both. In fact, both the <header> and <footer> tags are designed to serve their respective purposes in relation to whatever their parent “section” may be. So not only can the page <body> contain a header and a footer, but so can every <article> and <section> element. In fact, a <header> should be present for all of these, although a <footer> is not always necessary. Describe the relationship between the <header> and <h1> tags in HTML5. In previous specifications of HTML, only one <h1> element was typically present on a page, used for the heading of the entire page. HTML5 specifies that <h1> represents the top-level heading of a “section”, whether that be the page <body>, or an <article> or <section> element. In fact, every <header> element should at least contain an <h1> element. If there is no natural heading for the section, it is a good indication it should not use an <article> or <section> tag. What is HTML5 Web Storage? Explain localStorage and sessionStorage. With HTML5, web pages can store data locally within the user’s browser.
Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for.
The data is stored in name/value pairs, and a web page can only access data stored by itself. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
The difference between localStorage and sessionStorage involves the lifetime and scope of the storage.
● Data stored through localStorage is permanent: it does not expire and remains stored on the user’s computer until a web app deletes it or the user asks the browser to delete it.
● SessionStorage has the same lifetime as the top-level window or browser tab in which the script that stored it is running. When the window or tab is permanently closed, any data stored through sessionStorage is deleted.
Both forms of storage are scoped to the document origin so that documents with different origins will never share the stored objects. But sessionStorage is also scoped on a per-window basis. If a user has two browser tabs displaying documents from the same origin, those two tabs have separate sessionStorage data: the scripts running in one tab cannot read or overwrite the data written by scripts in the other tab, even if both tabs are visiting exactly the same page and are running exactly the same scripts.
Strengths
● Apps can work both online and offline. ● API is easy to learn and use. ● Has the ability to hook in to the browser events such as offline, online and storage
change. ● Has less overhead than cookies; no extra header data is sent with the browser
requests. ● Provides more space than what cookies offer so increasingly complex information
can be kept.
Weaknesses
● Data is stored as a simple string; manipulation is needed to store objects of different types such as Booleans, Objects, Ints and Floats.
● It has a default 5MB limit; more storage can be allowed by the user, if required. ● It can be disabled by the user or systems administrator. ● Storage can be slow with the complex sets of data.
HTML5 Web Storage Methods
● setItem(key,value): Adds a key/value pair to the sessionStorage object. ● getItem(key): Retrieves the value for a given key. ● clear(): Removes all key/value pairs for the sessionStorage object. ● removeItem(key): Removes a key/value pair from the sessionStorage object. ● key(n): Retrieves the value for a key.
What is the difference between span and div? The difference is that span gives the output with display: inline and div gives the output with display: block. Span is used when we need our elements to be shown in a line, one after the other.
What is the Geolocation API in HTML5? ● HTML5’s Geolocation API lets users share their physical location with chosen web
sites. JavaScript can capture a user’s latitude and longitude and can send it to the back-end web server to enable location-aware features like finding local businesses or showing their location on a map.
● Today, most browsers and mobile devices support the Geolocation API. The Geolocation API works with a new property of the global navigator object.
● A Geolocation object can be created as follows:var geolocation = navigator.geolocation; The geolocation object is a service object that allows widgets to retrieve information about the geographic location of the user’s device.
What’s the difference between the <svg> and <canvas> elements? ● The <svg> element is a container for SVG graphics. SVG has several methods for
drawing paths, boxes, circles, text, and even bitmap images. ● SVG is a language for describing 2D graphics, but <canvas> allows you to draw 2D
graphics on the fly using 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.
Question 8: What is Audio Tag in HTML 5?
This new element allows you to deliver audio files directly through the browser, without the need for any plug-ins. The Audio tag is a new tag introduced in HTML5. You can use it to play audio sound like .mp3, wav, and .ogg. I have used five types of sound formats to show which formats are compatible for the browsers. A WAV file is a common sound format that is supported by most browser versions. What is a Video Tag in HTML 5?
One of the exciting features of HTML5 is <video>tag.Video Tag was introduced in HTML5. Video tag is used to add video or media files in the HTML document. It is not present in HTML 4.01. Before this, it was not possible to show a video/movie on the Web Page.For example, you can embed music video or a movie on your web page for the visitor to listen and watch it.
HTML5 video tag accepts the attribute that specifies how the video should be played. You can write content in <video> tag. as <video> tag always occur in pair. Any content between opening and closing tag is "fallback content". This content is displayed only by those browsers that does not support video tag. Now, most of the video files are shown by plug-in.
What are the media elements in HTML 5?
The following are the 5 most popular media elements.
Audio
● Audio element is used to define or create a music element in your simple HTML page.
● It supports all the browsers like Internet Explorer 9.0 and above, Chrome, Opera, Firefox and Safari.
● This tag defines music or any other audio stream formats.
Video
The Video element creates a video element in your HTML page. It supports all the browsers like Internet Explorer 9.0 and above, Chrome, Opera, Firefox and Safari. This tag defines music or any other video stream formats.
Track
This element is useful in both the previous elements i.e AUDIO and VIDEO. This element helps to define tracks or we can say simple sectors for the <audio> and <video> elements.
Source
Like the track element, the Source element must be used in <audio> and <video> elements to do the control property and structure of the tracks.
Embed
It is also called a container because as the name suggests, it is used for defining the containers for the external applications or we can say plug-ins for the Applications.
What is the use of Canvas element in HTML5?
The canvas element is used to draw graphics by making use of JavaScript. It is defined with the <canvas> tag. We write the following code.
This tag is nothing but a container for graphics. We need to use a script to provide the structure or shapes of the graphics.
● We can have multiple Canvas elements in one HTML page. ● The real power of the Canvas element is the scripting for which use JavaScript. ● For the complete functionality of the HTML5 Canvas tag, we require an API which
is made by writing JavaScript code that provides access to Canvas element functionality.
What are the features of HTML5 Canvas?
● Flexibility ● Interactivity ● Multimedia Options ● Animation ● Platform Support ● Free and Accessible Dev Tools ● Code Once, Run Everywhere ●
What is the use of Fieldset tag in HTML5? ● The <fieldset> tag groups related form elements. It is like a box. In other words, it
draws a box around related elements. ● It must start with a <legend>tag because the <legend> tag defines the title of the
field set. ● By using the <fieldset>tag and the <legend> tag, you can make your form much
easier to understand for the users.
What are the HTML tags which deprecate in HTML5?
● One of the main points on which HTML5 wins over XHTML2.0 is “backward compatibility”. XHTML2.0 sought to enforce well-written code by using very harsh error handling. If a page returns error based on syntax, the user agent will stop parsing the code.
● An HTML5 specification states that certain HTML tags should not be used but it is only a guideline to the HTML authors. The implementations, however, must support these tags to be backward compatible.
The tags that are deprecated are the following:
● <basefont> ● <big> ● <center> ● <font> ● <s>
● <tt> ● <u> ● <frame> ● <frameset> ● <noframe>
● <acronym> ● <applet> ● <isindex> ● <dir> ● <strike>
What are the new APIs provided by the HTML 5 standard? In HTML5 you can use many APIs. Some of them are:
● Web Workers API ● Server-sent Events API ● WebSocket API ● Cross-document Messaging API ● Drawing ● Audio/Video ● Drag and drop ● Autofocus ● Editable ● Client-side storage ● Geolocation
What is Application Cache in HTML5?
Yet HTML5 has many new special elements and attributes but one of the best feature of HTML5 is "Application Cache", that enables us to make a offline session of a web application. It allows to fetch few or all the content of a website such as HTML files, Images, JavaScript, CSS ...etc. This features speeds up the site performance. This is achieved with the help of a file, defined as follows: What is a meter tag? What is the difference between progress tag and a meter tag?
The meter tag is used to represent a scalar measurement within a known range. The value can be fractional.
Difference between progress tag and meter tag
A progress tag represents the completion progress of a task whereas the meter tag is used to represent gauges. We can think that a progress tag represents a dynamic data whereas a meter tag represents a static data.
Note: 1. According to the W3C, the meter tag should not be used to indicate progress as to
indicate the progress, we have the progress tag. 2. The meter tag also does not represent a scalar value of an arbitrary range; for
example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value.
Why do we need HTML 5 Server-Sent Events?
Server-Sent Events (SSE) is a recent HTML5 specification in combination with the EventSource API designed for streaming updates. Prior to that, you might be familiar with the bidirectional communication channel, known as WebSockets, used very much
and tons of server implementations are available on the internet. However, the second server-push technology of HTML5 yet stays in the shadows.
To enable efficient server-to-client streaming of event data as it is basically text-based. For example: real-time notifications or updates, like Facebook, Twitter, stock exchange updates and and so on are generated on the server. Basically, we have the following two types of components that SSE introduces:
● EventSource Interface ● Event Stream
The EventSource Interface allows the client to receive push notifications from the server as DOM events and the "Event Stream" data format is used to deliver the individual updates.
SSE flow chart
In the following figure, you will see how SSE works after the client/server is connected.
What is the use of cite tag in HTML5?
The <cite> tag indicates a citation. It represents the title of a work (e.g. a book, paper, essay, poem, score, song, script, film, TV show, game, painting, sculpture , play , exhibition , etc.). The <cite> tag is an inline tag that indicates "defining a citation". The text within the <cite> tag is shown in Italics. The cite tag must have a start and end tag. In this tag the "title" attribute defines the title of the Text within the <cite></cite> tags. In HTML5 , the <cite> tag defines the cited title of a work whereas HTML 4.01 implied that the <cite> tag can be used to indicate the name of a person.
What are Waves in HTML?
A sine wave is a mathematical function that is repeats at a regular interval of time. The function is used in many fields including mathematics, physics, and engineering. We can also say that a sine wave is a smooth wave.
It has the following properties:
1. The sine wave is blue whenever the value is positive. 2. The sine wave is red whenever the value is red. 3. The thickness of the line is directly proportional to the absolute value of the
magnitude of the wave. For example, where the sine value reaches 0, the wave is absent.
On the X-axis, we will map the angle Theta. Theta will vary from 0 degree to 1040 degrees.
On the Y-axis, we will map the sin (Theta). For this, we will use the Math function Math.sin. The Math.sin function takes angles in radians. So the angle is first multiplied by PI / 180.
What is Web SQL Database in HTML 5?
Web SQL is a very interesting feature, even though it isn't part of the HTML 5 specification but it is a separate specification and it can still help to develop Web Applications. Web SQL is used to manipulate a client-side database. Since I am saying that it is good to use, there is a disclaimer for its use; it is risky because it stores data at the client side, not on the server side. So always remember, don't store information sensitive to the server inside it.
What is HTML5 Contenteditable Attribute?
One of the new features in HTML 5 is the contenteditable attribute. In HTML 5, any element can be editable. By using some JavaScript event handler, you can transform your web page into a fast rich text-box. This feature is mainly applied in Content Management Systems. By using this, you can edit content directly from the browser.
The contenteditable attribute is an enumerated attribute whose keywords are the empty string, true and false. The empty string and the true keyword equates to the true state. The false keyword implies the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).
States of content editable attribute
According to WHATWG.org, there are the following 3 states of the contenteditable attribute:
State Description How to write?
true Indicates that element is editable contenteditable=" " / contenteditable="true"
false Indicates that element is not editable contenteditable="false"
inherit Indicates that the element will be editable if and only if, its immediate parent element is editable
contenteditable="inherit"
What is Vibration API in HTML5?
Vibration is a simple, a nice way of alert when you get a new message or a phone call. It is especially useful when you are in a noisy environment or the place where you feel the ringing would be a distraction to others.
What is the Battery Status API in HTML5?
● When a users downloads an application for their devices, they are more conscious of the battery usage of the application. So as a mobile application developer, you should consider the battery usage of your Application.
● If you are developing a Web Application for a mobile device then your choice is to use HTML5’s Battery Status API, if you are concerned about the user’s device battery status/charging levels. Yes, HTML5 provides an API for a device's battery.
● W3.org says: “The Battery Status API specification defines a means for the web developers to programatically to determine the battery status of the hosting device”.
What is Flexbox in HTML 5?
The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes
Flexbox is not a single property but a set of properties on the parent element and their children. Basically the parent is a container. It is probably a div called a flex container and the children are the elements called flex items.
The preceding picture shows the Flexible Box Module. Let us discuss the attributes of the flexible box.
● Main axis: The main axis is the default flow direction for the flex items. ● Main-start and Main-end: The main-start and main-end are the starting point and
ending point for the flex items to flow in the flex container. ● Cross axis: The cross axis is perpendicular to the main axis. ● Cross-start and Cross-end: The flex items are placed from the start at the
cross-start point and ends at cross-end point. ● Main size: The flex items width or height in the main dimension is the main size of
the flexbox. ● Cross size: The flex items width or height in the cross dimension is the cross size
of the flexbox.
Discuss keyboard shortcut in HTML 5?
For Displaying the Keyboard text, we can also create the keyboard shortcut to perform various operations such as clicking a link or a button. We can use the accesskey attribute when defining the element to provide the keyboard shortcut to that element or control.
Why to use IndexedDB instead of Web SQL in HTML 5?
This IndexedDB has been introduced with HTML5. This allows a user to store large amount of data in the browser. It has been proved that IndexedDB is more powerful and efficient than other storage mechanisms like Local Storage and Session Storage. IndexedDB is an API which helps the developers to do some database operations in the client side like creating a database, opening the transaction, creating tables, inserting values to the tables, deleting the values, and reading the data. If you need any other way to save some data in the client side, you can use storage mechanisms introduced in HTML5.
How you can Use Modernizr in HTML 5? Modernizr is an open source JavaScript library that helps to detect features of
HTML5 and CSS3. The good thing about the Modernizr JS is that we can download this depending on the requirements. In other words, if an application needs to check for only few features of HTML5 and CSS3 then select those features and download the file. That JavaScript file will contain only the source code for the selected features.
What is the use of WebSocket API?
WebSockets provide a rich protocol to perform bi-directional communication and we can create a full-duplex communication channel that can be operated through a single socket over the Web and for that reason its more attractive for the things like games, messaging apps and for real-time updates in both directions.
WebSocket is basically used to reduce the overhead of HTTP, since it has its own protocol defined by IETF and an API for the server communication. By using them, the client notifies the WebSocket server with the recipients ID of an event and the server immediately notifies all the active clients and the last clients processes the event when the given recipient ID matches the client ID.
Key Features of WebSocket
● WebSocket is a rich protocol to perform bi-directional communication. ● It’s a full-duplex communication channel that can operate through a single socket
over the Web. Your request reuses the same connection from the client to the server and the server to the client.
● It makes a single request and the single request greatly reduces the latency over polling.
● Communication becomes more efficient since bandwidth, CPU power and latency is saved.
● You can build other standard protocols on top of its protocol. ● WebSocket is a feature that makes HTML5 more advanced. ● WebSocket is about simplicity.
How do you ensure that your website design or web application is accessible and user-friendly? Front end developers need a strong grasp of usability and accessibility when they're designing experiences for end-users. This question gives you insight into their knowledge of these standards and best practices. What to look for in an answer:
● First-hand experience implementing usability and accessibility standards ● A drive to create a web experience that's accessible to all end users ● Ways that the applicant has implemented usability and accessibility in their
previous projects ● Mobile compatibility ● Accessible to all ● Well planned information architecture ● Well formatted content which is easy to scan ● Fast load times ● Browser consistency ● Effective navigation ● Good error handling ● Contrasting colour scheme
● Valid markup and clean code ● Usable forms.
https://googleweblight.com/i?u=https://www.socialmediatoday.com/content/web-design-11-characteristics-user-friendly-website&hl=en-IN
What's the difference between standards mode and quirks mode?
They are modes used by browser rendering engines. In the standards mode, the engine will render a page as HTML and CSS specifications specify. The quirks mode is to render legacy pages written before these standards are fixed. The legacy pages contain non-standard behaviours emulated in old browsers such as Internet Explorer 5 or Navigator 4.
We can enforce browsers to use standards mode with a <!DOCTYPE html> tag.
Are there any problems with serving pages as application/xhtml+xml?
IE < 8 will show a download dialog for the pages, instead of rendering them properly.
How do you serve a page with content in multiple languages?
Use lang (or xml:lang for XHTML) in tags. Also metadata and Content-Language HTTP header can be used.
What kind of things must you be wary of when design 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 langth for each language
What are data- attributes good for?
It makes HTML elements contain extra information without using non-standard attributes, or other hacks like that.
Describe the difference between <script>, <script async> and <script defer>.
● <script> stops rendering process, and download and run a script.
● <script async> don't stop rendering process while asynchronously downloading a script. When finishing download, it stops rendering and runs the script.
● <script defer> don't stop rendering process while asynchronously downloading a script. When finishing rendering, it runs the 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?
● While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
● Front-end engineers that care about performance want a page to load progressively; that is, we want the browser to display whatever content it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections. The importance of giving users visual feedback, such as progress indicators, has been well researched and documented. In our case the HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.
● The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.
What is progressive rendering?
When a HTTP response is flushed multiple times, a browser doesn't wait until the whole content is loaded and renders each part earlier.
Have you used different HTML templating languages before?
Yes. Jinja2 and Django template language in Python. Jade and EJS in JavaScript. Some more in other languages.
Why web sql is deprecated? Web SQL was deprecated because standards are really important and turning Web SQL into a proper standard would have been prohibitively difficult. Since existing implementations of Web SQL are basically wrappers around SQLite, any attempt to define a standard of it was basically "do what SQLite does." This isn't good enough; a true standard needs to be self-contained, to define the interface and corner cases and exceptions itself instead of pointing to an existing implementation (especially
a third-party implementation like SQLite). Otherwise, you run the risk of taking one particular implementation's quirks and enshrining them as the standard. From what I've read, the W3C prefers multiple independent implementations of proposed standards to help ensure that this happens; since Web SQL was so tied to SQLite, that just wasn't going to happen. Mozilla's blog gives more details on their reasoning in particular for not supporting Web SQL; apparently they were one of the major voices in getting Web SQL deprecated. Should you go with Web SQL now? I don't expect the vendors that currently support it (like Google and Apple) to drop it any time soon, but IE and Firefox won't be adding it, and since it's deprecated, why invest in it? (For example, Ido Green, with Google Developer Relations, doesn't recommend using it.) https://softwareengineering.stackexchange.com/questions/220254/why-is-web-sql-database-deprecated Difference between WebSQL localstorage and Indexed db? WebSQL is deprecated. See here. Indexed DB is persistent. localStorage is also persistent (not to be confused with sessionStorage). Why WebSQL and Indexed db when we have Local Storage? The user could wipe his/her local data at any time, and any type of local storage is subject to user preferences and to be considered extremely volatile. However, there is no defined expiration time, according to Web Storage specifications: Expiring stored data User agents may, if so configured by the user, automatically delete stored data after a period of time. For example, a user agent could be configured to treat third-party local storage areas as session-only storage, deleting the data once the user had closed all the browsing contexts that could access it. This can restrict the ability of a site to track a user, as the site would then only be able to track the user across multiple sessions when he authenticates with the site itself (e.g. by making a purchase or logging in to a service).
However, this also reduces the usefulness of the API as a long-term storage mechanism. It can also put the user's data at risk, if the user does not fully understand the implications of data expiration. https://stackoverflow.com/questions/8564114/html-5-storage-websql-and-localstorage-for-how-long-data-is-stored References
https://github.com/utatti/Front-end-Developer-Interview-Questions-And-Answers/tree/master/answers
https://github.com/h5bp/Front-end-Developer-Interview-Questions http://thatjsdude.com/interview/html.html https://www.frontendhandbook.com/practice/interview-q.html https://www.c-sharpcorner.com/article/top-50-html-5-interview-questions-and-answers/ https://career.guru99.com/top-50-html-interview-questions/ https://www.codeproject.com/Articles/702051/important-HTML-Interview-questions-with-answe https://googleweblight.com/i?u=https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties&hl=en-IN