15 Essential HTML5 Interview Questions to Watch Out in 2018
HTML and CSS are the foundation of the web. And HTML 5 is the foundation for taking your full stack skills to the next level. Follow through and check 15 most common and essential HTML 5 Interview Questions and Answers to watch out on your developer interview in 2018.
Q1: Explain meta tags in HTML
- 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>Q2: Can a web page contain multiple <header> elements? What about <footer> elements?
<header> elements? What about <footer> elements?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.
Q3: 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 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.
Q4: What is HTML5 Web Storage? Explain localStorage and sessionStorage.
localStorage and sessionStorage.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.
Q5: What is an optional tag?
In HTML, some elements have optional tags. In fact, both the opening and closing tags of some elements may be completely removed from an HTML document, even though the elements themselves are required.
Three required HTML elements whose start and end tags are optional are the html, head, and body elements.
Q6: What is the DOM?
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.
Q7: What's new in HTML 5?
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
Q8: Check HTML Markup Validity
Q9: What are the building blocks of HTML5?
Q10: What is progressive rendering?
Q11: What's the difference between Full Standard, Almost Standard and Quirks Mode?
Q12: Why to use HTML5 semantic tags?
Q13: Could you generate a public key in HTML?
Q14: What are Web Components?
Q15: What is accessibility & ARIA role means in a web application?
Rust has been Stack Overflow’s most loved language for four years in a row and emerged as a compelling language choice for both backend and system developers, offering a unique combination of memory safety, performance, concurrency without Data races...
Clean Architecture provides a clear and modular structure for building software systems, separating business rules from implementation details. It promotes maintainability by allowing for easier updates and changes to specific components without affe...
Azure Service Bus is a crucial component for Azure cloud developers as it provides reliable and scalable messaging capabilities. It enables decoupled communication between different components of a distributed system, promoting flexibility and resili...
FullStack.Cafe is a biggest hand-picked collection of top Full-Stack, Coding, Data Structures & System Design Interview Questions to land 6-figure job offer in no time.
Coded with 🧡 using React in Australia 🇦🇺
by @aershov24, Full Stack Cafe Pty Ltd 🤙, 2018-2023
Privacy • Terms of Service • Guest Posts • Contacts • MLStack.Cafe
based on 86 Trustpilot 
Reviews