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.
What is an image map in HTML5?
An image map in HTML5 allows specific areas of an image to be defined as clickable links, known as ‘hotspots.’ It’s used to create interactive graphics or navigation elements within images using the <map> and <area></area> elements.
What is IndexedDB in HTML5?
IndexedDB is a powerful client-side database API for storing structured data. It supports complex queries and is suitable for offline data storage.
What is local storage in HTML5?
Local storage is a web storage mechanism that allows web applications to store key-value pairs locally within the user’s browser. It offers persistent data storage on the client side even after the browser is closed.
What is Session Storage in HTML5?
Session Storage is a Web Storage API for storing data during a browser session. Data is cleared when the session ends, making it ideal for temporary storage during a user’s visit.
What is the <canvas> element used for?</canvas>
<canvas> provides a bitmap-based drawing context. JavaScript is used to draw graphics directly onto it. Ideal for real-time graphics like games, animations, and data visualization. Offers pixel-level control and performance optimization.
</canvas>
What is the <svg> element used for?</svg>
<svg> stands for Scalable Vector Graphics. It's a markup-based approach for creating graphics using XML. SVG images are resolution-independent, can be styled, animated, and interacted with using CSS and JavaScript. Suitable for icons, logos, and interactive visuals.
</svg>
What is the Cache API in HTML5?
The Cache API lets developers cache resources for better website performance. Cached resources can be used offline and reduce repeated server requests.
What is the difference between <span> and <div> elements?</span>
<span> is an inline-level element used for styling specific portions of text within content. <div> is a block-level element used to create larger containers for grouping and styling multiple elements.</span>
What is the difference between the <svg> and <canvas> elements?</canvas></svg>
<svg> is for scalable vector graphics, while <canvas> provides a bitmap-based drawing context. They have different approaches and use cases for creating graphics on web pages.
</canvas></svg>
What is the Geolocation API in HTML5?
The Geolocation API in HTML5 enables web applications to access a user’s geographic location, providing latitude, longitude, and more. It facilitates location-based services, personalized content, and improved user experiences.
What is the overall impact of HTML5 on web development?
HTML5 marked a major advancement in web technology, offering enhanced semantics, multimedia capabilities, improved performance, and better support for modern web applications. Its adoption has led to more efficient and interactive web experiences.
What is the use of Scalable Vector Graphics (SVG) in HTML5?
SVG is used to describe resolution-independent two-dimensional vector graphics in HTML5. It’s useful for responsive design, interactive graphics, icons, logos, accessibility, SEO, performance, and high-quality printing.
What is the use of the <fieldset> element in HTML?
The <fieldset> element in HTML is used to group related form controls together, providing logical organization and improved accessibility.
What new features did HTML5 introduce for location and data storage?
HTML5 enabled websites to request a user’s geographic location using the Geolocation API. It also introduced web storage options like localStorage and sessionStorage for efficient client-side data storage.
What should be considered when using the Geolocation API?
The API uses various sources (GPS, Wi-Fi, etc.) to determine location. User privacy is important, and browsers seek user permission. Responsible and secure handling of location data is vital.
Which element provides the autocomplete feature in a textbox?
The <datalist> element can be used to provide a list of predefined options that users can select as they type.</datalist>
Why are hyperlinks used?
Hyperlinks are used to connect web pages and resources, enabling users to navigate easily between related content. They facilitate access to information and resources across the web, contributing to a seamless browsing experience.
