carefree-ladka/HTML5 Interview Cheatsheet.mdx

## HTML5 Interview Cheatsheet.mdx

      
    Raw
  

              HTML5 Interview Cheatsheet.mdx
            
          
    HTML5 Interview Cheatsheet

Table of Contents


Basic Structure
Semantic Elements
Text Content
Links & Media
Forms
Lists
Tables
HTML5 APIs & Attributes
Multimedia & Graphics
Meta Tags & Scripts
Interview Tips


1. Basic Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- Your content here -->
</body>
</html>
Key Points:

<!DOCTYPE html> declares HTML5
lang="en" for accessibility and SEO
charset="UTF-8" for proper character encoding


2. Semantic Elements

<header>Page header / navigation</header>
<nav>Navigation links</nav>
<main>Main content area</main>
<section>Section of content</section>
<article>Independent, self-contained content</article>
<aside>Sidebar / related content</aside>
<footer>Footer section</footer>
<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>Image caption</figcaption>
</figure>
Why Semantic HTML?

Better SEO
Improved accessibility (screen readers)
Clearer code structure
Better browser interpretation


3. Text Content

<!-- Headings -->
<h1>Main Heading</h1>
<h2>Subheading</h2>
<!-- ... h3 to h6 -->

<!-- Text Elements -->
<p>Paragraph text</p>
<span>Inline text container</span>
<strong>Bold / Important text</strong>
<em>Italic / Emphasized text</em>
<mark>Highlighted text</mark>
<small>Smaller text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>

<!-- Quotes & Code -->
<blockquote cite="https://source.com">Long quotation</blockquote>
<q>Short inline quote</q>
<code>Inline code</code>
<pre>Preformatted text block</pre>
<kbd>Keyboard input</kbd>
<samp>Sample output</samp>

<!-- Line breaks -->
<br>  <!-- Line break -->
<hr>  <!-- Horizontal rule -->

4. Links & Media

<!-- Links -->
<a href="https://example.com">External Link</a>
<a href="/page.html">Internal Link</a>
<a href="#section">Anchor Link</a>
<a href="mailto:email@example.com">Email Link</a>
<a href="tel:+1234567890">Phone Link</a>
<a href="file.pdf" download>Download Link</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  New Tab Link
</a>

<!-- Images -->
<img src="image.jpg" alt="Description" width="300" height="200">
<img src="image.jpg" alt="Description" loading="lazy">

<!-- Picture Element (Responsive Images) -->
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Description">
</picture>

<!-- Video -->
<video controls width="640" height="360" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser doesn't support video.
</video>

<!-- Audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser doesn't support audio.
</audio>

<!-- iframe -->
<iframe src="https://example.com" width="600" height="400" 
        title="Description" sandbox="allow-scripts"></iframe>
Video/Audio Attributes:

controls - Show playback controls
autoplay - Auto-play (often blocked by browsers)
loop - Loop playback
muted - Mute audio
preload="auto|metadata|none"


5. Forms

<form action="/submit" method="post" enctype="multipart/form-data">
  
  <!-- Text Inputs -->
  <input type="text" name="username" placeholder="Username" required>
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="8">
  <input type="tel" name="phone" pattern="[0-9]{10}">
  <input type="url" name="website">
  <input type="search" name="query">
  
  <!-- Number & Range -->
  <input type="number" name="age" min="18" max="100" step="1">
  <input type="range" name="volume" min="0" max="100" value="50">
  
  <!-- Date & Time -->
  <input type="date" name="birthdate">
  <input type="time" name="appointment">
  <input type="datetime-local" name="meeting">
  <input type="month" name="month">
  <input type="week" name="week">
  
  <!-- Other Inputs -->
  <input type="color" name="favcolor" value="#ff0000">
  <input type="file" name="upload" accept="image/*" multiple>
  <input type="hidden" name="user_id" value="123">
  
  <!-- Checkbox & Radio -->
  <input type="checkbox" name="subscribe" id="sub" checked>
  <label for="sub">Subscribe</label>
  
  <input type="radio" name="gender" value="male" id="male">
  <label for="male">Male</label>
  <input type="radio" name="gender" value="female" id="female">
  <label for="female">Female</label>
  
  <!-- Textarea -->
  <textarea name="message" rows="4" cols="50" 
            placeholder="Your message" maxlength="500"></textarea>
  
  <!-- Select Dropdown -->
  <select name="country" required>
    <option value="">Select Country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <optgroup label="Asia">
      <option value="in">India</option>
      <option value="cn">China</option>
    </optgroup>
  </select>
  
  <!-- Datalist (Autocomplete) -->
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
  </datalist>
  
  <!-- Buttons -->
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
  <button type="button">Regular Button</button>
  <input type="submit" value="Submit Form">
  
