HTML Codes - Shortmcqs.com

Exercise 1: Basic HTML Structure

Problem: Create a basic HTML template with a title “Hello World” and a heading <h1> that says “Welcome to HTML!”.
Solution:

<!DOCTYPE html>
<html>
<head>
  <title>Hello World</title>
</head>
<body>
  <h1>Welcome to HTML!</h1>
</body>
</html>

Run HTML

Exercise 2: Unordered List

Problem: Create an unordered list with three items: “Apple”, “Banana”, and “Cherry”.
Solution:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

Run HTML

Exercise 3: Bold Text

Problem: Demonstrate how to make text bold using HTML.
Solution:

<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>This is <strong>bold</strong> text.</p>
</body>
</html>

Run HTML

Exercise 4: Hyperlink

Problem: Create a hyperlink to “https://www.example.com” with the text “Visit Example”.
Solution:

<a href="https://www.example.com">Visit Example</a>

Run HTML

Exercise 5: Table Creation

Problem: Create a table with 2 rows and 2 columns. The cells should contain “A”, “B”, “C”, and “D”.
Solution:

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

Run HTML

Exercise 6: Form with Input

Problem: Create a form with a text input field labeled “Name” and a submit button.
Solution:

<form>
  <label>Name:</label>
  <input type="text" name="name">
  <input type="submit" value="Submit">
</form>

Run HTML

Exercise 7: Paragraph Formatting

Problem: Write a paragraph with bold “Important” and italicized “note” in the sentence: “Important: This is a note.”
Solution:

Run HTML

Exercise 8: Line Breaks

Problem: Display “First line” and “Second line” on separate lines using line breaks.
Solution:

First line<br>Second line

Run HTML

Exercise 9: Comments

Problem: Add a comment saying “This is a hidden note” in an HTML file.
Solution:

<!-- This is a hidden note -->

Run HTML

Exercise 10: Semantic Tags

Problem: Use semantic tags (<header>, <article>, <footer>) to structure a page.
Solution:

<header>
  <h1>Website Header</h1>
</header>
<article>
  <p>Main content goes here.</p>
</article>
<footer>
  <p>Copyright 2023</p>
</footer>

Run HTML

Exercise 11: Ordered List with Attributes

Problem: Create an ordered list numbered with Roman numerals (I, II, III) starting from 3. Include items: “Coffee”, “Tea”, “Milk”.
Solution:

<ol type="I" start="3">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Run HTML

Exercise 12: Nested Lists

Problem: Create a nested list where “Fruits” has sub-items “Apple” and “Banana”, and “Vegetables” has sub-items “Carrot” and “Broccoli”.
Solution:

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

Run HTML

Exercise 13: Meta Tags

Problem: Add a meta tag for responsive design (viewport) and another for a page description “Learn HTML Basics”.
Solution:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn HTML Basics">
</head>

Run HTML

Exercise 14: Blockquote & Citation

Problem: Create a blockquote with the text “The only way to learn programming is by writing code.” and cite it to “John Doe”.
Solution:

<blockquote>
  "The only way to learn programming is by writing code."
  <cite>– John Doe</cite>
</blockquote>

Run HTML

Exercise 15: Password Input

Problem: Create a password input field with a placeholder “Enter your password”.
Solution:

<input type="password" placeholder="Enter your password">

Run HTML

Exercise 16: Radio Buttons

Problem: Add two radio buttons for “Male” and “Female” (ensure only one can be selected).
Solution:

<label>
  <input type="radio" name="gender" value="male"> Male
</label>
<label>
  <input type="radio" name="gender" value="female"> Female
</label>

Run HTML

Exercise 17: Embed a Map (iframe)

