1. What are data-* attributes in HTML, and how are they used?
In HTML, data-* attributes are custom attributes that store extra data directly on an HTML element without affecting the page's structure or layout. They allow developers to keep additional information within the HTML and can be accessed via JavaScript, making them especially useful for dynamically updating content based on this stored data.
Example:
<div data-user-id="12345" data-user- role="admin">User Information</div>
In JavaScript, you can access these attributes through dataset:
const userInfo =. .... document.querySelector('div');
console.log(userInfo.dataset.userId); //. Outputs: 12345.
console.log(userInfo.dataset.userRole); // Outputs: admin.
2. What is the difference between block, inline, and inline-block elements in HTML?
HTML elements are generally classified into block, inline, and inline-block, each defining how they behave in terms of layout.
Block elements: Take up the full width of their container, start on a new line, and can contain other block or inline elements. Examples include <div>, <h1>, <p>, and <section>.
Inline elements: Only occupy as much width as needed, don’t start on a new line, and generally only contain text or other inline elements. Examples are <span>, <a>, and <strong>.
Inline-block elements: These elements do not start on a new line and only take up as much width as necessary, but unlike inline elements, you can set width and height. This style is useful for elements that need to line up horizontally, such as navigation menus.
Example:
<div>Block Element</div>.
<span>Inline Element</span>.
<span style="display: inline-block; width: 100px;">Inline-block Element</span>.
3. Explain the difference between <section>, <article>, <aside>, and <nav>.
These HTML5 semantic elements provide meaning to the structure of a document:
<section>: Used for grouping related content together, like different chapters or parts of a document.
<article>: Represents a self-contained piece of content that could be independently distributed, such as a blog post or news article.
<aside>: Contains information tangentially related to the main content, like sidebars, advertisements, or additional notes.
<nav>: Used to enclose navigation links, usually within menus or site navigation sections.
Example:
<section>.
<article>
<h2>Article Title</h2>.
<p>Article content...</p>.
</article>.
<aside>.
<p>Related links or ads here.</p>.
</aside>.
<nav>.
<ul>.
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>.
</nav>.
</section>.
4. What is the contenteditable attribute? How is it used?
The contenteditable attribute specifies whether the content of an element is editable by the user. When set to true, users can directly modify the content within that element on the webpage.
Example:
<div contenteditable="true">Edit this text</div>.
This attribute is useful for features like live text editing, comment systems, or creating web-based editors.
5. How does the viewport meta tag affect responsive web design?
The viewport meta tag is crucial for creating responsive designs that adapt to different screen sizes. It allows you to set the width and scale of the viewport, which controls how the content appears on mobile devices.
Example:
<meta name="viewport". content="width=device-width, initial-scale=1.0">.
width=device-width: Sets the viewport width to match the device's width.
initial-scale=1.0: Ensures that the initial zoom level is 1.
Without this tag, web pages may appear zoomed out or with a desktop-style layout on mobile screens, reducing usability.
6. What is progressive rendering in HTML, and how can it improve web performance?
Progressive rendering is a technique for enhancing web performance by displaying parts of a webpage as they load instead of waiting for the entire page to finish loading. This technique improves the user experience by making content visible sooner, which is especially useful on slower networks.
Techniques for Progressive Rendering:
Lazy Loading: Defer loading images and other media until they come into view.
<img src="placeholder.jpg" data- src="image.jpg" loading="lazy" alt="Lazy loaded image">.
Critical CSS: Load only the essential CSS required to render the above-the-fold content first.
Content Streaming: Stream large data sets in chunks, allowing partial display before the full content is loaded.
7. What are semantic elements in HTML, and why are they important?
Semantic HTML elements have meaningful names