</form>
Important Form Attributes:

required - Field must be filled
placeholder - Hint text
autocomplete="on|off" - Browser autocomplete
autofocus - Auto-focus on page load
disabled - Disable input
readonly - Read-only field
pattern - Regex validation
minlength / maxlength - Length constraints
min / max / step - Number constraints
novalidate - Disable form validation (on <form>)


6. Lists

<!-- Unordered List -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Ordered List -->
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

<!-- Ordered List with custom start -->
<ol start="5" type="A">
  <li>Item E</li>
  <li>Item F</li>
</ol>

<!-- Description List -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

<!-- Nested Lists -->
<ul>
  <li>Item 1
    <ul>
      <li>Sub-item 1.1</li>
      <li>Sub-item 1.2</li>
    </ul>
  </li>
  <li>Item 2</li>
</ul>

7. Tables

<table>
  <caption>Monthly Sales Report</caption>
  
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
      <th scope="col">Profit</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>January</td>
      <td>$10,000</td>
      <td>$2,000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$15,000</td>
      <td>$3,000</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>$25,000</td>
      <td>$5,000</td>
    </tr>
  </tfoot>
</table>

<!-- Colspan & Rowspan -->
<table>
  <tr>
    <td colspan="2">Spans 2 columns</td>
  </tr>
  <tr>
    <td rowspan="2">Spans 2 rows</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
</table>

8. HTML5 APIs & Attributes

Custom Data Attributes

<div data-user-id="123" data-role="admin">User Info</div>

<script>
  const el = document.querySelector('[data-user-id]');
  console.log(el.dataset.userId);  // "123"
  console.log(el.dataset.role);    // "admin"
</script>
Content Editable

<div contenteditable="true">Edit this text</div>
Drag and Drop

<div draggable="true" ondragstart="drag(event)">Drag me</div>
<div ondrop="drop(event)" ondragover="allowDrop(event)">Drop here</div>
Dialog Element

<dialog id="myDialog">
  <p>This is a modal dialog</p>
  <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">
  Open Dialog
</button>
Details & Summary (Accordion)

<details>
  <summary>Click to expand</summary>
  <p>Hidden content that appears when expanded.</p>
</details>
Progress & Meter

<progress value="70" max="100">70%</progress>
<meter value="0.7" min="0" max="1">70%</meter>
Local Storage API

// Store data
localStorage.setItem('username', 'John');

// Retrieve data
const user = localStorage.getItem('username');

// Remove data
localStorage.removeItem('username');

// Clear all
localStorage.clear();

// Session Storage (cleared when tab closes)
sessionStorage.setItem('temp', 'value');
Geolocation API

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      console.log(position.coords.latitude);
      console.log(position.coords.longitude);
    },
    (error) => {
      console.error(error);
    }
  );
}
Other HTML5 Attributes


autofocus - Auto-focus element on load
spellcheck="true|false" - Enable/disable spell check
translate="yes|no" - Translation hint
hidden - Hide element
tabindex="0" - Tab order


9. Multimedia & Graphics

Canvas