Problem: Embed a Google Map using an iframe (use placeholder URL https://maps.example.com).
Solution:

<iframe 
  src="https://maps.example.com" 
  width="600" 
  height="450" 
  title="Location Map">
</iframe>

Run HTML

Exercise 18: Anchor Links

Problem: Create a link that jumps to a section with id="contact" on the same page. Use the text “Contact Us”.
Solution:

<a href="#contact">Contact Us</a>
<!-- Later in the page: -->
<section id="contact"></section>

Run HTML

Exercise 19: Special Characters

Problem: Display “Copyright © 2023” using the HTML entity for ©.
Solution:

<p>Copyright &copy; 2023</p>

Run HTML

Exercise 20: Horizontal Rule with Attributes

Problem: Add a horizontal rule with a height of 5px and color #ff0000 (use HTML attributes).
Solution:

<hr size="5" color="#ff0000">

Run HTML

Exercise 21: Dropdown Menu

Problem: Create a dropdown menu with three options: “Red”, “Green”, and “Blue”.
Solution:

<select>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Run HTML

Exercise 22: Textarea

Problem: Add a textarea for user comments with 4 rows and 50 columns. Include a placeholder: “Type your comment here”.
Solution:

<textarea rows="4" cols="50" placeholder="Type your comment here"></textarea>

Run HTML

Exercise 23: Email Input Validation

Problem: Create an email input field labeled “Email:” that is required for submission.
Solution:

<label>Email:</label>
<input type="email" name="email" required>

Run HTML

Exercise 24: Navigation Links

Problem: Use the <nav> tag to create a navigation bar with three links: “Home”, “About”, and “Contact”.
Solution:

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

Run HTML

Exercise 25: Embed a Video

Problem: Embed a video file “video.mp4” with controls and a fallback message “Your browser does not support videos”.
Solution:

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support videos.
</video>

Run HTML

Exercise 26: Div with Class

Problem: Create a <div> with the class “container” and an inline style setting its background color to light gray (#f0f0f0).
Solution:

<div class="container" style="background-color: #f0f0f0"></div>

Run HTML

Exercise 27: Definition List

Problem: Create a definition list (<dl>) for the terms “HTML” (definition: HyperText Markup Language) and “CSS” (Cascading Style Sheets).
Solution:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Run HTML

Exercise 28: Checkbox

Problem: Add a checkbox labeled “I agree to the terms” (ensure the checkbox is clickable via the label).
Solution:

<label>
  <input type="checkbox" name="agree"> I agree to the terms
</label>

Run HTML

Exercise 29: Number Input

Problem: Create a number input field for age (range 1–100) with a default value of 18.
Solution:

<input type="number" name="age" min="1" max="100" value="18">

Run HTML

Exercise 30: Address Tag

Problem: Use the <address> tag to display a sample address: “123 Street, City, Country”.
Solution:

<address>
  123 Street, City, Country
</address>

Run HTML

Exercise 31: Date Input

Problem: Create a date input field labeled “Birthdate” with a default value of January 1, 2000.
Solution:

<label>Birthdate:</label>  
<input type="date" name="birthdate" value="2000-01-01">

Run HTML

Exercise 32: Color Picker

Problem: Add a color picker input labeled “Favorite Color” with a default color set to blue (#0000ff).
Solution:

<label>Favorite Color:</label>  
<input type="color" name="favcolor" value="#0000ff">

Run HTML

Exercise 33: Audio Embedding

Problem: Embed an audio file “music.mp3” with controls and a fallback message.
Solution:

<audio controls>  
  <source src="music.mp3" type="audio/mpeg">  
  Your browser does not support audio.  
</audio>

Run HTML

Exercise 34: Fieldset & Legend

Problem: Group a “Username” and “Password” input inside a <fieldset> with the legend “Login Details”.
Solution:

<fieldset>  
  <legend>Login Details</legend>  
  <label>Username: <input type="text"></label><br>  
  <label>Password: <input type="password"></label>  
</fieldset>

Run HTML

Exercise 35: Button Element

Problem: Create a button with the text “Click Me” that triggers a JavaScript function handleClick() (no JS required).
Solution:

<button type="button" onclick="handleClick()">Click Me</button>

Run HTML

Exercise 36: Meter Element

Problem: Display a meter showing a value of 60% out of 100%.
Solution:

<meter value="60" min="0" max="100">60%</meter>

Run HTML

Exercise 37: Figure & Figcaption

Problem: Embed an image “chart.png” with a caption “Figure 1: Sales Data”.
Solution:

<figure>  
  <img src="chart.png" alt="Sales Chart">  
  <figcaption>Figure 1: Sales Data</figcaption>  
</figure>

Run HTML

Exercise 38: Details & Summary

Problem: Create a collapsible section titled “Read More” with hidden text “HTML is fun!”.
Solution:

<details>  
  <summary>Read More</summary>  
  <p>HTML is fun!</p>  
</details>

Run HTML

Exercise 39: Time Element

Problem: Use <time> to display “New Year’s Day: 2024-01-01” with a machine-readable datetime.
Solution:

<p>New Year's Day: <time datetime="2024-01-01">January 1, 2024</time></p>

Run HTML

Exercise 40: Progress Bar

Problem: Show a progress bar at 75% completion with a label “Loading…”.
Solution:

<label>Loading...</label>  
<progress value="75" max="100">75%</progress>

Run HTML

Exercise 41: Datalist Element

Problem: Create a text input with a dropdown list of search suggestions: “HTML”, “CSS”, “JavaScript”.
Solution:

<input list="languages" placeholder="Search...">  
<datalist id="languages">  
  <option value="HTML">  
  <option value="CSS">  
  <option value="JavaScript">  
</datalist>

Run HTML

Exercise 42: Required Attribute

Problem: Create a form with a required text input field labeled “Username” (show an error if empty).
Solution:

<form>  
  <label>Username:</label>  
  <input type="text" name="username" required>  
  <input type="submit">  
</form>

Run HTML

Exercise 43: Download Link

Problem: Create a link to download a file “report.pdf” with the text “Download Report”.
Solution:

<a href="report.pdf" download="annual_report.pdf">Download Report</a>

Run HTML

Exercise 44: Accessibility with ARIA

Problem: Add a role="banner" attribute to the <header> element for accessibility.
Solution:

<header role="banner">  
  <h1>Website Title</h1>  
</header>

Run HTML

Exercise 45: Contenteditable Attribute

Problem: Create a <div> that users can edit directly in the browser.
Solution:

<div contenteditable="true">Click to edit this text!</div>

Run HTML

Exercise 46: Preformatted Text

Problem: Display code <h1>Hello World</h1> exactly as written, preserving spaces and line breaks.
Solution:

<pre><code>&lt;h1&gt;Hello World&lt;/h1&gt;</code></pre>

Run HTML

Exercise 47: Superscript & Subscript

Problem: Write the formula “H₂O” (water) and “E=mc²” using appropriate tags.
Solution:

<p>H<sub>2</sub>O</p>  
<p>E=mc<sup>2</sup></p>

Run HTML

Exercise 48: Multiple File Upload

Problem: Allow users to upload multiple image files at once.
Solution:

<input type="file" name="images" multiple accept="image/*">

Run HTML

Exercise 49: Autocomplete Attribute

Problem: Disable autocomplete for a password input field labeled “New Password”.
Solution:

<label>New Password:</label>  
<input type="password" name="password" autocomplete="off">

Run HTML

Exercise 50: Video Poster Attribute

Problem: Embed a video “demo.mp4” with a placeholder image “poster.jpg” and controls.
Solution:

<video controls poster="poster.jpg">  
  <source src="demo.mp4" type="video/mp4">  
  Your browser does not support videos.  
</video>

Run HTML

Exercise 51: Mark Element

Problem: Highlight the word “important” in a sentence using the <mark> tag.
Solution:

<p>This is an <mark>important</mark> note.</p>

Run HTML

Exercise 52: Mailto Link

Problem: Create a link that opens the user’s email client with a pre-filled subject “Feedback”.
Solution:

<a href="mailto:contact@example.com?subject=Feedback">Send Feedback</a>

Run HTML

Exercise 53: Template Tag

Problem: Define a hidden HTML template for a button with the class “custom-btn”.
Solution:

<template id="btn-template">  
  <button class="custom-btn">Click</button>  
</template>

Run HTML

Exercise 54: Hidden Input

Problem: Add a hidden input field with the name “user_id” and value “123”.
Solution:

<input type="hidden" name="user_id" value="123">

Run HTML

Exercise 55: Open Link in New Tab

Problem: Create a link to “https://example.org” that opens in a new tab securely.
Solution:

<a href="https://example.org" target="_blank" rel="noopener">Visit Example</a>

Run HTML

Exercise 56: Abbreviation Tag

Problem: Display “WHO” as an abbreviation for “World Health Organization” with a tooltip.
Solution:

<abbr title="World Health Organization">WHO</abbr>

Run HTML

Exercise 57: Disabled Attribute

Problem: Create a disabled button with the text “Submit Disabled”.
Solution:

<button type="submit" disabled>Submit Disabled</button>

Run HTML

Exercise 58: Link Stylesheet Conditionally

Problem: Link a stylesheet “print.css” only when the page is printed.
Solution:

<link rel="stylesheet" href="print.css" media="print">

Run HTML

Exercise 59: Keyboard Input

Problem: Display keyboard shortcuts like “Ctrl + S” using appropriate semantic tags.
Solution:

<p>Save the file using <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

Run HTML

Exercise 60: Responsive Image with srcset

Problem: Add an image “hero.jpg” with responsive versions for 1x and 2x screens.
Solution:

<img  
  src="hero.jpg"  
  srcset="hero-2x.jpg 2x"  
  alt="Responsive hero image"  
>

Run HTML

Exercise 61: Dialog Element

Problem: Create a modal dialog box with the text “Are you sure?” and a “Close” button.
Solution:

<dialog open>  
  <p>Are you sure?</p>  
  <button onclick="this.parentElement.close()">Close</button>  
</dialog>

Run HTML

Exercise 62: Picture Element (Responsive Images)

Problem: Display “image.jpg” for small screens and “image-large.jpg” for screens wider than 800px.
Solution:

<picture>  
  <source media="(min-width: 800px)" srcset="image-large.jpg">  
  <img src="image.jpg" alt="Responsive image example">  
</picture>

Run HTML

Exercise 63: Output Element

Problem: Create a form that adds two numbers (5 and 3) and displays the result using <output>.
Solution:

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">  
  <input type="number" id="a" value="5"> +  
  <input type="number" id="b" value="3"> =  
  <output name="result">8</output>  
</form>

Run HTML

Exercise 64: Inline SVG

Problem: Embed an SVG circle with a radius of 40px and fill color red.
Solution:

<svg width="100" height="100">  
  <circle cx="50" cy="50" r="40" fill="red" />  
</svg>

Run HTML

Exercise 65: SEO Meta Tags

Problem: Add meta tags for keywords “HTML, Web Development” and a description “Learn HTML basics.”
Solution:

<head>  
  <meta name="keywords" content="HTML, Web Development">  
  <meta name="description" content="Learn HTML basics">  
</head>

Run HTML

Exercise 66: Social Media Meta Tags

Problem: Add Open Graph meta tags for a page titled “HTML Guide” with a thumbnail “thumb.jpg”.
Solution:

<meta property="og:title" content="HTML Guide">  
<meta property="og:image" content="thumb.jpg">  
<meta property="og:type" content="website">

Run HTML

Exercise 67: Input Pattern Validation

Problem: Create a text input that only accepts 5-digit numbers (e.g., ZIP codes).
Solution:

<input type="text" pattern="\d{5}" placeholder="Enter ZIP code">

Run HTML

Exercise 68: Video Subtitles (Track Element)

Problem: Add subtitles from “subtitles_en.vtt” to a video for English speakers.
Solution:

<video controls>  
  <source src="video.mp4" type="video/mp4">  
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">  
</video>

Run HTML

Exercise 69: Telephone Link

Problem: Create a clickable link to dial “+1234567890” with the text “Call Us”.
Solution:

<a href="tel:+1234567890">Call Us</a>

Run HTML

Exercise 70: ARIA Live Region

Problem: Create a <div> that announces dynamic updates to screen readers (e.g., notifications).
Solution:

<div aria-live="polite" id="notification"></div>  
<!-- Use JavaScript to update content -->

Run HTML

Exercise 71: Web Component Slot

Problem: Create a custom element template with a <slot> for dynamic content.
Solution:

<template id="user-card">  
  <div class="card">  
    <slot name="username">Default User</slot>  
  </div>  
</template>

Run HTML

Exercise 72: Security Meta Tag

Problem: Add a Content Security Policy (CSP) <meta> tag to restrict scripts to the same origin.
Solution:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

Run HTML

Exercise 73: MathML Integration

Problem: Embed the equation x = (−b ± √(b²−4ac)) / (2a) using MathML.
Solution:

<math display="block">  
  <mi>x</mi>  
  <mo>=</mo>  
  <mfrac>  
    <mrow>  
      <mo>−</mo><mi>b</mi>  
      <mo>±</mo>  
      <msqrt>  
        <msup><mi>b</mi><mn>2</mn></msup>  
        <mo>−</mo>  
        <mn>4</mn><mi>a</mi><mi>c</mi>  
      </msqrt>  
    </mrow>  
    <mrow><mn>2</mn><mi>a</mi></mrow>  
  </mfrac>  
</math>

Run HTML

Exercise 74: Bi-Directional Isolation

Problem: Use <bdi> to display a username like “User_123” in a mixed-direction text (e.g., Arabic/English).
Solution:

<p>User: <bdi>User_123</bdi> posted a comment.</p>

Run HTML

Exercise 75: Lazy-Loading Image

Problem: Load an image “landscape.jpg” only when the user scrolls near it.
Solution:

<img src="landscape.jpg" loading="lazy" alt="Scenic view">

Run HTML

Exercise 76: Input Mode for Keyboards

Problem: Optimize a PIN input field to show a numeric keypad on mobile devices.
Solution:

<input type="text" inputmode="numeric" pattern="[0-9]*" placeholder="Enter PIN">

Run HTML

Exercise 77: Right-to-Left Text

Problem: Display a paragraph in Arabic (right-to-left) without changing the HTML structure.
Solution:

<p dir="rtl">البرمجة ممتعة!</p>

Run HTML

Exercise 78: Embed Twitter Widget

Problem: Embed a Twitter tweet using Twitter’s provided embed script (use placeholder URL).
Solution:

<blockquote class="twitter-tweet">  
  <a href="https://twitter.com/user/status/12345"></a>  
</blockquote>  
<script async src="https://platform.twitter.com/widgets.js"></script>

Run HTML

Exercise 79: Translation Control

Problem: Prevent a brand name “TechCorp” from being translated by browsers.
Solution:

<p translate="no">TechCorp</p>

Run HTML

Exercise 80: Custom Data Attributes

Problem: Store a user ID “U-456” in a <div> using a custom data attribute.
Solution:

<div data-user-id="U-456"></div>

Run HTML

Exercise 81: Web App Manifest

Problem: Link a web app manifest file manifest.json to enable Progressive Web App (PWA) installation.
Solution:

<link rel="manifest" href="manifest.json">

Run HTML

Exercise 82: Range Slider

Problem: Create a slider input for selecting a value between 0 and 100, defaulting to 50.
Solution:

<input type="range" min="0" max="100" value="50">

Run HTML

Exercise 83: Meter with High/Low Values

Problem: Display a meter showing 75% with “high” (≥70%) and “low” (≤30%) thresholds.
Solution:

<meter value="75" min="0" max="100" low="30" high="70">75/100</meter>

Run HTML

Exercise 84: Keyboard Shortcuts

Problem: Add a keyboard shortcut (Alt + S) to focus on a search input field.
Solution:

<input type="text" accesskey="s" placeholder="Press Alt+S">

Run HTML

Exercise 85: Embed YouTube Video

Problem: Embed a YouTube video with ID abc123xyz in an iframe (16:9 aspect ratio).
Solution:

<iframe  
  width="560"  
  height="315"  
  src="https://www.youtube.com/embed/abc123xyz"  
  title="YouTube video"  
  allowfullscreen  
></iframe>

Run HTML

Exercise 86: Word Break Opportunity

Problem: Use <wbr> to suggest word breaks in a long URL: https://example<wbr>.com/very-long-path.
Solution:

<p>https://example<wbr>.com/very-long-path</p>

Run HTML

Exercise 87: Microdata (Schema.org)

Problem: Mark up a product name “Widget 3000” and price “$99” using schema.org microdata.
Solution:

<div itemscope itemtype="https://schema.org/Product">  
  <span itemprop="name">Widget 3000</span>  
  <span itemprop="price">$99</span>  
</div>

Run HTML

Exercise 88: Search Input

Problem: Create a search input field with a placeholder “Search this site…”.
Solution:

<input type="search" placeholder="Search this site...">

Run HTML

Exercise 89: Main Element

Problem: Use <main> to wrap the primary content of a page with an ARIA role for accessibility.
Solution:

<main role="main">  
  <h1>Primary Content</h1>  
  <p>This is the main section of the page.</p>  
</main>

Run HTML

Exercise 90: Non-Breaking Space

Problem: Prevent “Mr. Smith” from breaking across lines using  .
Solution:

<p>Mr.&nbsp;Smith</p>

Run HTML

Exercise 91: Script with Defer Attribute

Problem: Load a script “app.js” after HTML parsing completes (non-blocking).
Solution:

<script src="app.js" defer></script>

Run HTML

Exercise 92: Breadcrumb Navigation

Problem: Create a breadcrumb trail: “Home > Products > Electronics” using semantic markup.
Solution:

<nav aria-label="Breadcrumb">  
  <ol>  
    <li><a href="/">Home</a></li>  
    <li><a href="/products">Products</a></li>  
    <li>Electronics</li>  
  </ol>  
</nav>

Run HTML

Exercise 93: Sandboxed Iframe

Problem: Embed an iframe with strict security restrictions (block scripts and forms).
Solution:

<iframe  
  src="untrusted.html"  
  sandbox="allow-same-origin"  
  title="Secure Frame"  
></iframe>

Run HTML

Exercise 94: Sample Output

Problem: Display computer output: “Error: File not found” using <samp>.
Solution:

<samp>Error: File not found</samp>

Run HTML

Exercise 95: Variable in Text

Problem: Mark up the equation variable “x = y + 2” using <var>.
Solution:

<p><var>x</var> = <var>y</var> + 2</p>

Run HTML

Exercise 96: Embed PDF

Problem: Embed a PDF file “document.pdf” with a fallback message.
Solution:

<embed  
  src="document.pdf"  
  type="application/pdf"  
  width="600"  
  height="400"  
>

Run HTML

Exercise 97: Language Attribute

Problem: Specify that a paragraph is written in French.
Solution:

<p lang="fr">Bonjour le monde!</p>

Run HTML

Exercise 98: Spellcheck Attribute

Problem: Disable spellcheck for a textarea labeled “Code Snippet”.
Solution:

<textarea spellcheck="false" placeholder="Code Snippet"></textarea>

Run HTML

Exercise 99: Meta Redirect

Problem: Redirect the page to “https://new-site.com” after 5 seconds.
Solution:

<meta http-equiv="refresh" content="5; url=https://new-site.com">

Run HTML

Exercise 100: Deprecated Element

Problem: Use the deprecated <marquee> to create scrolling text “Welcome!”.
Solution:

<marquee>Welcome!</marquee>  
<!-- Note: Avoid using marquee in modern code! -->

Run HTML

Exercise 101: Dark Mode Toggle

Problem: Add a button to toggle dark mode using CSS variables (no JavaScript required).
Solution:

<button onclick="document.documentElement.classList.toggle('dark')">Toggle Dark Mode</button>  
<style>  
  :root { --bg: white; --text: black; }  
  .dark { --bg: black; --text: white; }  
  body { background: var(--bg); color: var(--text); }  
</style>

Run HTML

Exercise 102: Custom Ordered List Start

Problem: Start an ordered list at 10 with items: “Item 10”, “Item 11”, “Item 12”.
Solution:

<ol start="10">  
  <li>Item 10</li>  
  <li>Item 11</li>  
  <li>Item 12</li>  
</ol>

Run HTML

Exercise 103: Anchor Link Target

Problem: Open a link in a new tab and set rel="noreferrer" for security.
Solution:

<a href="https://example.com" target="_blank" rel="noreferrer">Secure Link</a>

Run HTML

Exercise 104: Input with Autofocus

Problem: Auto-focus on a search input when the page loads.
Solution:

<input type="search" autofocus placeholder="Search...">

Run HTML

Exercise 105: Embed CodePen Snippet

Problem: Embed a CodePen project using their iframe embed code (use placeholder URL).
Solution:

<iframe  
  height="300"  
  style="width: 100%"  
  scrolling="no"  
  src="https://codepen.io/anon/embed/XYZ123"  
  title="CodePen Demo"  
></iframe>

Run HTML

Exercise 106: Responsive Video Aspect Ratio

Problem: Embed a video in a 16:9 responsive container using CSS-in-HTML.
Solution:

<div style="position: relative; padding-bottom: 56.25%; height: 0;">  
  <iframe  
    style="position: absolute; top:0; left:0; width:100%; height:100%"  
    src="video.mp4"  
    title="Responsive Video"  
  ></iframe>  
</div>

Run HTML

Exercise 107: ARIA Progressbar

Problem: Create an accessible progress bar showing 50% completion.
Solution:

<div  
  role="progressbar"  
  aria-valuenow="50"  
  aria-valuemin="0"  
  aria-valuemax="100"  
>  
  50%  
</div>

Run HTML

Exercise 108: Newsletter Signup Form

Problem: Create a form with an email input and a checkbox for “Subscribe to newsletter”.
Solution:

<form>  
  <label>Email: <input type="email" required></label><br>  
  <label>  
    <input type="checkbox" name="subscribe"> Subscribe to newsletter  
  </label><br>  
  <button>Submit</button>  
</form>

Run HTML

Exercise 109: Link Preloading

Problem: Preload a critical CSS file “styles.css” for faster page load.
Solution:

<link rel="preload" href="styles.css" as="style">

Run HTML

Exercise 110: Product Card with Microdata

Problem: Mark up a product card for “Wireless Headphones” priced at $99 using schema.org.
Solution:

<div itemscope itemtype="https://schema.org/Product">  
  <h2 itemprop="name">Wireless Headphones</h2>  
  <p>Price: $<span itemprop="price">99</span></p>  
  <meta itemprop="currency" content="USD">  
</div>

Run HTML

Exercise 111: Geolocation API Integration

Problem: Add a button that displays the user’s latitude and longitude (requires JavaScript).
Solution:

<button onclick="getLocation()">Get Location</button>  
<p id="demo"></p>  
<script>  
  function getLocation() {  
    navigator.geolocation.getCurrentPosition(  
      pos => document.getElementById("demo").innerHTML =  
        `Latitude: ${pos.coords.latitude}, Longitude: ${pos.coords.longitude}`  
    );  
  }  
</script>

Run HTML

Exercise 112: ARIA Landmarks

Problem: Add ARIA roles to structure a page with banner, main, and contentinfo.
Solution:

<header role="banner"><h1>Site Title</h1></header>  
<main role="main"><p>Primary content...</p></main>  
<footer role="contentinfo"><p>© 2024</p></footer>

Run HTML

Exercise 113: Responsive Iframe

Problem: Embed a responsive YouTube video using a 16:9 aspect ratio (CSS-free).
Solution:

<div style="position: relative; padding-bottom: 56.25%; height: 0;">  
  <iframe  
    style="position: absolute; top:0; left:0; width:100%; height:100%"  
    src="https://www.youtube.com/embed/abc123"  
    title="Responsive Video"  
    allowfullscreen  
  ></iframe>  
</div>

Run HTML

Exercise 114: Custom Validation Message

Problem: Show a custom error message for an invalid email input.
Solution:

<input type="email" required oninvalid="this.setCustomValidity('Enter a valid email!')">

Run HTML

Exercise 115: Download Multiple Files

Problem: Create a link to download a ZIP file “archive.zip” with a custom filename.
Solution:

<a href="archive.zip" download="project_files.zip">Download ZIP</a>

Run HTML

Exercise 116: Timezone Display

Problem: Display a timestamp in ISO format with timezone using <time>.
Solution:

<time datetime="2024-01-01T12:00:00+00:00">January 1, 2024 (UTC)</time>

Run HTML

Exercise 117: SVG Animation

Problem: Animate an SVG circle to change color on hover (CSS-in-HTML).
Solution:

<svg width="100" height="100">  
  <circle cx="50" cy="50" r="40" fill="blue" class="svg-circle"/>  
  <style>  
    .svg-circle:hover { fill: red; }  
  </style>  
</svg>

Run HTML

Exercise 118: Skip Navigation Link

Problem: Add an accessibility-friendly “Skip to Content” link.
Solution:

<a href="#main" class="skip-link">Skip to Content</a>  
<main id="main"><!-- Content --></main>  
<style>  
  .skip-link { position: absolute; left: -999px; }  
  .skip-link:focus { left: 10px; }  
</style>

Run HTML

Exercise 119: Custom Data Visualization

Problem: Use <meter> to show a value of 75% with custom optimum, low, and high ranges.
Solution:

<meter value="75" min="0" max="100" low="40" high="80" optimum="60">75/100</meter>

Run HTML

Exercise 120: Client-Side Form Submission

Problem: Create a form that submits data to a dummy URL using GET method.
Solution:

<form action="https://httpbin.org/get" method="GET">  
  <input type="text" name="search" placeholder="Search...">  
  <button type="submit">Go</button>  
</form>

Run HTML

Exercise 111: Geolocation API Integration

Problem: Add a button that displays the user’s latitude and longitude (requires JavaScript).
Solution:

<button onclick="getLocation()">Get Location</button>  
<p id="demo"></p>  
<script>  
  function getLocation() {  
    navigator.geolocation.getCurrentPosition(  
      pos => document.getElementById("demo").innerHTML =  
        `Latitude: ${pos.coords.latitude}, Longitude: ${pos.coords.longitude}`  
    );  
  }  
</script>

Run HTML

Exercise 112: ARIA Landmarks

Problem: Add ARIA roles to structure a page with banner, main, and contentinfo.
Solution:

<header role="banner"><h1>Site Title</h1></header>  
<main role="main"><p>Primary content...</p></main>  
<footer role="contentinfo"><p>© 2024</p></footer>

Run HTML

Exercise 113: Responsive Iframe

Problem: Embed a responsive YouTube video using a 16:9 aspect ratio (CSS-free).
Solution:

<div style="position: relative; padding-bottom: 56.25%; height: 0;">  
  <iframe  
    style="position: absolute; top:0; left:0; width:100%; height:100%"  
    src="https://www.youtube.com/embed/abc123"  
    title="Responsive Video"  
    allowfullscreen  
  ></iframe>  
</div>

Run HTML

Exercise 114: Custom Validation Message

Problem: Show a custom error message for an invalid email input.
Solution:

<input type="email" required oninvalid="this.setCustomValidity('Enter a valid email!')">

Run HTML

Exercise 115: Download Multiple Files

Problem: Create a link to download a ZIP file “archive.zip” with a custom filename.
Solution:

<a href="archive.zip" download="project_files.zip">Download ZIP</a>

Run HTML

Exercise 116: Timezone Display

Problem: Display a timestamp in ISO format with timezone using <time>.
Solution:

<time datetime="2024-01-01T12:00:00+00:00">January 1, 2024 (UTC)</time>

Run HTML

Exercise 117: SVG Animation

Problem: Animate an SVG circle to change color on hover (CSS-in-HTML).
Solution:

<svg width="100" height="100">  
  <circle cx="50" cy="50" r="40" fill="blue" class="svg-circle"/>  
  <style>  
    .svg-circle:hover { fill: red; }  
  </style>  
</svg>

Run HTML

Exercise 118: Skip Navigation Link

Problem: Add an accessibility-friendly “Skip to Content” link.
Solution:

<a href="#main" class="skip-link">Skip to Content</a>  
<main id="main"><!-- Content --></main>  
<style>  
  .skip-link { position: absolute; left: -999px; }  
  .skip-link:focus { left: 10px; }  
</style>

Run HTML

Exercise 119: Custom Data Visualization

Problem: Use <meter> to show a value of 75% with custom optimum, low, and high ranges.
Solution:

<meter value="75" min="0" max="100" low="40" high="80" optimum="60">75/100</meter>

Run HTML

Exercise 120: Client-Side Form Submission

Problem: Create a form that submits data to a dummy URL using GET method.
Solution:

<form action="https://httpbin.org/get" method="GET">  
  <input type="text" name="search" placeholder="Search...">  
  <button type="submit">Go</button>  
</form>

Run HTML

Exercise 121: Web Component (Custom Element)

Problem: Define a custom element <greeting-card> that displays “Hello, World!” in a styled div.
Solution:

<script>  
  class GreetingCard extends HTMLElement {  
    constructor() {  
      super();  
      this.innerHTML = `<div style="border: 2px solid blue; padding: 10px;">Hello, World!</div>`;  
    }  
  }  
  customElements.define('greeting-card', GreetingCard);  
</script>  
<greeting-card></greeting-card>

Run HTML

Exercise 122: Service Worker Registration

Problem: Register a service worker from “sw.js” to enable offline functionality (requires HTTPS).
Solution:

<script>  
  if ('serviceWorker' in navigator) {  
    navigator.serviceWorker.register('/sw.js');  
  }  
</script>

Run HTML

Exercise 123: Drag-and-Drop Zone

Problem: Create a div that accepts dragged files (use ondragover and ondrop events).
Solution:

<div  
  id="dropZone"  
  style="border: 2px dashed gray; padding: 20px;"  
  ondragover="event.preventDefault()"  
  ondrop="alert('File dropped!')"  
>Drop files here</div>

Run HTML

Exercise 124: Image Decoding Attribute

Problem: Load an image “chart.png” asynchronously to avoid blocking the render thread.
Solution:

<img src="chart.png" decoding="async" alt="Data chart">

Run HTML

Exercise 125: Nested Details Elements

Problem: Create nested collapsible sections: “Parent Topic” > “Sub Topic”.
Solution:

<details>  
  <summary>Parent Topic</summary>  
  <details>  
    <summary>Sub Topic</summary>  
    <p>More details...</p>  
  </details>  
</details>

Run HTML

Exercise 126: Input Min/Max Length

Problem: Create a text input that requires 6–12 characters for a username.
Solution:

<input type="text" minlength="6" maxlength="12" required placeholder="Username">

Run HTML

Exercise 127: ARIA Alert

Problem: Create a live region that announces “New message received!” using ARIA.
Solution:

<div id="alert" role="alert"></div>  
<script>  
  document.getElementById('alert').innerHTML = 'New message received!';  
</script>

Run HTML

Exercise 128: Preconnect to External Domain

Problem: Preconnect to “https://fonts.googleapis.com” for faster font loading.
Solution:

<link rel="preconnect" href="https://fonts.googleapis.com">

Run HTML

Exercise 129: Aside Element for Tangential Content

Problem: Use <aside> to display a related quote next to an article.
Solution:

<article>  
  <h2>Main Article</h2>  
  <p>Primary content...</p>  
</article>  
<aside>  
  <blockquote>"HTML is the backbone of the web."</blockquote>  
</aside>

Run HTML

Exercise 130: Date Input with Constraints

Problem: Restrict a date input to dates after January 1, 2024.
Solution:

<input type="date" min="2024-01-02" required>

Run HTML