The ______ element is useful for providing a collapsible summary in HTML tables.

  •  
  •  
  •  
  •  
The

and

elements in HTML can be used together to provide an interactive widget that the user can open and close. Any content inside the

tag will be hidden by default and can be revealed by the user by toggling the

element. It's a native HTML way to add toggleable content without any JavaScript. 

The _____ property in CSS is used to control the order of navigational elements when the tab key is used.

  • order 
  • tab-order 
  • tabindex 
  • z-index 
The tabindex property in CSS is used to specify the tab order of an element within a web page. A positive value defines the exact tab order, while a value of "0" means that the element should be focusable and reachable with the tab key. A negative value (like -1) makes the element focusable but not reachable via sequential keyboard navigation. It's essential for improving web accessibility and user navigation experience. 

A webpage with a carousel of images is not displaying the images. How would you use the "alt" attribute to provide context for missing images, and why is it important?

  • Use "alt" to decorate the image with colors. 
  • Use "alt" to describe the image, making the site accessible for visually impaired users. 
  • Use "alt" to link another image. 
  • Use "alt" to reduce the size of the image. 
The "alt" attribute provides a text alternative for an image. If an image fails to load or if the user is visually impaired and using a screen reader, the "alt" text will be read out or displayed. This ensures that the content is accessible to all users and provides context even if the image is missing. Additionally, "alt" attributes are beneficial for SEO. 

To represent a block-level quotation, the _______ element is used.

  •  

  •  
  •  
  •  
The

element is designed for containing a block of quoted text from another source. When browsers render a

, they usually indent the content from both left and right margins. This indentation helps visually differentiate the blockquote from other text. When using the

element, it's a good practice to include a citation (if available) with the element. 

Can block-level elements be placed inside inline-level elements without affecting validity and semantics?

  • It depends on the HTML version used. 
  • No, it's semantically incorrect. 
  • Only if the inline element has a display setting of 'block'. 
  • Yes, they can be nested without issues. 
Semantically, block-level elements should not be nested inside inline-level elements. Doing so can lead to unpredictable behavior in rendering and can also make the HTML document invalid. This practice goes against the standard document flow where block-level elements are used to structure the content while inline-level elements style specific parts within those blocks. 

You need to load a script without blocking the HTML parser during the loading phase. How would you use the "async" and "defer" attributes to achieve this, and what are the key differences between them?

  • Use "async" and "defer" interchangeably as they have identical functionalities. 
  • Use "async" to load the script after the HTML is parsed and "defer" to execute the script immediately. 
  • Use "async" to load the script in parallel and execute it as soon as it finishes downloading; use "defer" to load the script in parallel but defer its execution until after the HTML is parsed. 
  • Use "async" to pause the HTML parser and "defer" to load the script in parallel. 
Both "async" and "defer" are attributes used with