<canvas id="myCanvas" width="400" height="300"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // Draw rectangle
  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 100, 50);
  
  // Draw circle
  ctx.beginPath();
  ctx.arc(200, 150, 50, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
  
  // Draw text
  ctx.font = '30px Arial';
  ctx.fillStyle = 'black';
  ctx.fillText('Hello Canvas', 50, 200);
</script>
SVG (Scalable Vector Graphics)

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Circle -->
  <circle cx="100" cy="100" r="50" fill="blue" stroke="black" stroke-width="2"/>
  
  <!-- Rectangle -->
  <rect x="10" y="10" width="80" height="60" fill="green"/>
  
  <!-- Line -->
  <line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="3"/>
  
  <!-- Text -->
  <text x="50" y="150" font-size="20" fill="black">SVG Text</text>
  
  <!-- Polygon -->
  <polygon points="100,10 40,198 190,78 10,78 160,198" 
           fill="yellow" stroke="black"/>
</svg>

10. Meta Tags & Scripts

<head>
  <!-- Character Encoding -->
  <meta charset="UTF-8">
  
  <!-- Viewport (Responsive Design) -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- SEO Meta Tags -->
  <meta name="description" content="Page description for search engines">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Your Name">
  
  <!-- Social Media Meta Tags (Open Graph) -->
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Description">
  <meta property="og:image" content="image.jpg">
  <meta property="og:url" content="https://example.com">
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Page Title">
  
  <!-- Favicon -->
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  
  <!-- Stylesheet -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- Preload / Prefetch -->
  <link rel="preload" href="font.woff2" as="font" crossorigin>
  <link rel="prefetch" href="next-page.html">
  
  <!-- Scripts -->
  <script src="app.js" defer></script>
  <script src="analytics.js" async></script>
  
  <title>Page Title</title>
</head>
Script Loading:

Normal: <script src="app.js"></script> - Blocks HTML parsing
defer: <script src="app.js" defer></script> - Downloads in parallel, executes after HTML parsing
async: <script src="app.js" async></script> - Downloads in parallel, executes as soon as downloaded


11. Interview Tips

Common Interview Questions

1. What's new in HTML5?

Semantic elements (header, nav, article, etc.)
New input types (email, date, color, etc.)
Audio/Video support without plugins
Canvas & SVG
Local Storage & Session Storage
Geolocation API
Drag and Drop API
Web Workers
WebSocket

2. Semantic HTML vs Non-Semantic
<!-- ❌ Non-Semantic -->
<div id="header"></div>
<div class="article"></div>

<!-- ✅ Semantic -->
<header></header>
<article></article>
3. Block vs Inline Elements

Block: <div>, <p>, <h1>, <section> - Take full width
Inline: <span>, <a>, <strong>, <img> - Only take necessary width

4. <div> vs <span>

<div> - Block-level container
<span> - Inline container

5. localStorage vs sessionStorage

localStorage - Persists until manually cleared
sessionStorage - Cleared when tab/browser closes

6. What is DOCTYPE?

Tells browser which version of HTML to use
<!DOCTYPE html> for HTML5

7. Accessibility Features

alt attribute for images
aria-* attributes
Semantic HTML
<label> for form inputs
tabindex for keyboard navigation

Quick Reference Table


Element Type
Examples


Semantic
<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>


Text
<p>, <h1>-<h6>, <strong>, <em>, <span>


Lists
<ul>, <ol>, <li>, <dl>, <dt>, <dd>


Forms
<form>, <input>, <select>, <textarea>, <button>


Media
<img>, <video>, <audio>, <canvas>, <svg>


Table
<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>


HTML5 Input Types

text, email, password, number, tel, url, search, date, time, datetime-local, month, week, color, range, file, checkbox, radio, submit, reset, button, hidden

Good luck with your interviews! 🚀
Element Type	Examples
Semantic	`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`
Text	`<p>`, `<h1>-<h6>`, `<strong>`, `<em>`, `<span>`
Lists	`<ul>`, `<ol>`, `<li>`, `<dl>`, `<dt>`, `<dd>`
Forms	`<form>`, `<input>`, `<select>`, `<textarea>`, `<button>`
Media	`<img>`, `<video>`, `<audio>`, `<canvas>`, `<svg>`
Table	`<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`
No results found