You can check all 54 HTML5 tech interview questions here 👉 https://devinterview.io/dev/html5-interview-questions
Write a HTML table tag sequence that outputs the following:
50 pcs 100 500
10 pcs 5 50Answer:
<table>
<tr>
<td>50 pcs</td>
<td>100</td>
<td>500</td>
</tr>
<tr>
<td>10 pcs</td>
<td>5</td>
<td>50</td>
</tr>
</table>An iframe is an HTML document which can be embedded inside another HTML page.
Example:
<iframe src="https://github.com" height="300px" width="300px"></iframe>- Meta tags always go inside head tag of the HTML page
- Meta tags is always passed as name/value pairs
- Meta tags are not displayed on the page but intended for the browser
- Meta tags can contain information about character encoding, description, title of the document etc,
Example:
<!DOCTYPE html> <html> <head> <meta name="description" content="I am a web page with description"> <title>Home Page</title> </head> <body>
</body> </html>
The alt attribute provides alternative information for an image if a user cannot view it. The alt attribute should be used to describe any images except those which only serve a decorative purposes, in which case it should be left empty.
divis a block elementspanis inline element
For bonus points, you could point out that it’s illegal to place a block element inside an inline element, and that while div can have a p tag, and a p tag can have a span, it is not possible for span to have a div or p tag inside.
If you are working with an HTML5 page, the <mark> tag can be a quick and easy way of highlighting or marking text on a page:
<mark>highlighted text</mark>To highlight text with just HTML code and support for all browsers, set the background-color style, as shown in the example below, using the HTML tag.
<span style="background-color: #FFFF00">Yellow text.</span>HTML5 was designed to replace HTML 4, XHTML, and the HTML DOM Level 2. The key goals and motivations behind the HTML5 specification were to:
- Deliver rich content (graphics, movies, etc.) without the need for additional plugins, such as Flash.
- Provide better semantic support for web page structure through new structural element tags.
- Provide a stricter parsing standard to simplify error handling, ensure more consistent cross-browser behaviour, and simplify compatibility with documents written to older standards.
- Provide better cross-platform support whether running on a PC, Tablet, or Smartphone.
To display an HTML page correctly, a web browser must know which character set (character encoding) to use. This is specified in the tag:
HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">HTML5:
<meta charset="UTF-8">In HTML5 it is not strictly necessary to close certain HTML tags. The tags that aren’t required to have specific closing tags are called “self closing” tags.
An example of a self closing tag is something like a line break (<br />) or the meta tag (<meta>). This means that the following are both acceptable:
<meta charset="UTF-8">
...
<meta charset="UTF-8" />It is possible to get indexed better by placing the following two statements in the <HEAD> part of your documents:
<META NAME="keywords" CONTENT="keyword keyword keyword keyword">
<META NAME="description" CONTENT="description of your site">Both may contain up to 1022 characters. If a keyword is used more than 7 times, the keywords tag will be ignored altogether. Also, you cannot put markup (other than entities) in the description or keywords list.
<header>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.<article>is meant to house a self-contained composition that can logically be independently recreated outside of the page without losing it’s meaining. Individual blog posts or news stories are good examples.<section>is a flexible container for holding content that shares a common informational theme or purpose.<footer>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.
Attributes are defined on the HTML markup but properties are defined on the DOM. To illustrate the difference, imagine we have this text field in our HTML: <input type="text" value="Hello">.
const input = document.querySelector('input');
console.log(input.getAttribute('value')); // Hello
console.log(input.value); // HelloBut after you change the value of the text field by adding "World!" to it, this becomes:
console.log(input.getAttribute('value')); // Hello
console.log(input.value); // Hello World!The HTML <small> element makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size. In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.
Consider:
<img src="image.jpg" alt="London by night">
<small>The copyright of this image is owned by Aurelio De Rosa</small>The question is a little vague, I will assume that it is asking about the most common case, which is how to serve a page with content available in multiple languages, but the content within the page should be displayed only in one consistent language.
When an HTTP request is made to a server, the requesting user agent usually sends information about language preferences, such as in the Accept-Language header. The server can then use this information to return a version of the document in the appropriate language if such an alternative is available. The returned HTML document should also declare the lang attribute in the <html> tag, such as <html lang="en">...</html>.
In the back end, the HTML markup will contain i18n placeholders and content for the specific language stored in YML or JSON formats. The server then dynamically generates the HTML page with content in that particular language, usually with the help of a back end framework.
HTML 5 adds a lot of new features to the HTML specification
New Doctype
Still using that pesky, impossible-to-memorize XHTML doctype?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">If so, why? Switch to the new HTML5 doctype. You'll live longer -- as Douglas Quaid might say.
<!DOCTYPE html>New Structure
<section>- to define sections of pages<header>- defines the header of a page<footer>- defines the footer of a page<nav>- defines the navigation on a page<article>- defines the article or primary content on a page<aside>- defines extra content like a sidebar on a page<figure>- defines images that annotate an article
New Inline Elements
These inline elements define some basic concepts and keep them semantically marked up, mostly to do with time:
<mark>- to indicate content that is marked in some fashion<time>- to indicate content that is a time or date<meter>- to indicate content that is a fraction of a known range - such as disk usage<progress>- to indicate the progress of a task towards completion
New Form Types
<input type="datetime"><input type="datetime-local"><input type="date"><input type="month"><input type="week"><input type="time"><input type="number"><input type="range"><input type="email"><input type="url">
New Elements
There are a few exciting new elements in HTML 5:
<canvas>- an element to give you a drawing space in JavaScript on your Web pages. It can let you add images or graphs to tool tips or just create dynamic graphs on your Web pages, built on the fly.<video>- add video to your Web pages with this simple tag.<audio>- add sound to your Web pages with this simple tag.
No More Types for Scripts and Links
You possibly still add the type attribute to your link and script tags.
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>This is no longer necessary. It's implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>Make your content editable
The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>Attributes
requireto mention the form field is requiredautofocusputs the cursor on the input field
<section>means that the content inside is grouped (i.e. relates to a single theme), and should appear as an entry in an outline of the page.<div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.
The rel="noopener" is an attribute used in <a> elements (hyperlinks). It prevents pages from having a window.opener property, which would otherwise point to the page from where the link was opened and would allow the page opened from the hyperlink to manipulate the page where the hyperlink is.
Yes to both. The W3 documents state that the tags represent the header(<header>) and footer(<footer>) areas of their nearest ancestor "section". So not only can the page <body> contain a header and a footer, but so can every <article> and <section> element.
- WebSQL is database API for client (browser) database using SQL.
- Similar to SQL, API are pretty simple.
- Not all the browser supports WebSQL.
- As of now WebSQL is deprecated.
The DOM (Document Object Model) is a cross-platform API that treats HTML and XML documents as a tree structure consisting of nodes. These nodes (such as elements and text nodes) are objects that can be programmatically manipulated and any visible changes made to them are reflected live in the document. In a browser, this API is available to JavaScript where DOM nodes can be manipulated to change their styles, contents, placement in the document, or interacted with through event listeners.
- The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API.
- The DOM is constructed progressively in the browser as a page loads, which is why scripts are often placed at the bottom of a page, in the
<head>with adeferattribute, or inside aDOMContentLoadedevent listener. Scripts that manipulate DOM nodes should be run after the DOM has been constructed to avoid errors. document.getElementById()anddocument.querySelector()are common functions for selecting DOM nodes.- Setting the
innerHTMLproperty to a new value runs the string through the HTML parser, offering an easy way to append dynamic HTML content to a node.
With HTML5, web pages can store data locally within the user’s browser. The data is stored in name/value pairs, and a web page can only access data stored by itself.
Differences between localStorage and sessionStorage regarding lifetime:
- Data stored through
localStorageis 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. sessionStoragehas the same lifetime as the top-level window or browser tab in which the data got stored. When the tab is permanently closed, any data stored throughsessionStorageis deleted.
Differences between localStorage and sessionStorage regarding storage scope:
Both forms of storage are scoped to the document origin so that documents with different origins will never share the stored objects.
sessionStorageis also scoped on a per-window basis. Two browser tabs with documents from the same origin have separatesessionStoragedata.- Unlike in
localStorage, the same scripts from the same origin can't access each other'ssessionStoragewhen opened in different tabs.
Before JavaScript frameworks became popular, front end developers used data- attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
These days, using data- attributes is not encouraged. One reason is that users can modify the data attribute easily by using inspect element in the browser. The data model is better stored within JavaScript itself and stay updated with the DOM via data binding possibly through a library or a framework.
Cookies
- Limited storage space 4096 bytes / ~4 kb
- Only allow to store data as strings
- Stored data is sent back to server on every HTTP request such as HTML, CSS, Images etc,
- Can store only 20 cookies per domain
- In total 300 cookies are allowed on a site
- Setting HTTP only flag will prevent accessing cookies via javascript
- Can set expiration duration for auto deletion (can be set either from server or client)
Example:
// Set with expiration & path document.cookie = "name=Gokul; expires=Thu, 18 Dec 2016 12:00:00 UTC; path=/;";// Get document.cookie;
// Delete by setting empty value and same path document.cookie = "name=; expires=Thu, 18 Dec 2016 12:00:00 UTC; path=/;";
Session Storage
- Storage space is 5 mb / ~5120 kb
- Storage space may vary a little based on the browser
- Only allow to store data as strings
- Data is available per window or tab
- Once window or tab is closed stored data is deleted
- Data will be only available on same origin
Example:
// Set sessionStorage.setItem("name", "gokul");// Get sessionStorage.getItem("name"); // gokul
// Delete sessionStorage.removeItem("name");
// Delete All sessionStorage.clear();
Local Storage
- Storage space is 5 mb / ~5120 kb
- Storage space may vary a little based on the browser
- Only allow to store data as strings
- Data will be only available on same origin
- Data is persistant (untill explicitly deleted)
- API is similar to session storage
Example:
// Set localStorage.setItem("name", "gokul");// Get localStorage.getItem("name"); // gokul
// Delete localStorage.removeItem("name");
// Delete All localStorage.clear();
Some of the key differences are:
- An XHTML element must have an XHTML
<DOCTYPE> - Attributes values must be enclosed in quotes
- Attribute minimization is forbidden (e.g. one has to use
checked="checked"instead ofchecked) - Elements must always be properly nested
- Elements must always be closed
- Special characters must be escaped
- Web Workers helps us to run javascript code in the background without blocking application.
- Web Workers runs in an isolated (new) thread for executing our javascript code.
- Web Workers are usually used for large tasks.
- Web Workers needs a seperate file for our javascript code.
- Web Workers files are downloaded asynchronously.
- Web Workers are supported in all latest browser.
Example:
Our client side js file below:
var myWebWorker = new Worker("task.js"); // Creating a worker// Listen to task.js worker messages worker.addEventListener("message", function(event) { console.log("Worker said: ", event.data); }, false);
worker.postMessage("From web worker file"); // Will start the worker
task.js (worker file) file below:
// Listen to client js file post messages
self.addEventListener("message", function(event) {
self.postMessage(event.data); // Send processed data to listening client js file.
}, false);- WebSQL is database API for client (browser) database using SQL.
- Similar to SQL, API are pretty simple.
- Not all the browser supports WebSQL.
- As of now WebSQL is deprecated.
Browsers have a cache to temporarily store files on websites so they don't need to be re-downloaded again when switching between pages or reloading the same page. The server is set up to send headers that tell the browser to store the file for a given amount of time. This greatly increases website speed and preserves bandwidth.
However, it can cause problems when the website has been changed by developers because the user's cache still references old files. This can either leave them with old functionality or break a website if the cached CSS and JavaScript files are referencing elements that no longer exist, have moved or have been renamed.
Cache busting is the process of forcing the browser to download the new files. This is done by naming the file something different to the old file.
A common technique to force the browser to re-download the file is to append a query string to the end of the file.
src="js/script.js"=>src="js/script.js?v=2"
The browser considers it a different file but prevents the need to change the file name.
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 specificiations.
HTML5defines some rules to follow for an invalidHTML5document (i.e., one that contains syntactical errors)- However, invalid documents may contain anything, so it's impossible for the specification to handle all possibilities comprehensively.
- Thus, many decisions about how to handle malformed documents are left up to the browser.
All the above-mentioned technologies are key-value storage mechanisms on the client side. They are only able to store values as strings.
cookie | localStorage | sessionStorage | |
|---|---|---|---|
| Initiator | Client or server. Server can use Set-Cookie header | Client | Client |
| Expiry | Manually set | Forever | On tab close |
| Persistent across browser sessions | Depends on whether expiration is set | Yes | No |
| Sent to server with every HTTP request | Cookies are automatically being sent via Cookie header | No | No |
| Capacity (per domain) | 4kb | 5MB | 5MB |
| Accessibility | Any window | Any window | Same tab |
DOCTYPE is an abbreviation for “document type”. It is a declaration used in HTML to distinguish between standards mode and quirks mode. Its presence tells the browser to render the web page in standards mode.
Moral of the story - just add <!DOCTYPE html> at the start of your page.
Thanks 🙌 for reading and good luck on your next tech interview!
Explore 3800+ dev interview question here 👉 Devinterview.io