HTML Flashcards
HTML interview questions
List some APIs available in HTML5.
HTML5 introduced several new APIs to enhance web application capabilities. Some notable APIs include Canvas API, Geolocation API, Web Storage API, Web Workers API, WebSockets API, File API, Drag and Drop API, and Audio/Video APIs.
What are some key page structure elements introduced by HTML5?
HTML5 introduced semantic elements for structuring web pages. Some include <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, and <figcaption>.</figure>
What is the difference between HTML and HTML5?
HTML is the standard language for creating web pages, while HTML5 is its fifth version with enhanced features and capabilities. HTML5 introduced semantic elements, multimedia support, canvas and SVG graphics, improved forms, geolocation, web storage, offline support, and better APIs.
Are HTML5 tags case sensitive?
No, HTML5 tags are case-insensitive when rendering content in web browsers. The browser treats lowercase, uppercase, or mixed case tags the same way. However, it’s recommended to use lowercase for consistency and adherence to best practices.
Can a web page contain multiple <footer> elements?
Yes, a web page can have multiple <footer> elements. Each <footer> represents closing content at the bottom of a section and can be used in various sections of the page.
Can a web page contain multiple <header> elements?
Yes, a web page can have multiple <header> elements. Each <header> represents introductory content at the top of a section and can be used in different parts of the page.
How did HTML5 enhance form handling?
HTML5 introduced new input types like email, url, and date. It also included attributes like required and placeholder for improved form validation and user experience.
How do you choose between <svg> and <canvas>?</canvas></svg>
<svg> is best for resolution-independent graphics with styling and interaction needs. <canvas> is suited for pixel-based real-time graphics and animations. Selection depends on project requirements.
</canvas></svg>
How do you choose the right storage mechanism in HTML5?
Each mechanism has strengths. Local and Session Storage for small data. IndexedDB for large datasets. Cookies for specific data. Cache API for resource caching. Choose based on app needs.
How does HTML5 enhance multimedia support on the web?
HTML5 introduced native support for <audio> and <video> elements, eliminating the need for third-party plugins like Flash. This improves compatibility and performance for multimedia content.</video></audio>
How is local storage used in HTML5?
Local storage is accessed through JavaScript’s localStorage object. Data is stored using localStorage.setItem(key, value) and retrieved using localStorage.getItem(key). JSON methods are often used for working with complex data.
How is the Geolocation API used in HTML5?
The Geolocation API allows developers to request user permission for location access. Once granted, JavaScript can retrieve device coordinates for purposes like mapping, navigation, weather forecasts, and local search.
How many tags were removed in HTML5?
Tags like <font>, <center>, and <strike> were among the approximately 25 tags removed in HTML5. This removal aimed to encourage modern practices and separate content from presentation.</strike></center></font>
List key HTML5 page structure elements.
HTML5 introduced several semantic elements for better structuring:
<header>: Top of the page, often containing logo and navigation.
<nav>: Section for navigation links.
<main>: Main content area (one per page).
<article>: Self-contained content like blog posts.
<section>: Groups related content.
<aside>: Tangentially related content.
<footer>: Bottom of the page, with copyright and links.
<figure> & <figcaption>: Media with captions.
</figcaption></figure></footer></aside></section></article></main></nav></header>
List some APIs available in HTML5. (in detail)
Canvas API: For dynamic graphics and animations using <canvas> element.
Geolocation API: Access user's location for location-based services.
Web Storage API: Store data locally with localStorage and sessionStorage.
Web Workers API: Execute background JavaScript for multi-threading.
WebSockets API: Real-time communication between client and server.
File API: Access and manipulate files on the user's device.
Drag and Drop API: Enable user interface interactions.
Audio/Video APIs: Play and control multimedia content.</canvas>
What are Cookies in HTML5?
Cookies are small data pieces sent by servers and stored in browsers. They hold info like authentication tokens. They have size limits and are sent with each HTTP request.
What are some examples of semantic elements introduced by HTML5?
HTML5 introduced semantic elements like <header>, <nav>, <article>, <section>, and <footer>. These elements provide a clearer structure for content, benefiting SEO and accessibility.
What are the benefits and considerations of using local storage in HTML5?
Benefits: Persistent client-side data storage, easy to use, no need for server interaction. Considerations: Limited storage (about 5-10 MB), data is not encrypted, consider security and larger datasets.
What are the different types of storage in HTML5?
HTML5 offers several storage options:
Local Storage
Session Storage
Cookies
IndexedDB
Cache API
What features did HTML5 offer for offline support and APIs?
HTML5 introduced the concept of offline web applications using the Application Cache (AppCache) API. Additionally, it brought improved APIs for drag and drop, web workers, and JavaScript integration with the DOM.
Application Cache (AppCache): HTML5 introduced the Application Cache, a mechanism that allows web developers to specify which files (HTML, CSS, JavaScript, images, etc.) should be cached locally by the browser. This enables web applications to work offline or in low-connectivity situations. Developers define a cache manifest file listing the resources to be stored locally.
Local Storage: HTML5 introduced the localStorage and sessionStorage APIs, which allow web applications to store key-value pairs locally in a user’s browser. This enables web apps to persist data even when the user is offline. localStorage is designed for long-term storage, while sessionStorage is for the duration of a page session.
Web Storage: This encompasses both localStorage and sessionStorage but also includes the globalStorage API (deprecated) and Database Storage (deprecated in favor of IndexedDB).
IndexedDB: IndexedDB is a low-level API for storing large amounts of structured data, offering more advanced data storage and retrieval capabilities than localStorage. It’s designed to work well with web applications that require offline data storage and retrieval.
WebSQL (deprecated): While not a part of the official HTML5 specification, some browsers implemented the WebSQL Database API, which provided a relational database for web applications. However, this API has been deprecated in favor of IndexedDB.
File API: The File API allows web applications to interact with files on the user’s device. This is useful for working with local files, accessing user-selected files, and managing file input and output.
Service Workers: Service Workers are scripts that run in the background and can intercept and control network requests made by a web application. They enable features like background synchronization and push notifications, making it easier to create progressive web apps that work well offline.
Cache API: The Cache API allows you to programmatically manage the cache storage associated with a service worker. It offers fine-grained control over caching strategies and resources.
What graphical capabilities did HTML5 introduce?
HTML5 introduced the <canvas> element for dynamic graphics and animation rendering. It also provided native support for Scalable Vector Graphics (SVG), allowing for resolution-independent and interactive graphics.</canvas>
What is a hyperlink?
A hyperlink, often known as a link, is a clickable element on a webpage that, when clicked, takes the user to another digital resource or location, such as a different webpage or document.
What is a Web Worker in HTML5?
A Web Worker in HTML5 is a JavaScript-based mechanism that enables background thread execution, separate from the main UI thread. It prevents UI slowdowns by allowing parallel processing of tasks like computations and data processing.
What is an API?
An API, or Application Programming Interface, defines rules and protocols that allow different software applications to communicate and interact with each other. It enables developers to utilize functionality from other services or platforms without understanding their internal workings.