Test Your Knowledge

Web Development Quiz

Challenge yourself with interview-style questions. Select a topic from the sidebar and click to reveal answers.

📄

HTML

Test your HTML knowledge

📄HTML

What is the difference between <div> and <span> elements?

<div> is a block-level element that takes up the full width available and starts on a new line. <span> is an inline element that only takes up as much width as necessary and doesn't break the line. Use <div> for larger sections and <span> for small pieces of content within text.

<div>I take full width</div>
<span>I'm inline</span><span>Next to me</span>

📄HTML

What is semantic HTML and why is it important?

Semantic HTML uses elements that clearly describe their meaning (like <header>, <nav>, <article>, <footer>) instead of generic <div> tags. It improves accessibility for screen readers, helps SEO by letting search engines understand content structure, and makes code more readable and maintainable.

<!-- Non-semantic -->
<div class="header">...</div>

<!-- Semantic -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

📄HTML

What's the difference between <script>, <script async>, and <script defer>?

Regular <script> blocks HTML parsing until the script loads and executes. <script async> loads in parallel and executes immediately when ready (order not guaranteed). <script defer> loads in parallel but executes after HTML parsing, in order. Use defer for scripts that need the DOM, async for independent scripts like analytics.

<!-- Blocks parsing -->
<script src="app.js"></script>

<!-- Loads async, executes when ready -->
<script async src="analytics.js"></script>

<!-- Loads async, executes after DOM -->
<script defer src="app.js"></script>

📄HTML

What is the purpose of the alt attribute in images?

The alt attribute provides alternative text for images when they can't be displayed or for screen readers. It's crucial for accessibility (visually impaired users), SEO (search engines read alt text), and as fallback when images fail to load. Alt text should describe the image's content and purpose.

<!-- Good alt text -->
<img src="chart.png"
     alt="Sales chart showing 50% growth in Q4 2024" />

<!-- Decorative images -->
<img src="decoration.png" alt="" />

📄HTML

What are data attributes and how do you use them?

Data attributes (data-*) let you store custom data on HTML elements without affecting presentation. JavaScript can access them via element.dataset. They're useful for passing configuration to JavaScript, storing state, or adding metadata without extra DOM elements.

<button data-product-id="123"
        data-action="add-to-cart">
  Add to Cart
</button>

<script>
const btn = document.querySelector('button');
console.log(btn.dataset.productId); // "123"
</script>

📄HTML

What is the DOCTYPE declaration and why is it needed?

<!DOCTYPE html> tells browsers to use standards mode instead of quirks mode. Without it, browsers may render pages inconsistently. Always include it at the start of HTML documents.

<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>...</body>
</html>

📄HTML

What's the difference between id and class attributes?

id must be unique per page and is used for specific elements (anchors, JS targeting). class can be reused on multiple elements for shared styling. Use classes for styling, ids for unique identification.

<!-- id: unique identifier -->
<div id="header">One per page</div>

<!-- class: reusable -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>

📄HTML

What are void elements in HTML?

Void elements can't have content or closing tags. Examples: <img>, <br>, <hr>, <input>, <meta>, <link>. They're self-closing in HTML5 (no /> needed, but allowed).

<img src="photo.jpg" alt="Photo">
<br>
<input type="text">
<meta charset="UTF-8">

📄HTML

What is the purpose of the <meta> viewport tag?

The viewport meta tag controls how the page scales on mobile devices. width=device-width sets width to device width, initial-scale=1.0 sets zoom level. Essential for responsive design.

<meta name="viewport"
  content="width=device-width, initial-scale=1.0">

📄HTML

What's the difference between <button> and <input type='button'>?

<button> can contain HTML content (icons, text), has default type='submit' in forms. <input type='button'> only shows value text. Prefer <button> for flexibility and accessibility.

<button type="button">
  <span>🔥</span> Click Me
</button>

<input type="button" value="Click">

📄HTML

What is the <template> element used for?

<template> holds HTML that isn't rendered until activated by JavaScript. Content inside is parsed but not displayed. Useful for client-side templating without showing content prematurely.

<template id="card-template">
  <div class="card">
    <h2></h2>
    <p></p>
  </div>
</template>

<script>
const template = document.getElementById('card-template');
const clone = template.content.cloneNode(true);
</script>

📄HTML

What are ARIA attributes and when should you use them?

ARIA (Accessible Rich Internet Applications) attributes enhance accessibility for dynamic content. Use aria-label for labels, aria-hidden to hide decorative elements, role for element purposes. Only use when native HTML semantics aren't sufficient.

<button aria-label="Close menu">×</button>
<div role="alert">Error occurred</div>
<span aria-hidden="true">🔒</span>

📄HTML

What's the difference between <section> and <article>?

<article> is self-contained, independently distributable content (blog post, comment, widget). <section> groups thematically related content within a document. Articles can contain sections, sections can contain articles.

<article>
  <h1>Blog Post Title</h1>
  <section>
    <h2>Introduction</h2>
    <p>...</p>
  </section>
</article>

📄HTML

How do you create accessible forms?

Use <label> with for attribute matching input id. Group related inputs with <fieldset> and <legend>. Add aria-describedby for help text. Use required, autocomplete attributes. Provide clear error messages.

<label for="email">Email:</label>
<input type="email" id="email"
  aria-describedby="email-help" required>
<span id="email-help">We'll never share</span>

📄HTML

What is the <figure> and <figcaption> used for?

<figure> wraps self-contained content like images, diagrams, code. <figcaption> provides a caption. Useful for images with captions, allowing them to be moved without losing context.

<figure>
  <img src="chart.png" alt="Sales chart">
  <figcaption>
    Figure 1: Q4 sales increased 50%
  </figcaption>
</figure>

📄HTML

What's the difference between <strong> and <b>, <em> and <i>?

<strong> indicates importance (screen readers emphasize it), <b> is just bold styling. <em> indicates emphasis/stress, <i> is italic styling or alternate voice. Use semantic tags for meaning, presentational for styling only.

<p><strong>Warning:</strong> Important!</p>
<p><em>Really</em> important</p>

<p><b>Bold</b> but not important</p>
<p><i>Technical term</i></p>

📄HTML

What are the new input types in HTML5?

HTML5 added: email, url, tel, number, range, date, time, datetime-local, month, week, color, search. They provide built-in validation and mobile-optimized keyboards.

<input type="email" required>
<input type="date">
<input type="range" min="0" max="100">
<input type="color">

📄HTML

What is the <details> and <summary> element?

<details> creates a disclosure widget that can be toggled open/closed. <summary> provides the visible heading. Native HTML accordion without JavaScript. Use open attribute to start expanded.

<details>
  <summary>Click to expand</summary>
  <p>Hidden content here...</p>
</details>

<details open>
  <summary>Starts open</summary>
  <p>Visible by default</p>
</details>

📄HTML

What is the purpose of the lang attribute?

The lang attribute specifies the language of content. Set on <html> for the whole page. Helps screen readers pronounce correctly, enables browser translation, and improves SEO for language targeting.

<html lang="en">
  <body>
    <p>English content</p>
    <p lang="es">Contenido en español</p>
  </body>
</html>

📄HTML

What's the difference between localStorage and sessionStorage?

Both store key-value strings in the browser. localStorage persists until cleared manually. sessionStorage clears when the tab closes. Both have ~5MB limit. Neither is sent to the server like cookies.

// Persists forever
localStorage.setItem('theme', 'dark');
localStorage.getItem('theme');

// Clears on tab close
sessionStorage.setItem('temp', 'data');