HTML Interview Questions and Answers (Set 15)

Introduction

This set of HTML interview questions focuses on a curated selection of the 10 best questions, covering essential concepts to help you prepare effectively.

291. What is the purpose of the `lang` attribute in the `<html>` tag?

Answer: Specifies the primary language of the document.
```
<html lang="en">
```
Explanation: The lang attribute is crucial for accessibility tools like screen readers and for search engines to determine the document’s language.

292. How do you create an HTML element that dynamically updates its content?

Answer: Use the <span> or <div> tags with JavaScript.

<div id="dynamicContent">Initial Content</div>
<script>
  document.getElementById('dynamicContent').innerText = 'Updated Content';
</script>

Explanation: JavaScript manipulates the DOM to update the content dynamically.

293. What is the difference between `id` and `class` attributes in HTML?

Answer:
- id: Unique identifier for a single element.
- class: Reusable identifier for multiple elements.
```
<div id="unique">Unique</div>
<div class="common">Common 1</div>
<div class="common">Common 2</div>
```
Explanation: Use id for unique elements and class for styling or scripting multiple elements.

294. How do you embed an external JavaScript file in HTML?

Answer: Use the <script> tag with the src attribute:
```
<script src="app.js"></script>
```
Explanation: The src attribute loads an external JavaScript file, keeping the HTML clean and modular.

295. What is the role of the `async` and `defer` attributes in the `<script>` tag?

Answer:
- async: Loads the script asynchronously and executes it immediately.
- defer: Loads the script asynchronously but executes it after the HTML parsing is complete.
```
<script src="script.js" async></script>
<script src="script.js" defer></script>
```
Explanation: Both attributes improve performance by non-blocking script loading, but their execution timing differs.

296. How do you create a table with merged cells?

Answer: Use the rowspan and colspan attributes:

<table border="1">
  <tr>
    <th rowspan="2">Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 2</td>
  </tr>
</table>

Explanation: rowspan merges rows, and colspan merges columns within a table.

297. How do you create a sticky footer in HTML and CSS?

Answer: Use CSS with position: sticky or Flexbox:

<footer class="sticky-footer">Footer Content</footer>
<style>
  .sticky-footer {
    position: sticky;
    bottom: 0;
    background: #333;
    color: white;
    text-align: center;
  }
</style>

Explanation: A sticky footer stays at the bottom of the viewport when scrolling, enhancing the layout.

298. How do you ensure accessibility in a form?

Answer: Use proper label tags and ARIA attributes:
```
<label for="username">Username:</label>
<input type="text" id="username" name="username" aria-required="true">
```
Explanation: Labels and ARIA attributes improve accessibility for screen readers and users with disabilities.

299. How do you preload fonts in HTML?

Answer: Use the <link> tag with rel="preload" and as="font":
```
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
```
Explanation: Preloading fonts improves performance by loading them earlier in the render process.

300. How do you create a responsive navigation bar in HTML?

Answer: Use Flexbox or CSS Grid:

<nav class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>
<style>
  .navbar {
    display: flex;
    justify-content: space-around;
    background: #333;
    color: white;
  }
</style>

Explanation: Flexbox simplifies creating a responsive layout, making the navigation bar adaptable to different screen sizes.

Conclusion

These carefully selected questions provide a comprehensive understanding of HTML essentials and best practices. Use them to prepare effectively for interviews or deepen your web development knowledge.

291. What is the purpose of the lang attribute in the <html> tag?